Linux教程網 >> Linux編程 >> Linux編程 >> jQuery 寫的坦克大戰【附源代碼】

jQuery 寫的坦克大戰【附源代碼】

日期：2017/3/1 10:35:49 编辑：Linux編程

jQuery 寫的坦克大戰新鮮出爐，閒話少說。

免費下載地址在 http://linux.linuxidc.com/

用戶名與密碼都是www.linuxidc.com

具體下載目錄在 /2012年資料/1月/30日/jQuery 寫的坦克大戰【附源代碼】/

演示地址：http://www.muu.cc/html5/Tank/index.html

代碼貼出

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大戰 || www.88181.com</title>
<mce:script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" mce_src="http://code.jquery.com/jquery-1.4.2.min.js"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
$(function() {
$("body").append('<div class="map"></div>');
InitTank('me', {x:(long-50)/2, y:high-50}, 'up');
InitEnemy();
//鍵盤點擊事件
$(document).keydown(function(evt) {
evtevt = evt || window.event;
var key = evt.which || evt.keyCode;
if(key==32)
{
SendBullet("me");
}
switch (key) {
case 37: direction = "left"; break;
case 38: direction = "up"; break;
case 39: direction = "right"; break;
case 40: direction = "down"; break;
}
if (key >= 37 && key <= 40) {
ChangeDirection('me', direction);
isMeMove = true;
}
});
$(document).keyup(function(evt) {
evtevt = evt || window.event;
var key = evt.which || evt.keyCode;
if (key >= 37 && key <= 40) {
isMeMove = false;
}
});
MyInterval=setInterval("Refresh()",timeSpan);
});
var isMeMove = false;
var moveLong = 10;
var bulletmoveLong = 20;
var timeSpan = 300;
var long = 600;
var high = 600;
function Refresh() {
var me = $("#me");
var mtop = $(me).position().top;
var mleft = $(me).position().left;
if (isMeMove) {
direction = $(me).attr("direction");
var offset = GetOffset(direction);
mtop += offset.y*moveLong;
mleft += offset.x*moveLong;
if(mtop<0){
mtop = 0;
}else if(mtop>long-$(me).height())
{
mtop = long-$(me).height();
}
if(mleft<0){
mleft = 0;
}else if(mleft>long-$(me).width())
{
mleft = long-$(me).width();
}
$(me).css({'top':(mtop + 'px'),'left':(mleft + 'px')});
}
$(".tank:visible[enemy='enemy']").each(function(){
var etop = $(this).position().top;
var eleft = $(this).position().left;
var bullettime = parseInt($(this).attr("bullettime"));
if(bullettime<=0)
{
bullettime = 10;
var topSpan = etop-mtop;
var leftSpan = eleft-mleft;
ex = Math.abs(leftSpan)>Math.abs(topSpan)?leftSpan/Math.abs(leftSpan)*-1:0;
ey = Math.abs(leftSpan)>Math.abs(topSpan)?0:topSpan/Math.abs(topSpan)*-1;
etopetop = etop + ey*moveLong;
elefteleft = eleft + ex*moveLong;
var direction = GetDirection({x:ex,y:ey});
ChangeDirection($(this).attr("id"),direction);
SendBullet($(this).attr("id"));
}else
{
direction = $(this).attr("direction");
var offset = GetOffset(direction);
etopetop = etop + offset.y*moveLong;
elefteleft = eleft + offset.x*moveLong;
bullettime--;
}
if(etop<0){
etop = 0;
}else if(etop>long-$(this).height())
{
etop = long-$(this).height();
}
if(eleft<0){
eleft = 0;
}else if(eleft>long-$(this).width())
{
eleft = long-$(this).width();
}
$(this).css({'top':(etop + 'px'),'left':(eleft + 'px')}).attr("");
$(this).attr("bullettime",bullettime);
});
$(".bullet:visible").each(function(){
direction = $(this).attr("direction");
var offset = GetOffset(direction);
var top = $(this).position().top + offset.y*bulletmoveLong;
var left = $(this).position().left + offset.x*bulletmoveLong;
if(top<0){
$(this).hide();
return;
}else if(top>long-$(this).height())
{
$(this).hide();
return;
}
if(left<0){
$(this).remove();
return;
}else if(left>long-$(this).width())
{
$(this).remove();
return;
}
$(this).css({'top':(top + 'px'),'left':(left + 'px')},timeSpan);
});
CheckBullet();
CheckTank();
CheckBulletTank();
}
//判斷子彈相碰
function CheckBullet()
{
$(".bullet[owner='me']:visible").each(function(){
var me = this;
$(".bullet[owner!='me']:visible").each(function(){
if(IsCollision(me,this))
{
$(me).hide();
$(this).hide();
}
});
});
}
//判斷坦克相碰
function CheckTank()
{
var me = $("#me");
$(".tank").not("#me").each(function(){
if(IsCollision(me,this))
{
alert("被坦克"+$(this).attr("id")+"打死了");
Failure();
}
});
}
//判斷子彈打在坦克上
function CheckBulletTank()
{
var me = $("#me");
$(".bullet[owner!='me']:visible").each(function(){
if(IsCollision(me,this))
{
alert("被子彈"+$(this).attr("id")+"打死了");
Failure();
}
});
$(".bullet[owner='me']:visible").each(function(){
var fme = this;
$(".tank").not("#me").each(function(){
if(IsCollision(fme,this))
{
$(this).hide();
$(fme).hide();
InitEnemy();
}
});
});
}
//根據方向返回偏移量
function GetOffset(direction)
{
ox = 0;
oy = 0;
if(direction=='left')
{
ox = -1;
oy = 0;
}else if(direction=='right')
{
ox = 1;
oy = 0;
}else if(direction=='up')
{
ox = 0;
oy = -1;
}else if(direction=='down')
{
ox = 0;
oy = 1;
}
return {x:ox,y:oy};
}
//獲取方向
function GetDirection(offset)
{
var direction = 'down';
if(offset.x==-1 && offset.y==0)
{
direction = 'left' ;
}else if(offset.x==1 && offset.y==0)
{
direction = 'right' ;
}else if(offset.x==0 && offset.y==-1)
{
direction = 'up' ;
}else if(offset.x==0 && offset.y==1)
{
direction = 'down' ;
}
return direction;
}
//發送炮彈
function SendBullet(tid)
{
if($(".bullet[owner='" + tid + "']:visible").size()<2)
{
var x = $("#"+tid).position().left;
var y = $("#"+tid).position().top;
var direction = $("#"+tid).attr("direction");
var offset = GetOffset(direction);
var ox = x+offset.x*20+(offset.x==1?30:20);
var oy = y+offset.y*20+(offset.y==1?30:20);
if($(".bullet:hidden").size()==0)
{
$(".map").append($('<div class="bullet" style="left:' + ox + 'px;top:' + oy + 'px;" direction="' + direction + '" owner="' + tid + '"></div>'));
}else
{
$(".bullet:hidden").eq(0).css({left: ox + 'px',top: oy + 'px'}).attr("direction",direction).attr("owner",tid).show();
}
}
}
//初始化敵人
function InitEnemy()
{
if($("#enemy1:hidden").size()==0)
{
InitTank('enemy1', {x:(Math.round(Math.random()*3)-1)*((long-50)/2), y:0}, 'down');
}else
{
$("#enemy1").css({left:(Math.round(Math.random()*3)-1)*((long-50)/2)+"px",top:0}).show();
}
$("#enemy1").attr("enemy",'enemy').attr("bullettime","10");
SendBullet("enemy1");
}
//初始化坦克
//tid 坦克id
//x橫坐標（left值）
//y縱坐標（top值）
//方向
function InitTank(tid,position, direction) {
x = position.x < 0 ? 0 : position.x;
x = position.x > 600 ? 600 : position.x;
y = position.y < 0 ? 0 : position.y;
y = position.y > 600 ? 600 : position.y;
$(".map").append('<div id="' + tid + '" style="left:' + position.x + 'px;top:' + position.y + 'px;" direction="' + direction + '" class="tank ' + direction + '"></div>');
}
//改變坦克的方向
function ChangeDirection(tid, direction) {
$("#" + tid).removeClass($("#" + tid).attr("direction")).addClass(direction).attr("direction", direction);
}
//判斷兩個元素是否碰撞
function IsCollision(obja,objb)
{
var objaInfo = {width:$(obja).width(),height:$(obja).height(),left:$(obja).position().left,top:$(obja).position().top};
var objbInfo = {width:$(objb).width(),height:$(objb).height(),left:$(objb).position().left,top:$(objb).position().top};
if(objaInfo.left<objbInfo.left)
{
if(objaInfo.left+objaInfo.width<=objbInfo.left)
{
return false;
}
}else
{
if(objbInfo.left+objbInfo.width<=objaInfo.left)
{
return false;
}
}
if(objaInfo.top<objbInfo.top)
{
if(objaInfo.top+objaInfo.height<=objbInfo.top)
{
return false;
}
}else
{
if(objbInfo.top+objbInfo.height<=objaInfo.top)
{
return false;
}
}
return true;
}
function success()
{
clearInterval(MyInterval);
alert("您獲勝了");
}
function Failure()
{
clearInterval(MyInterval);
alert('結束了');
}
// --></mce:script>
<mce:style type="text/css"><!--
.map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.enemy
{
background-color:Red;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
--></mce:style><style type="text/css" mce_bogus="1"> .map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.enemy
{
background-color:Red;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
</style>
</head>
<body>
</body>
</html>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>坦克大戰</title> <mce:script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" mce_src="http://code.jquery.com/jquery-1.4.2.min.js"></mce:script> <mce:script language="javascript" type="text/javascript"></mce:script> <mce:style type="text/css"></mce:style><style type="text/css" mce_bogus="1"> .map { width: 600px; height: 600px; border: 1px solid #000; float: left; position:absolute; top:0; left:0; } .bullet { width:10px; height:10px; background: #FF0; position:absolute; } .tank { width: 50px; height: 50px; position:absolute; } .enemy { background-color:Red; } .right { background-image: url(images/right.gif); } .left { background-image: url(images/left.gif); } .up { background-image: url(images/up.gif); } .down { background-image: url(images/down.gif); } </style> </head> <body> </body> </html>

新版坦克大戰源碼，改進了運行不連貫性和增加了等級和血的信息

[xhtml] view plaincopyprint?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>坦克大戰</title>
<mce:script language="javascript" type="text/javascript" src="http://code.jquery.com/jquery-1.4.2.min.js" mce_src="http://code.jquery.com/jquery-1.4.2.min.js"></mce:script>
<mce:script language="javascript" type="text/javascript"><!--
$(function() {
$("body").append('<div class="map"></div>');
$("body").append('<div class="UserPanel">您共有<span id="Blood"></span>滴血<br /> 您當前的等級：<span id="Grade"></span><br />未消滅敵人個數:<span id="enemyNum"></span></div>');
$("#Blood").html(Blood);
$("#Grade").html(Grade);
$("#enemyNum").html(enemyNum);
InitTank('me', {x:(long-50)/2, y:high-50}, 'up');
InitEnemy();
//鍵盤點擊事件
$(document).keydown(function(evt) {
evtevt = evt || window.event;
var key = evt.which || evt.keyCode;
if(key==32)
{
SendBullet("me");
}
switch (key) {
case 37: direction = "left"; break;
case 38: direction = "up"; break;
case 39: direction = "right"; break;
case 40: direction = "down"; break;
}
if (key >= 37 && key <= 40) {
ChangeDirection('me', direction);
isMeMove = true;
}
});
$(document).keyup(function(evt) {
evtevt = evt || window.event;
var key = evt.which || evt.keyCode;
if (key >= 37 && key <= 40) {
isMeMove = false;
}
});
MyInterval=setInterval("Refresh()",timeSpan);
});
var isMeMove = false;//當前玩家坦克是否在走
var moveLong = 10;//玩家坦克移動速度
var enemymoveLong = 5;//敵人移動速度
var bulletmoveLong = 20;//子彈移動速度
var timeSpan = 300;//刷新頁面時間
var long = 600;
var high = 600;
var enemymoveTime = 10;//敵人走多少次判斷距離坦克的方位和打子彈的頻率
var enemyNum = 5;//剩余敵人個數
var Blood = 3;//用戶的血量
var MaxBlood = 5;//最大血量
var Grade = 0;//等級
function Refresh() {
var me = $("#me");
var mtop = $(me).position().top;
var mleft = $(me).position().left;
if (isMeMove) {
direction = $(me).attr("direction");
var offset = GetOffset(direction);
mtop += offset.y*moveLong;
mleft += offset.x*moveLong;
if(mtop<0){
mtop = 0;
}else if(mtop>long-$(me).height())
{
mtop = long-$(me).height();
}
if(mleft<0){
mleft = 0;
}else if(mleft>long-$(me).width())
{
mleft = long-$(me).width();
}
$(me).stop().animate({'top':(mtop + 'px'),'left':(mleft + 'px')},timeSpan);
}
$(".tank:visible[enemy='enemy']").each(function(){
var etop = $(this).position().top;
var eleft = $(this).position().left;
var bullettime = parseInt($(this).attr("bullettime"));
if(bullettime<=0)
{
bullettime = enemymoveTime;
var topSpan = etop-mtop;
var leftSpan = eleft-mleft;
ex = Math.abs(leftSpan)>Math.abs(topSpan)?leftSpan/Math.abs(leftSpan)*-1:0;
ey = Math.abs(leftSpan)>Math.abs(topSpan)?0:topSpan/Math.abs(topSpan)*-1;
etopetop = etop + ey*enemymoveLong;
elefteleft = eleft + ex*enemymoveLong;
var direction = GetDirection({x:ex,y:ey});
ChangeDirection($(this).attr("id"),direction);
SendBullet($(this).attr("id"));
}else
{
direction = $(this).attr("direction");
var offset = GetOffset(direction);
etopetop = etop + offset.y*enemymoveLong;
elefteleft = eleft + offset.x*enemymoveLong;
bullettime--;
}
if(etop<0){
etop = 0;
}else if(etop>long-$(this).height())
{
etop = long-$(this).height();
}
if(eleft<0){
eleft = 0;
}else if(eleft>long-$(this).width())
{
eleft = long-$(this).width();
}
$(this).stop().animate({'top':(etop + 'px'),'left':(eleft + 'px')},timeSpan).attr("");
$(this).attr("bullettime",bullettime);
});
$(".bullet:visible").each(function(){
direction = $(this).attr("direction");
var offset = GetOffset(direction);
var top = $(this).position().top + offset.y*bulletmoveLong;
var left = $(this).position().left + offset.x*bulletmoveLong;
if(top<0){
$(this).hide();
return;
}else if(top>long-$(this).height())
{
$(this).hide();
return;
}
if(left<0){
$(this).remove();
return;
}else if(left>long-$(this).width())
{
$(this).remove();
return;
}
$(this).stop().animate({'top':(top + 'px'),'left':(left + 'px')},timeSpan);
});
CheckBullet();
CheckTank();
CheckBulletTank();
}
//判斷子彈相碰
function CheckBullet()
{
$(".bullet[owner='me']:visible").each(function(){
var me = this;
$(".bullet[owner!='me']:visible").each(function(){
if(IsCollision(me,this))
{
$(me).stop().hide();
$(this).stop().hide();
}
});
});
}
//判斷坦克相碰
function CheckTank()
{
var me = $("#me");
$(".tank").not("#me").each(function(){
if(IsCollision(me,this))
{
Failure();
}
});
}
//判斷子彈打在坦克上
function CheckBulletTank()
{
var me = $("#me");
$(".bullet[owner!='me']:visible").each(function(){
if(IsCollision(me,this))
{
$(this).stop().hide();
FallBlood();
}
});
$(".bullet[owner='me']:visible").each(function(){
var fme = this;
$(".tank").not("#me").each(function(){
if(IsCollision(fme,this))
{
$(this).stop().hide();
$(fme).stop().hide();
InitEnemy();
FallEnemy();
Plusblood();
}
});
});
}
//根據方向返回偏移量
function GetOffset(direction)
{
ox = 0;
oy = 0;
if(direction=='left')
{
ox = -1;
oy = 0;
}else if(direction=='right')
{
ox = 1;
oy = 0;
}else if(direction=='up')
{
ox = 0;
oy = -1;
}else if(direction=='down')
{
ox = 0;
oy = 1;
}
return {x:ox,y:oy};
}
//獲取方向
function GetDirection(offset)
{
var direction = 'down';
if(offset.x==-1 && offset.y==0)
{
direction = 'left' ;
}else if(offset.x==1 && offset.y==0)
{
direction = 'right' ;
}else if(offset.x==0 && offset.y==-1)
{
direction = 'up' ;
}else if(offset.x==0 && offset.y==1)
{
direction = 'down' ;
}
return direction;
}
//發送炮彈
function SendBullet(tid)
{
if($(".bullet[owner='" + tid + "']:visible").size()<2)
{
var x = $("#"+tid).position().left;
var y = $("#"+tid).position().top;
var direction = $("#"+tid).attr("direction");
var offset = GetOffset(direction);
var ox = x+offset.x*20+(offset.x==1?30:20);
var oy = y+offset.y*20+(offset.y==1?30:20);
if($(".bullet:hidden").size()==0)
{
$(".map").append($('<div class="bullet" style="left:' + ox + 'px;top:' + oy + 'px;" direction="' + direction + '" owner="' + tid + '"></div>'));
}else
{
$(".bullet:hidden").eq(0).css({left: ox + 'px',top: oy + 'px'}).attr("direction",direction).attr("owner",tid).show();
}
}
}
//初始化敵人
function InitEnemy()
{
if($("#enemy1:hidden").size()==0)
{
InitTank('enemy1', {x:(Math.round(Math.random()*3)-1)*((long-50)/2), y:0}, 'down');
}else
{
$("#enemy1").css({left:(Math.round(Math.random()*3)-1)*((long-50)/2)+"px",top:0}).removeClass($("#enemy1").attr("direction")).addClass("down").attr("direction","down").show();
}
$("#enemy1").attr("enemy",'enemy').attr("bullettime","10");
SendBullet("enemy1");
}
//初始化坦克
//tid 坦克id
//x橫坐標（left值）
//y縱坐標（top值）
//方向
function InitTank(tid,position, direction) {
x = position.x < 0 ? 0 : position.x;
x = position.x > 600 ? 600 : position.x;
y = position.y < 0 ? 0 : position.y;
y = position.y > 600 ? 600 : position.y;
$(".map").append('<div id="' + tid + '" style="left:' + position.x + 'px;top:' + position.y + 'px;" direction="' + direction + '" class="tank ' + direction + '"></div>');
}
//改變坦克的方向
function ChangeDirection(tid, direction) {
$("#" + tid).removeClass($("#" + tid).attr("direction")).addClass(direction).attr("direction", direction);
}
//判斷兩個元素是否碰撞
function IsCollision(obja,objb)
{
var objaInfo = {width:$(obja).width(),height:$(obja).height(),left:$(obja).position().left,top:$(obja).position().top};
var objbInfo = {width:$(objb).width(),height:$(objb).height(),left:$(objb).position().left,top:$(objb).position().top};
if(objaInfo.left<objbInfo.left)
{
if(objaInfo.left+objaInfo.width<=objbInfo.left)
{
return false;
}
}else
{
if(objbInfo.left+objbInfo.width<=objaInfo.left)
{
return false;
}
}
if(objaInfo.top<objbInfo.top)
{
if(objaInfo.top+objaInfo.height<=objbInfo.top)
{
return false;
}
}else
{
if(objbInfo.top+objbInfo.height<=objaInfo.top)
{
return false;
}
}
return true;
}
//掉血
function FallBlood()
{
Blood--;
if(Blood<=0)
{
Failure();
}
$("#Blood").html(Blood);
}
//加血
function Plusblood()
{
if(Blood<MaxBlood)
{
Blood++;
}
$("#Blood").html(Blood);
}
//升級
function Upgrade()
{
Grade++;
enemyNum = 5+Grade*2;//更新敵人個數
enemymoveLong = ((10+Grade<20)?10+Grade:20);//更新敵人移動速度
$("#Grade").html(Grade);
}
//減少敵人
function FallEnemy()
{
if(enemyNum==0)
{
Upgrade();
}else
{
enemyNum--;
}
$("#enemyNum").html(enemyNum);
}
//失敗
function Failure()
{
clearInterval(MyInterval);
alert('結束了');
}
// --></mce:script>
<mce:style type="text/css"><!--
.map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
.UserPanel{
position:absolute;
width:200px;
height:300px;
left:600px;
top:0px;
border:1px solid #fff000;
}
--></mce:style><style type="text/css" mce_bogus="1"> .map
{
width: 600px;
height: 600px;
border: 1px solid #000;
float: left;
position:absolute;
top:0;
left:0;
}
.bullet
{
width:10px;
height:10px;
background: #FF0;
position:absolute;
}
.tank
{
width: 50px;
height: 50px;
position:absolute;
}
.right
{
background-image: url(images/right.gif);
}
.left
{
background-image: url(images/left.gif);
}
.up
{
background-image: url(images/up.gif);
}
.down
{
background-image: url(images/down.gif);
}
.UserPanel{
position:absolute;
width:200px;
height:300px;
left:600px;
top:0px;
border:1px solid #fff000;
}
</style>
</head>
<body>
</body>
</html>