Welcome 微信登录
编程资源 图片资源库 蚂蚁家优选 PDF转换器

首页 / 操作系统 / Linux / jQuery 写的坦克大战【附源代码】

jQuery 写的坦克大战新鲜出炉，闲话少说。免费下载地址在 http://linux.linuxidc.com/用户名与密码都是www.linuxidc.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>