jQuery 写的坦克大战【附源代码】


jQuery 写的坦克大战新鲜出炉，闲话少说。

免费下载地址在 http://linux.bkjia.com/

用户名与密码都是www.bkjia.com

具体下载目录在 /2012年资料/1月/30日/jQuery 写的坦克大战【附源代码】/

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

代码贴出

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>坦克大战 || www.88181.com</title>  
  6.     <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>  
  7.     <mce:script language="javascript" type="text/javascript"><!--  
  8.         $(function() {  
  9.             $("body").append('<div class="map"></div>');  
  10.             InitTank('me', {x:(long-50)/2, y:high-50}, 'up');  
  11.             InitEnemy();  
  12.             //键盘点击事件  
  13.             $(document).keydown(function(evt) {  
  14.                 evtevt = evt || window.event;  
  15.                 var key = evt.which || evt.keyCode;  
  16.                 if(key==32)  
  17.                 {  
  18.                     SendBullet("me");  
  19.                 }  
  20.                 switch (key) {  
  21.                     case 37: direction = "left"; break;  
  22.                     case 38: direction = "up"; break;  
  23.                     case 39: direction = "right"; break;  
  24.                     case 40: direction = "down"; break;  
  25.                 }  
  26.                 if (key >= 37 && key <= 40) {  
  27.                     ChangeDirection('me', direction);  
  28.                     isMeMove = true;  
  29.                 }  
  30.             });  
  31.             $(document).keyup(function(evt) {  
  32.                 evtevt = evt || window.event;  
  33.                 var key = evt.which || evt.keyCode;  
  34.                 if (key >= 37 && key <= 40) {  
  35.                     isMeMove = false;  
  36.                 }  
  37.             });  
  38.               
  39.             MyInterval=setInterval("Refresh()",timeSpan);  
  40.         });  
  41.         var isMeMove = false;  
  42.         var moveLong = 10;  
  43.         var bulletmoveLong = 20;  
  44.         var timeSpan = 300;  
  45.         var long = 600;  
  46.         var high = 600;  
  47.           
  48.           
  49.         function Refresh() {  
  50.             var me = $("#me");  
  51.             var mtop = $(me).position().top;  
  52.             var mleft = $(me).position().left;  
  53.             if (isMeMove) {  
  54.                 direction = $(me).attr("direction");  
  55.                 var offset = GetOffset(direction);  
  56.                 mtop += offset.y*moveLong;  
  57.                 mleft += offset.x*moveLong;  
  58.                 if(mtop<0){  
  59.                     mtop = 0;  
  60.                 }else if(mtop>long-$(me).height())  
  61.                 {  
  62.                     mtop = long-$(me).height();  
  63.                 }  
  64.                   
  65.                 if(mleft<0){  
  66.                     mleft = 0;  
  67.                 }else if(mleft>long-$(me).width())  
  68.                 {  
  69.                     mleft = long-$(me).width();  
  70.                 }  
  71.                   
  72.                 $(me).css({'top':(mtop + 'px'),'left':(mleft + 'px')});  
  73.                   
  74.             }  
  75.             $(".tank:visible[enemy='enemy']").each(function(){  
  76.                 var etop = $(this).position().top;  
  77.                 var eleft = $(this).position().left;  
  78.                 var bullettime = parseInt($(this).attr("bullettime"));  
  79.                 if(bullettime<=0)  
  80.                 {  
  81.                     bullettime = 10;  
  82.                     var topSpan = etop-mtop;  
  83.                     var leftSpan = eleft-mleft;  
  84.                     ex = Math.abs(leftSpan)>Math.abs(topSpan)?leftSpan/Math.abs(leftSpan)*-1:0;  
  85.                     ey = Math.abs(leftSpan)>Math.abs(topSpan)?0:topSpan/Math.abs(topSpan)*-1;  
  86.                     etopetop = etop + ey*moveLong;  
  87.                     elefteleft = eleft + ex*moveLong;  
  88.                     var direction = GetDirection({x:ex,y:ey});  
  89.                     ChangeDirection($(this).attr("id"),direction);  
  90.                     SendBullet($(this).attr("id"));  
  91.                 }else  
  92.                 {  
  93.                     direction = $(this).attr("direction");  
  94.                     var offset = GetOffset(direction);  
  95.                     etopetop = etop + offset.y*moveLong;  
  96.                     elefteleft = eleft + offset.x*moveLong;  
  97.                     bullettime--;  
  98.                 }  
  99.                                   
  100.                 if(etop<0){  
  101.                     etop = 0;  
  102.                 }else if(etop>long-$(this).height())  
  103.                 {  
  104.                     etop = long-$(this).height();  
  105.                 }  
  106.                   
  107.                 if(eleft<0){  
  108.                     eleft = 0;  
  109.                 }else if(eleft>long-$(this).width())  
  110.                 {  
  111.                     eleft = long-$(this).width();  
  112.                 }  
  113.                 $(this).css({'top':(etop + 'px'),'left':(eleft + 'px')}).attr("");  
  114.                   
  115.                   
  116.                           
  117.                 $(this).attr("bullettime",bullettime);            
  118.             });  
  119.                           
  120.               
  121.             $(".bullet:visible").each(function(){  
  122.                 direction = $(this).attr("direction");  
  123.                 var offset = GetOffset(direction);  
  124.                 var top = $(this).position().top + offset.y*bulletmoveLong;  
  125.                 var left = $(this).position().left + offset.x*bulletmoveLong;  
  126.                 if(top<0){  
  127.                     $(this).hide();  
  128.                     return;  
  129.                 }else if(top>long-$(this).height())  
  130.                 {  
  131.                     $(this).hide();  
  132.                     return;  
  133.                 }  
  134.                   
  135.                 if(left<0){  
  136.                     $(this).remove();  
  137.                     return;  
  138.                 }else if(left>long-$(this).width())  
  139.                 {  
  140.                     $(this).remove();  
  141.                     return;  
  142.                 }  
  143.                   
  144.                 $(this).css({'top':(top + 'px'),'left':(left + 'px')},timeSpan);  
  145.             });  
  146.               
  147.             CheckBullet();  
  148.             CheckTank();  
  149.             CheckBulletTank();            
  150.         }  
  151.         //判断子弹相碰  
  152.         function CheckBullet()  
  153.         {  
  154.             $(".bullet[owner='me']:visible").each(function(){  
  155.                 var me = this;  
  156.                 $(".bullet[owner!='me']:visible").each(function(){  
  157.                     if(IsCollision(me,this))  
  158.                     {  
  159.                         $(me).hide();  
  160.                         $(this).hide();  
  161.                     }  
  162.                 });  
  163.             });  
  164.         }  
  165.         //判断坦克相碰  
  166.         function CheckTank()  
  167.         {  
  168.             var me = $("#me");  
  169.             $(".tank").not("#me").each(function(){  
  170.                 if(IsCollision(me,this))  
  171.                 {  
  172.                     alert("被坦克"+$(this).attr("id")+"打死了");  
  173.                     Failure();  
  174.                 }  
  175.             });  
  176.         }  
  177.         //判断子弹打在坦克上  
  178.         function CheckBulletTank()  
  179.         {  
  180.               
  181.             var me = $("#me");  
  182.             $(".bullet[owner!='me']:visible").each(function(){  
  183.                 if(IsCollision(me,this))  
  184.                 {  
  185.                     alert("被子弹"+$(this).attr("id")+"打死了");  
  186.                     Failure();  
  187.                 }  
  188.             });  
  189.             $(".bullet[owner='me']:visible").each(function(){  
  190.                 var fme = this;  
  191.                 $(".tank").not("#me").each(function(){  
  192.                     if(IsCollision(fme,this))  
  193.                     {  
  194.                         $(this).hide();  
  195.                         $(fme).hide();  
  196.                         InitEnemy();  
  197.                     }  
  198.                 });  
  199.             });  
  200.         }  
  201.           
  202.         //根据方向返回偏移量  
  203.         function GetOffset(direction)  
  204.         {  
  205.             ox = 0;  
  206.             oy = 0;  
  207.             if(direction=='left')  
  208.             {  
  209.                 ox = -1;  
  210.                 oy = 0;  
  211.             }else if(direction=='right')  
  212.             {  
  213.                 ox = 1;  
  214.                 oy = 0;  
  215.             }else if(direction=='up')  
  216.             {  
  217.                 ox = 0;  
  218.                 oy = -1;  
  219.             }else if(direction=='down')  
  220.             {  
  221.                 ox = 0;  
  222.                 oy = 1;  
  223.             }  
  224.             return {x:ox,y:oy};  
  225.         }  
  226.           
  227.         //获取方向  
  228.         function GetDirection(offset)  
  229.         {  
  230.             var direction = 'down';  
  231.             if(offset.x==-1 && offset.y==0)  
  232.             {  
  233.                 direction = 'left' ;  
  234.             }else if(offset.x==1 && offset.y==0)  
  235.             {  
  236.                 direction = 'right' ;  
  237.             }else if(offset.x==0 && offset.y==-1)  
  238.             {  
  239.                 direction = 'up' ;  
  240.             }else if(offset.x==0 && offset.y==1)  
  241.             {  
  242.                 direction = 'down' ;  
  243.             }  
  244.             return direction;  
  245.         }  
  246.           
  247.         //发送炮弹  
  248.         function SendBullet(tid)  
  249.         {  
  250.             if($(".bullet[owner='" + tid + "']:visible").size()<2)  
  251.             {  
  252.                 var x = $("#"+tid).position().left;  
  253.                 var y = $("#"+tid).position().top;  
  254.                 var direction = $("#"+tid).attr("direction");  
  255.                 var offset = GetOffset(direction);  
  256.                 var ox = x+offset.x*20+(offset.x==1?30:20);  
  257.                 var oy = y+offset.y*20+(offset.y==1?30:20);  
  258.                 if($(".bullet:hidden").size()==0)  
  259.                 {  
  260.                     $(".map").append($('<div class="bullet" style="left:' + ox + 'px;top:' + oy + 'px;" direction="' + direction + '" owner="' + tid + '"></div>'));  
  261.                 }else  
  262.                 {  
  263.                     $(".bullet:hidden").eq(0).css({left: ox + 'px',top: oy + 'px'}).attr("direction",direction).attr("owner",tid).show();  
  264.                 }  
  265.             }  
  266.         }  
  267.           
  268.         //初始化敌人  
  269.         function InitEnemy()  
  270.         {  
  271.             if($("#enemy1:hidden").size()==0)  
  272.             {  
  273.                 InitTank('enemy1', {x:(Math.round(Math.random()*3)-1)*((long-50)/2), y:0}, 'down');  
  274.             }else  
  275.             {  
  276.                 $("#enemy1").css({left:(Math.round(Math.random()*3)-1)*((long-50)/2)+"px",top:0}).show();  
  277.             }  
  278.             $("#enemy1").attr("enemy",'enemy').attr("bullettime","10");  
  279.             SendBullet("enemy1");  
  280.         }  
  281.           
  282.         //初始化坦克  
  283.         //tid 坦克id  
  284.         //x横坐标（left值）  
  285.         //y纵坐标（top值）  
  286.         //方向  
  287.         function InitTank(tid,position, direction) {  
  288.             x = position.x < 0 ? 0 : position.x;  
  289.             x = position.x > 600 ? 600 : position.x;  
  290.             y = position.y < 0 ? 0 : position.y;  
  291.             y = position.y > 600 ? 600 : position.y;  
  292.             $(".map").append('<div id="' + tid + '" style="left:' + position.x + 'px;top:' + position.y + 'px;" direction="' + direction + '" class="tank ' + direction + '"></div>');  
  293.         }  
  294.           
  295.         //改变坦克的方向  
  296.         function ChangeDirection(tid, direction) {  
  297.             $("#" + tid).removeClass($("#" + tid).attr("direction")).addClass(direction).attr("direction", direction);  
  298.         }  
  299.         //判断两个元素是否碰撞  
  300.         function IsCollision(obja,objb)  
  301.         {  
  302.             var objaInfo = {width:$(obja).width(),height:$(obja).height(),left:$(obja).position().left,top:$(obja).position().top};  
  303.             var objbInfo = {width:$(objb).width(),height:$(objb).height(),left:$(objb).position().left,top:$(objb).position().top};  
  304.             if(objaInfo.left<objbInfo.left)  
  305.             {  
  306.                 if(objaInfo.left+objaInfo.width<=objbInfo.left)  
  307.                 {  
  308.                     return false;  
  309.                 }  
  310.             }else  
  311.             {  
  312.                 if(objbInfo.left+objbInfo.width<=objaInfo.left)  
  313.                 {  
  314.                     return false;  
  315.                 }  
  316.             }  
  317.               
  318.             if(objaInfo.top<objbInfo.top)  
  319.             {  
  320.                 if(objaInfo.top+objaInfo.height<=objbInfo.top)  
  321.                 {  
  322.                     return false;  
  323.                 }  
  324.             }else  
  325.             {  
  326.                 if(objbInfo.top+objbInfo.height<=objaInfo.top)  
  327.                 {  
  328.                     return false;  
  329.                 }  
  330.             }  
  331.             return true;  
  332.         }  
  333.           
  334.         function success()  
  335.         {  
  336.             clearInterval(MyInterval);  
  337.             alert("您获胜了");  
  338.         }  
  339.           
  340.         function Failure()  
  341.         {  
  342.             clearInterval(MyInterval);  
  343.             alert('结束了');  
  344.         }  
  345.                  
  346.       
  347. // --></mce:script>  
  348.     <mce:style type="text/css"><!--  
  349.         .map  
  350.         {  
  351.             width: 600px;  
  352.             height: 600px;  
  353.             border: 1px solid #000;  
  354.             float: left;  
  355.             position:absolute;  
  356.             top:0;  
  357.             left:0;  
  358.         }  
  359.         .bullet  
  360.         {  
  361.             width:10px;  
  362.             height:10px;  
  363.             background: #FF0;  
  364.             position:absolute;  
  365.         }  
  366.         .tank  
  367.         {  
  368.             width: 50px;  
  369.             height: 50px;  
  370.             position:absolute;  
  371.         }  
  372.         .enemy  
  373.         {  
  374.             background-color:Red;  
  375.         }  
  376.         .right  
  377.         {  
  378.             background-image: url(images/right.gif);  
  379.         }  
  380.         .left  
  381.         {  
  382.             background-image: url(images/left.gif);  
  383.         }  
  384.         .up  
  385.         {  
  386.             background-image: url(images/up.gif);  
  387.         }  
  388.         .down  
  389.         {  
  390.             background-image: url(images/down.gif);  
  391.         }  
  392.       
  393. --></mce:style><style type="text/css" mce_bogus="1">        .map  
  394.         {  
  395.             width: 600px;  
  396.             height: 600px;  
  397.             border: 1px solid #000;  
  398.             float: left;  
  399.             position:absolute;  
  400.             top:0;  
  401.             left:0;  
  402.         }  
  403.         .bullet  
  404.         {  
  405.             width:10px;  
  406.             height:10px;  
  407.             background: #FF0;  
  408.             position:absolute;  
  409.         }  
  410.         .tank  
  411.         {  
  412.             width: 50px;  
  413.             height: 50px;  
  414.             position:absolute;  
  415.         }  
  416.         .enemy  
  417.         {  
  418.             background-color:Red;  
  419.         }  
  420.         .right  
  421.         {  
  422.             background-image: url(images/right.gif);  
  423.         }  
  424.         .left  
  425.         {  
  426.             background-image: url(images/left.gif);  
  427.         }  
  428.         .up  
  429.         {  
  430.             background-image: url(images/up.gif);  
  431.         }  
  432.         .down  
  433.         {  
  434.             background-image: url(images/down.gif);  
  435.         }  
  436.     </style>  
  437. </head>  
  438. <body>  
  439. </body>  
  440. </html>  

 

 

新版坦克大战源码，改进了运行不连贯性和增加了等级和血的信息

[xhtml] view plaincopyprint?

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">  
  2. <html xmlns="http://www.w3.org/1999/xhtml">  
  3. <head>  
  4.     <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />  
  5.     <title>坦克大战</title>  
  6.     <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>  
  7.     <mce:script language="javascript" type="text/javascript"><!--  
  8.         $(function() {  
  9.             $("body").append('<div class="map"></div>');  
  10.             $("body").append('<div class="UserPanel">您共有<span id="Blood"></span>滴血<br /> 您当前的等级：<span id="Grade"></span><br />未消灭敌人个数:<span id="enemyNum"></span></div>');  
  11.             $("#Blood").html(Blood);  
  12.             $("#Grade").html(Grade);  
  13.             $("#enemyNum").html(enemyNum);  
  14.             InitTank('me', {x:(long-50)/2, y:high-50}, 'up');  
  15.             InitEnemy();  
  16.             //键盘点击事件  
  17.             $(document).keydown(function(evt) {  
  18.                 evtevt = evt || window.event;  
  19.                 var key = evt.which || evt.keyCode;  
  20.                 if(key==32)  
  21.                 {  
  22.                     SendBullet("me");  
  23.                 }  
  24.                 switch (key) {  
  25.                     case 37: direction = "left"; break;  
  26.                     case 38: direction = "up"; break;  
  27.                     case 39: direction = "right"; break;  
  28.                     case 40: direction = "down"; break;  
  29.                 }  
  30.                 if (key >= 37 && key <= 40) {  
  31.                     ChangeDirection('me', direction);  
  32.                     isMeMove = true;  
  33.                 }  
  34.             });  
  35.             $(document).keyup(function(evt) {  
  36.                 evtevt = evt || window.event;  
  37.                 var key = evt.which || evt.keyCode;  
  38.                 if (key >= 37 && key <= 40) {  
  39.                     isMeMove = false;  
  40.                 }  
  41.             });  
  42.               
  43.               
  44.             MyInterval=setInterval("Refresh()",timeSpan);  
  45.         });  
  46.         var isMeMove = false;//当前玩家坦克是否在走  
  47.         var moveLong = 10;//玩家坦克移动速度  
  48.         var enemymoveLong = 5;//敌人移动速度  
  49.         var bulletmoveLong = 20;//子弹移动速度  
  50.         var timeSpan = 300;//刷新页面时间  
  51.         var long = 600;  
  52.         var high = 600;  
  53.         var enemymoveTime = 10;//敌人走多少次判断距离坦克的方位和打子弹的频率  
  54.         var enemyNum = 5;//剩余敌人个数  
  55.         var Blood = 3;//用户的血量  
  56.         var MaxBlood = 5;//最大血量  
  57.         var Grade = 0;//等级  
  58.           
  59.           
  60.         function Refresh() {  
  61.             var me = $("#me");  
  62.             var mtop = $(me).position().top;  
  63.             var mleft = $(me).position().left;  
  64.             if (isMeMove) {  
  65.                 direction = $(me).attr("direction");  
  66.                 var offset = GetOffset(direction);  
  67.                 mtop += offset.y*moveLong;  
  68.                 mleft += offset.x*moveLong;  
  69.                 if(mtop<0){  
  70.                     mtop = 0;  
  71.                 }else if(mtop>long-$(me).height())  
  72.                 {  
  73.                     mtop = long-$(me).height();  
  74.                 }  
  75.                   
  76.                 if(mleft<0){  
  77.                     mleft = 0;  
  78.                 }else if(mleft>long-$(me).width())  
  79.                 {  
  80.                     mleft = long-$(me).width();  
  81.                 }  
  82.                   
  83.                 $(me).stop().animate({'top':(mtop + 'px'),'left':(mleft + 'px')},timeSpan);  
  84.                   
  85.             }  
  86.             $(".tank:visible[enemy='enemy']").each(function(){  
  87.                 var etop = $(this).position().top;  
  88.                 var eleft = $(this).position().left;  
  89.                 var bullettime = parseInt($(this).attr("bullettime"));  
  90.                 if(bullettime<=0)  
  91.                 {  
  92.                     bullettime = enemymoveTime;  
  93.                     var topSpan = etop-mtop;  
  94.                     var leftSpan = eleft-mleft;  
  95.                     ex = Math.abs(leftSpan)>Math.abs(topSpan)?leftSpan/Math.abs(leftSpan)*-1:0;  
  96.                     ey = Math.abs(leftSpan)>Math.abs(topSpan)?0:topSpan/Math.abs(topSpan)*-1;  
  97.                     etopetop = etop + ey*enemymoveLong;  
  98.                     elefteleft = eleft + ex*enemymoveLong;  
  99.                     var direction = GetDirection({x:ex,y:ey});  
  100.                     ChangeDirection($(this).attr("id"),direction);  
  101.                     SendBullet($(this).attr("id"));  
  102.                 }else  
  103.                 {  
  104.                     direction = $(this).attr("direction");  
  105.                     var offset = GetOffset(direction);  
  106.                     etopetop = etop + offset.y*enemymoveLong;  
  107.                     elefteleft = eleft + offset.x*enemymoveLong;  
  108.                     bullettime--;  
  109.                 }  
  110.                                   
  111.                 if(etop<0){  
  112.                     etop = 0;  
  113.                 }else if(etop>long-$(this).height())  
  114.                 {  
  115.                     etop = long-$(this).height();  
  116.                 }  
  117.                   
  118.                 if(eleft<0){  
  119.                     eleft = 0;  
  120.                 }else if(eleft>long-$(this).width())  
  121.                 {  
  122.                     eleft = long-$(this).width();  
  123.                 }  
  124.                 $(this).stop().animate({'top':(etop + 'px'),'left':(eleft + 'px')},timeSpan).attr("");  
  125.                   
  126.                   
  127.                           
  128.                 $(this).attr("bullettime",bullettime);            
  129.             });  
  130.                           
  131.               
  132.             $(".bullet:visible").each(function(){  
  133.                 direction = $(this).attr("direction");  
  134.                 var offset = GetOffset(direction);  
  135.                 var top = $(this).position().top + offset.y*bulletmoveLong;  
  136.                 var left = $(this).position().left + offset.x*bulletmoveLong;  
  137.                 if(top<0){  
  138.                     $(this).hide();  
  139.                     return;  
  140.                 }else if(top>long-$(this).height())  
  141.                 {  
  142.                     $(this).hide();  
  143.                     return;  
  144.                 }  
  145.                   
  146.                 if(left<0){  
  147.                     $(this).remove();  
  148.                     return;  
  149.                 }else if(left>long-$(this).width())  
  150.                 {  
  151.                     $(this).remove();  
  152.                     return;  
  153.                 }  
  154.                   
  155.                 $(this).stop().animate({'top':(top + 'px'),'left':(left + 'px')},timeSpan);  
  156.             });  
  157.               
  158.             CheckBullet();  
  159.             CheckTank();  
  160.             CheckBulletTank();            
  161.         }  
  162.         //判断子弹相碰  
  163.         function CheckBullet()  
  164.         {  
  165.             $(".bullet[owner='me']:visible").each(function(){  
  166.                 var me = this;  
  167.                 $(".bullet[owner!='me']:visible").each(function(){  
  168.                     if(IsCollision(me,this))  
  169.                     {  
  170.                         $(me).stop().hide();  
  171.                         $(this).stop().hide();  
  172.                     }  
  173.                 });  
  174.             });  
  175.         }  
  176.         //判断坦克相碰  
  177.         function CheckTank()  
  178.         {  
  179.             var me = $("#me");  
  180.             $(".tank").not("#me").each(function(){  
  181.                 if(IsCollision(me,this))  
  182.                 {  
  183.                     Failure();  
  184.                 }  
  185.             });  
  186.         }  
  187.         //判断子弹打在坦克上  
  188.         function CheckBulletTank()  
  189.         {  
  190.               
  191.             var me = $("#me");  
  192.             $(".bullet[owner!='me']:visible").each(function(){  
  193.                 if(IsCollision(me,this))  
  194.                 {  
  195.                     $(this).stop().hide();  
  196.                     FallBlood();  
  197.                 }  
  198.             });  
  199.             $(".bullet[owner='me']:visible").each(function(){  
  200.                 var fme = this;  
  201.                 $(".tank").not("#me").each(function(){  
  202.                     if(IsCollision(fme,this))  
  203.                     {  
  204.                         $(this).stop().hide();  
  205.                         $(fme).stop().hide();  
  206.                         InitEnemy();  
  207.                         FallEnemy();  
  208.                         Plusblood();  
  209.                     }  
  210.                 });  
  211.             });  
  212.         }  
  213.           
  214.         //根据方向返回偏移量  
  215.         function GetOffset(direction)  
  216.         {  
  217.             ox = 0;  
  218.             oy = 0;  
  219.             if(direction=='left')  
  220.             {  
  221.                 ox = -1;  
  222.                 oy = 0;  
  223.             }else if(direction=='right')  
  224.             {  
  225.                 ox = 1;  
  226.                 oy = 0;  
  227.             }else if(direction=='up')  
  228.             {  
  229.                 ox = 0;  
  230.                 oy = -1;  
  231.             }else if(direction=='down')  
  232.             {  
  233.                 ox = 0;  
  234.                 oy = 1;  
  235.             }  
  236.             return {x:ox,y:oy};  
  237.         }  
  238.           
  239.         //获取方向  
  240.         function GetDirection(offset)  
  241.         {  
  242.             var direction = 'down';  
  243.             if(offset.x==-1 && offset.y==0)  
  244.             {  
  245.                 direction = 'left' ;  
  246.             }else if(offset.x==1 && offset.y==0)  
  247.             {  
  248.                 direction = 'right' ;  
  249.             }else if(offset.x==0 && offset.y==-1)  
  250.             {  
  251.                 direction = 'up' ;  
  252.             }else if(offset.x==0 && offset.y==1)  
  253.             {  
  254.                 direction = 'down' ;  
  255.             }  
  256.             return direction;  
  257.         }  
  258.           
  259.         //发送炮弹  
  260.         function SendBullet(tid)  
  261.         {  
  262.             if($(".bullet[owner='" + tid + "']:visible").size()<2)  
  263.             {  
  264.                 var x = $("#"+tid).position().left;  
  265.                 var y = $("#"+tid).position().top;  
  266.                 var direction = $("#"+tid).attr("direction");  
  267.                 var offset = GetOffset(direction);  
  268.                 var ox = x+offset.x*20+(offset.x==1?30:20);  
  269.                 var oy = y+offset.y*20+(offset.y==1?30:20);  
  270.                 if($(".bullet:hidden").size()==0)  
  271.                 {  
  272.                     $(".map").append($('<div class="bullet" style="left:' + ox + 'px;top:' + oy + 'px;" direction="' + direction + '" owner="' + tid + '"></div>'));  
  273.                 }else  
  274.                 {  
  275.                     $(".bullet:hidden").eq(0).css({left: ox + 'px',top: oy + 'px'}).attr("direction",direction).attr("owner",tid).show();  
  276.                 }  
  277.             }  
  278.         }  
  279.           
  280.         //初始化敌人  
  281.         function InitEnemy()  
  282.         {  
  283.             if($("#enemy1:hidden").size()==0)  
  284.             {  
  285.                 InitTank('enemy1', {x:(Math.round(Math.random()*3)-1)*((long-50)/2), y:0}, 'down');  
  286.             }else  
  287.             {  
  288.                 $("#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();  
  289.             }  
  290.             $("#enemy1").attr("enemy",'enemy').attr("bullettime","10");  
  291.             SendBullet("enemy1");  
  292.         }  
  293.           
  294.         //初始化坦克  
  295.         //tid 坦克id  
  296.         //x横坐标（left值）  
  297.         //y纵坐标（top值）  
  298.         //方向  
  299.         function InitTank(tid,position, direction) {  
  300.             x = position.x < 0 ? 0 : position.x;  
  301.             x = position.x > 600 ? 600 : position.x;  
  302.             y = position.y < 0 ? 0 : position.y;  
  303.             y = position.y > 600 ? 600 : position.y;  
  304.             $(".map").append('<div id="' + tid + '" style="left:' + position.x + 'px;top:' + position.y + 'px;" direction="' + direction + '" class="tank ' + direction + '"></div>');  
  305.         }  
  306.           
  307.         //改变坦克的方向  
  308.         function ChangeDirection(tid, direction) {  
  309.             $("#" + tid).removeClass($("#" + tid).attr("direction")).addClass(direction).attr("direction", direction);  
  310.         }  
  311.         //判断两个元素是否碰撞  
  312.         function IsCollision(obja,objb)  
  313.         {  
  314.             var objaInfo = {width:$(obja).width(),height:$(obja).height(),left:$(obja).position().left,top:$(obja).position().top};  
  315.             var objbInfo = {width:$(objb).width(),height:$(objb).height(),left:$(objb).position().left,top:$(objb).position().top};  
  316.             if(objaInfo.left<objbInfo.left)  
  317.             {  
  318.                 if(objaInfo.left+objaInfo.width<=objbInfo.left)  
  319.                 {  
  320.                     return false;  
  321.                 }  
  322.             }else  
  323.             {  
  324.                 if(objbInfo.left+objbInfo.width<=objaInfo.left)  
  325.                 {  
  326.                     return false;  
  327.                 }  
  328.             }  
  329.               
  330.             if(objaInfo.top<objbInfo.top)  
  331.             {  
  332.                 if(objaInfo.top+objaInfo.height<=objbInfo.top)  
  333.                 {  
  334.                     return false;  
  335.                 }  
  336.             }else  
  337.             {  
  338.                 if(objbInfo.top+objbInfo.height<=objaInfo.top)  
  339.                 {  
  340.                     return false;  
  341.                 }  
  342.             }  
  343.             return true;  
  344.         }  
  345.         //掉血  
  346.         function FallBlood()  
  347.         {  
  348.             Blood--;  
  349.             if(Blood<=0)  
  350.             {  
  351.                 Failure();  
  352.             }  
  353.             $("#Blood").html(Blood);  
  354.         }  
  355.         //加血  
  356.         function Plusblood()  
  357.         {  
  358.             if(Blood<MaxBlood)  
  359.             {  
  360.                 Blood++;  
  361.             }  
  362.             $("#Blood").html(Blood);  
  363.         }  
  364.         //升级  
  365.         function Upgrade()  
  366.         {  
  367.             Grade++;  
  368.             enemyNum = 5+Grade*2;//更新敌人个数  
  369.             enemymoveLong = ((10+Grade<20)?10+Grade:20);//更新敌人移动速度  
  370.             $("#Grade").html(Grade);  
  371.         }  
  372.         //减少敌人  
  373.         function FallEnemy()  
  374.         {  
  375.             if(enemyNum==0)  
  376.             {  
  377.                 Upgrade();  
  378.             }else  
  379.             {  
  380.                 enemyNum--;  
  381.             }  
  382.             $("#enemyNum").html(enemyNum);  
  383.         }  
  384.           
  385.         //失败  
  386.         function Failure()  
  387.         {  
  388.             clearInterval(MyInterval);  
  389.             alert('结束了');  
  390.         }  
  391.                  
  392.       
  393. // --></mce:script>  
  394.     <mce:style type="text/css"><!--  
  395.         .map  
  396.         {  
  397.             width: 600px;  
  398.             height: 600px;  
  399.             border: 1px solid #000;  
  400.             float: left;  
  401.             position:absolute;  
  402.             top:0;  
  403.             left:0;  
  404.         }  
  405.         .bullet  
  406.         {  
  407.             width:10px;  
  408.             height:10px;  
  409.             background: #FF0;  
  410.             position:absolute;  
  411.         }  
  412.         .tank  
  413.         {  
  414.             width: 50px;  
  415.             height: 50px;  
  416.             position:absolute;  
  417.         }  
  418.           
  419.         .right  
  420.         {  
  421.             background-image: url(images/right.gif);  
  422.         }  
  423.         .left  
  424.         {  
  425.             background-image: url(images/left.gif);  
  426.         }  
  427.         .up  
  428.         {  
  429.             background-image: url(images/up.gif);  
  430.         }  
  431.         .down  
  432.         {  
  433.             background-image: url(images/down.gif);  
  434.         }  
  435.           
  436.         .UserPanel{  
  437.             position:absolute;  
  438.             width:200px;  
  439.             height:300px;  
  440.             left:600px;  
  441.             top:0px;  
  442.             border:1px solid #fff000;  
  443.         }  
  444.       
  445. --></mce:style><style type="text/css" mce_bogus="1">        .map  
  446.         {  
  447.             width: 600px;  
  448.             height: 600px;  
  449.             border: 1px solid #000;  
  450.             float: left;  
  451.             position:absolute;  
  452.             top:0;  
  453.             left:0;  
  454.         }  
  455.         .bullet  
  456.         {  
  457.             width:10px;  
  458.             height:10px;  
  459.             background: #FF0;  
  460.             position:absolute;  
  461.         }  
  462.         .tank  
  463.         {  
  464.             width: 50px;  
  465.             height: 50px;  
  466.             position:absolute;  
  467.         }  
  468.           
  469.         .right  
  470.         {  
  471.             background-image: url(images/right.gif);  
  472.         }  
  473.         .left  
  474.         {  
  475.             background-image: url(images/left.gif);  
  476.         }  
  477.         .up  
  478.         {  
  479.             background-image: url(images/up.gif);  
  480.         }  
  481.         .down  
  482.         {  
  483.             background-image: url(images/down.gif);  
  484.         }  
  485.           
  486.         .UserPanel{  
  487.             position:absolute;  
  488.             width:200px;  
  489.             height:300px;  
  490.             left:600px;  
  491.             top:0px;  
  492.             border:1px solid #fff000;  
  493.         }  
  494.     </style>  
  495. </head>  
  496. <body>  
  497. </body>  
  498. </html>  

相关内容