之前我们有分享过不少经典的HTML5游戏，有些还是很有意思的，比如HTML5版切水果游戏和HTML5中国象棋游戏。今天要分享的是一款简化版的HTML5坦克大战游戏，方向键控制坦克的行进方向，空格键发射子弹，命中敌方坦克后也会发出声音，效果还算可以。效果图如下：

在线预览   源码下载

实现的代码。

javascript代码：

  1. window.addEventListener("load", canvasApp, false);
  2. //是否支持canvas
  3. function canvasSupport () {
  4.       return Modernizr.canvas;
  5. }
  6. function canvasApp() {
  7.     //是否支持canvas
  8.     if (!canvasSupport()) {
  9.              return;
  10.           }
  11.     var theCanvas = document.getElementById("canvasOne");
  12.     var context = theCanvas.getContext("2d");
  13.     var tank=new Image();
  14.     tank.addEventListener('load', start, false);
  15.     tank.src="tanks_sheet.png"
  16.     //Background
  17.     context.fillStyle = "#CCCCCC";
  18.     context.fillRect(0, 0, theCanvas.width, theCanvas.height);
  19.     //Box
  20.     context.lineWidth=16;
  21.     context.strokeStyle = "#000000";
  22.     context.strokeRect(8,8, theCanvas.width-16, theCanvas.height-16);
  23.     //画我方tank和我方炮弹
  24.     function drawtank() {
  25.         if(gameover){
  26.             context.save();
  27.             context.fillStyle = "#000000";
  28.             context.font = "normal bold 50px normal";
  29.             context.fillText("游戏结束", 150, 150);
  30.             context.restore();
  31.             context.save();
  32.             context.fillStyle = "#000000";
  33.             context.font = "normal bold 25px normal";
  34.             context.fillText("按空格键重新开始游戏", 125, 200);
  35.             context.restore();
  36.             update();
  37.             return;
  38.         }
  39.         update();
  40.         drawScene();
  41.         render();
  42.         //画场景
  43.         function drawScene(){
  44.             for(var i=0;i<=10;i++){
  45.                 for(var j=0;j<=14;j++){
  46.                     colCtr=j*32+16;
  47.                     rowCtr=i*32+16;
  48.                     context.save();
  49.                     sourceX=Math.floor(scene[i][j]%8)*32;
  50.                     sourceY=Math.floor(scene[i][j]/8)*32;
  51.                     context.drawImage(tank, sourceX,sourceY,32,32,colCtr,rowCtr,32,32);
  52.                     context.restore();
  53.                 }
  54.             }
  55.         }
  56.         //坦克更新数据
  57.         function update(){
  58.             tankmove.x=tankmove.nextx;
  59.             tankmove.y=tankmove.nexty;
  60.             //左
  61.             if(keyPressList[37]==true){
  62.                 //playermove.play();
  63.                 //playermove.stop();
  64.                 if(gameover){
  65.  
  66.                     return;
  67.                 }
  68.                 space();
  69.                 tankmove.tankAngle=270;
  70.                 tankmove.nextx-=tankmove.tankspeed;
  71.                 tankmove.tankshape=tankmove.tanknextshape;
  72.                 if(scene[Math.floor((tankmove.nexty-12)/32)][Math.floor((tankmove.nextx-12)/32)]!=0||scene[Math.ceil((tankmove.nexty-20)/32)][Math.floor((tankmove.nextx-12)/32)]!=0){
  73.                     tankmove.nextx=tankmove.x;
  74.                     tankmove.nexty=tankmove.y;
  75.                     return;
  76.                 }
  77.                 tankmove.tanknextshape+=1;
  78.                 if(tankmove.tanknextshape>8){
  79.                     tankmove.tanknextshape=1;
  80.                 }
  81.                 return;
  82.             }
  83.             //右
  84.             if(keyPressList[39]==true){
  85.                 if(gameover){
  86.  
  87.                     return;
  88.                 }
  89.                 space();
  90.                 tankmove.tankAngle=90;
  91.                 tankmove.nextx+=tankmove.tankspeed;
  92.                 tankmove.tankshape=tankmove.tanknextshape;
  93.                 if(scene[Math.ceil((tankmove.nexty-20)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0||scene[Math.floor((tankmove.nexty-12)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0){
  94.                     tankmove.nextx=tankmove.x;
  95.                     tankmove.nexty=tankmove.y;
  96.                     return;
  97.                 }
  98.                 tankmove.tanknextshape+=1;
  99.                 if(tankmove.tanknextshape>8){
  100.                     tankmove.tanknextshape=1;
  101.                 }
  102.                 return;
  103.             }
  104.             //上
  105.             if(keyPressList[38]==true){
  106.                 if(gameover){
  107.  
  108.                     return;
  109.                 }
  110.                 space();
  111.                 tankmove.tankAngle=0;
  112.                 tankmove.nexty-=tankmove.tankspeed;
  113.                 tankmove.tankshape=tankmove.tanknextshape;
  114.                 if(scene[Math.floor((tankmove.nexty-12)/32)][Math.floor((tankmove.nextx-12)/32)]!=0||scene[Math.floor((tankmove.nexty-12)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0){
  115.                     tankmove.nextx=tankmove.x;
  116.                     tankmove.nexty=tankmove.y;
  117.                     return;
  118.                 }
  119.                 tankmove.tanknextshape+=1;
  120.                 if(tankmove.tanknextshape>8){
  121.                     tankmove.tanknextshape=1;
  122.                 }
  123.                 return;
  124.             }
  125.             //下
  126.             if(keyPressList[40]==true){
  127.                 if(gameover){
  128.  
  129.                     return;
  130.                 }
  131.                 space();
  132.                 tankmove.tankAngle=180;
  133.                 tankmove.nexty+=tankmove.tankspeed;
  134.                 tankmove.tankshape=tankmove.tanknextshape;
  135.                 if(scene[Math.ceil((tankmove.nexty-20)/32)][Math.ceil((tankmove.nextx-20)/32)]!=0||scene[Math.ceil((tankmove.nexty-20)/32)][Math.floor((tankmove.nextx-12)/32)]!=0){
  136.                     tankmove.nextx=tankmove.x;
  137.                     tankmove.nexty=tankmove.y;
  138.                     return;
  139.                 }
  140.                 tankmove.tanknextshape+=1;
  141.                 if(tankmove.tanknextshape>8){
  142.                     tankmove.tanknextshape=1;
  143.                 }
  144.                 return;
  145.             }
  146.             space()
  147.             //空格，发射炮弹
  148.             function space(){
  149.                 if(keyPressList[32]==true){
  150.                     if(gameover){
  151.                         location.reload();
  152.                     }
  153.                     if(shell.shellflage){
  154.                         return;
  155.                     }
  156.                     if(tankmove.nextx<0){
  157.                         return;
  158.                     }
  159.                     else{
  160.                         shootSound.play();
  161.                         shell.shellflage=true;
  162.                         shell.nextx=tankmove.nextx;
  163.                         shell.nexty=tankmove.nexty;
  164.                         shell.shellAngle=tankmove.tankAngle;
  165.                         if(shellInterval){
  166.                             clearInterval(shellInterval);
  167.                             shellInterval=null;
  168.                         }
  169.                         shellInterval=setInterval(drawshell, 33);
  170.                     }
  171.                 }
  172.             }
  173.         }
  174.  
  175.         //坦克实施
  176.         function render(){
  177.             context.save();
  178.             context.setTransform(1,0,0,1,0,0)
  179.             var angleInRadians =tankmove.tankAngle * Math.PI / 180;
  180.             context.translate(tankmove.x+16, tankmove.y+16)
  181.             context.rotate(angleInRadians);
  182.             var tankshapeX=Math.floor(tankmove.tankshape%8)*32;
  183.             var tankshapeY=Math.floor(tankmove.tankshape/8)*32;
  184.             context.drawImage(tank, tankshapeX, tankshapeY,32,32,-16,-16,32,32);
  185.             context.restore();
  186.  
  187.             context.clearRect(496,16,138,352);
  188.             context.fillStyle = "#3cb371";
  189.             context.fillRect(496,16,138,352);
  190.             context.save();
  191.             context.fillStyle = "#000000";
  192.             context.font = "italic bold 23px serif";
  193.             context.fillText("关  卡:"+level+"", 500, 80);
  194.             context.fillText("敌  人:"+surplus+"", 500, 110);
  195.             context.fillText("生  命:"+life+"", 500, 140);
  196.             context.fillText("得  分:"+score+"", 500, 170);
  197.             context.fillText("最高分:"+record+"", 500, 200);
  198.             context.restore();
  199.  
  200.             context.save();
  201.             context.fillStyle = "#000000";
  202.             context.font = "normal bold 15px normal";
  203.             context.fillText("游戏说明: 玩家", 500, 270);
  204.             context.fillText("操控坦克进行战", 500, 290);
  205.             context.fillText("斗，击毁敌方得", 500, 310);
  206.             context.fillText("分，被击毁或相", 500, 330);
  207.             context.fillText("相撞减分。", 500, 350);
  208.             context.restore();
  209.  
  210.         }
  211.         //画炮弹
  212.         function drawshell(){
  213.             if(gameover){
  214.                 return;
  215.             }
  216.             shellupdate()
  217.             shellrender()
  218.             //炮弹发射数据更新
  219.             function shellupdate(){
  220.                 if(shell.shellAngle==0){
  221.                     shell.nexty-=shell.shellspeed;
  222.                     var i=scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)];
  223.                     scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i);
  224.                 }
  225.                 if(shell.shellAngle==90){
  226.                     shell.nextx+=shell.shellspeed;
  227.                     var i=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)];
  228.                     scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)]=hitwall(i);
  229.                 }
  230.                 if(shell.shellAngle==180){
  231.                     shell.nexty+=shell.shellspeed;
  232.                     var i=scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)];
  233.                     scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i);
  234.                 }
  235.                 if(shell.shellAngle==270){
  236.                     shell.nextx-=shell.shellspeed;
  237.                     var i=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)];
  238.                     scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)]=hitwall(i);
  239.                 }
  240.                 //检测炮弹是否撞墙
  241.                 function hitwall(i){
  242.                     switch(i){
  243.                         case 26:
  244.                             if(shellInterval){
  245.                                 clearInterval(shellInterval);
  246.                                 shellInterval=null;
  247.                             }
  248.                             setTimeout(function(){shell.shellflage=false},300);
  249.                             shell.nextx=-500;
  250.                             shell.nexty=-500;
  251.                             return 0;
  252.                             break
  253.  
  254.                         case 31:
  255.                             if(shellInterval){
  256.                                 clearInterval(shellInterval);
  257.                                 shellInterval=null;
  258.                             }
  259.                             setTimeout(function(){shell.shellflage=false},300);
  260.                             shell.nextx=-500;
  261.                             shell.nexty=-500;
  262.                             return i;
  263.                             break
  264.                         case 30:
  265.                             if(shellInterval){
  266.                                 clearInterval(shellInterval);
  267.                                 shellInterval=null;
  268.                             }
  269.                             setTimeout(function(){shell.shellflage=false},300);
  270.                             shell.nextx=-500;
  271.                             shell.nexty=-500;
  272.                             return i;
  273.                             break
  274.                         default:
  275.                             return 0;
  276.                     }
  277.                 }
  278.             }
  279.             //炮弹发射实施
  280.             function shellrender(){
  281.                 shell.x=shell.nextx;
  282.                 shell.y=shell.nexty;
  283.                 context.save();
  284.                 context.setTransform(1,0,0,1,0,0)
  285.                 var shellangleInRadians =shell.shellAngle * Math.PI / 180;
  286.                 context.translate(shell.x+16, shell.y+16)
  287.                 context.rotate(shellangleInRadians);
  288.                 var shellshapeX=Math.floor(shell.shellshape%8)*32;
  289.                 var shellshapeY=Math.floor(shell.shellshape/8)*32;
  290.                 context.drawImage(tank, shellshapeX, shellshapeY,32,32,-16,-16,32,32);
  291.                 context.restore();
  292.             }
  293.         }
  294.     }
  295.     //画敌军坦克
  296.     function drawenemy(){
  297.         if(gameover){
  298.             return;
  299.         }
  300.         for(var enemytanknum=0;enemytanknum<=2;enemytanknum++){
  301.             var enemytank=enemy[enemytanknum];
  302.             //enemyrmove.play();
  303.             enemyupdate();
  304.             enemyrender();
  305.         }
  306.         function enemyupdate(){
  307.             enemytank.shapenum=(0.1+enemytank.shapenum)%8+9;//减慢滚带的速度
  308.             enemytank.enemytankshape=Math.floor(enemytank.shapenum);
  309.             //下
  310.             if(enemytank.enemytankAngle==180){
  311.                 swerve()
  312.                 enemytank.nexty+=enemytank.enemytankspeed;
  313.                 if(scene[Math.ceil((enemytank.nexty-20)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0||scene[Math.ceil((enemytank.nexty-20)/32)][Math.floor((enemytank.nextx-12)/32)]!=0){
  314.                     enemyhitwall()
  315.                 }
  316.             }
  317.             //左
  318.             if(enemytank.enemytankAngle==270){
  319.                 swerve()
  320.                 enemytank.nextx-=enemytank.enemytankspeed;
  321.                 if(scene[Math.floor((enemytank.nexty-12)/32)][Math.floor((enemytank.nextx-12)/32)]!=0||scene[Math.ceil((enemytank.nexty-20)/32)][Math.floor((enemytank.nextx-12)/32)]!=0){
  322.                     enemyhitwall()
  323.                 }
  324.             }
  325.             //右
  326.             if(enemytank.enemytankAngle==90){
  327.                 swerve()
  328.                 enemytank.nextx+=enemytank.enemytankspeed;
  329.                 if(scene[Math.ceil((enemytank.nexty-20)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0||scene[Math.floor((enemytank.nexty-12)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0){
  330.                     enemyhitwall()
  331.                 }
  332.             }
  333.             //上
  334.             if(enemytank.enemytankAngle==0){
  335.                 swerve()
  336.                 enemytank.nexty-=enemytank.enemytankspeed;
  337.                 if(scene[Math.floor((enemytank.nexty-12)/32)][Math.floor((enemytank.nextx-12)/32)]!=0||scene[Math.floor((enemytank.nexty-12)/32)][Math.ceil((enemytank.nextx-20)/32)]!=0){
  338.                     enemyhitwall()
  339.                 }
  340.             }
  341.             //随机发射炮弹
  342.             var enemyfire=Math.floor(Math.random() * 100);
  343.             if(enemyfire==0){
  344.                 if(enemyshell.shellflage){
  345.                     return;
  346.                 }
  347.                 if(enemytank.nextx<0){
  348.                     return;
  349.                 }
  350.                 else{
  351.                     enemyshell.shellflage=true;
  352.                     enemyshell.nextx=enemytank.nextx;
  353.                     enemyshell.nexty=enemytank.nexty;
  354.                     enemyshell.shellAngle=enemytank.enemytankAngle;
  355.                     if(enemyshellInterval){
  356.                         clearInterval(enemyshellInterval);
  357.                         enemyshellInterval=null;
  358.                     }
  359.                     enemyshellInterval=setInterval(enemyrdrawshell, 33);
  360.                 }
  361.             }
  362.             //检测是否打击到目标
  363.             if(impact(shell,enemytank)){
  364.                 if(shellInterval){
  365.                     clearInterval(shellInterval);
  366.                     shellInterval=null;
  367.                 }
  368.                 score++;
  369.                 if(score>=record){
  370.                     record=score;
  371.                     localStorage.record=record;
  372.                 }
  373.                 if(score>=level*5){
  374.                     level++;
  375.                     if(level>=5){
  376.                         gameover=true;
  377.                         return
  378.                     }
  379.                     scene=scenenum[(level-1)%4];
  380.                     for(var enemynum=0;enemynum<=2;enemynum++){
  381.                     var tempx=48+enemynum*192;
  382.                     //敌军坦克
  383.                     tempenemytank={appearx:tempx,appeary:48,x:tempx,y:48,nextx:tempx,nexty:48,enemytankspeed:Speed+level*0.5,enemytankAngle:180,enemytankshape:0,shapenum:0};
  384.                     enemy[enemynum]=tempenemytank;
  385.                     }
  386.                     tankmove={appearx:240,appeary:304,x:240,y:304,nextx:240,nexty:304,tankAngle:Angle,tankspeed:Speed,tankshape:shape,tanknextshape:shape};
  387.                     enemyshell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+level*0.5+2,shellshape:21,shellAngle:Angle,shellflage:false};
  388.                     surplus=6;
  389.                 }
  390.                 surplus--;
  391.                 setTimeout(function(){shell.shellflage=false},300);
  392.                 explode(enemytank)
  393.                 enemytank.nextx=-500;
  394.                 shell.nextx=-500;
  395.                 shell.nexty=-500;
  396.             }
  397.             //检测是否打击到玩家
  398.             if(impact2(enemyshell,tankmove)){
  399.                 if(invincible){
  400.                     return;
  401.                 }
  402.                 if(enemyshellInterval){
  403.                     clearInterval(enemyshellInterval);
  404.                     enemyshellInterval=null;
  405.                 }
  406.                 life--;
  407.                 if(life<=0){
  408.                     gameover=true;
  409.                     return;
  410.                 }
  411.                 invincible=true;
  412.                 setTimeout(function(){invincible=false},2000)
  413.                 explode(tankmove)
  414.                 setTimeout(function(){enemyshell.shellflage=false},300);
  415.                 tankmove.nextx=-500;
  416.                 enemyshell.nextx=-500;
  417.                 enemyshell.nexty=-500;
  418.             }
  419.             //与敌人相撞
  420.             if(impact(enemytank,tankmove)){
  421.                 if(enemyshellInterval){
  422.                     clearInterval(enemyshellInterval);
  423.                     enemyshellInterval=null;
  424.                 }
  425.                 if(invincible){
  426.                     return;
  427.                 }
  428.                 invincible=true;
  429.                 setTimeout(function(){invincible=false},2000)
  430.                 life--;
  431.                 if(life<=0){
  432.                     gameover=true;
  433.                     return;
  434.                 }
  435.                 explode(tankmove)
  436.                 tankmove.nextx=-500;
  437.  
  438.             }
  439.             //自动转向
  440.             function swerve(){
  441.                 var j=Math.floor(Math.random() * 100);
  442.                 if(j==0){
  443.                     enemytank.enemytankAngle+=90;
  444.                 }
  445.                 if(j==1){
  446.                     enemytank.enemytankAngle-=90;
  447.                 }
  448.                 enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360;
  449.             }
  450.             //撞墙转向
  451.             function enemyhitwall(){
  452.                 enemytank.nextx=enemytank.x;
  453.                 enemytank.nexty=enemytank.y;
  454.                 var j=Math.floor(Math.random() * 2);
  455.                 if(j==0){
  456.                     enemytank.enemytankAngle+=90;
  457.                 }
  458.                 else{
  459.                     enemytank.enemytankAngle-=90;
  460.                 }
  461.                 enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360;
  462.             }
  463.         }
  464.         //敌军tank
  465.         function enemyrender(){
  466.             enemytank.x=enemytank.nextx;
  467.             enemytank.y=enemytank.nexty;
  468.             context.save();
  469.             context.setTransform(1,0,0,1,0,0)
  470.             var enemyangleInRadians =enemytank.enemytankAngle * Math.PI / 180;
  471.             context.translate(enemytank.x+16, enemytank.y+16)
  472.             context.rotate(enemyangleInRadians);
  473.             var enemyshapeX=Math.floor(enemytank.enemytankshape%8)*32;
  474.             var enemyshapeY=Math.floor(enemytank.enemytankshape/8)*32;
  475.             context.drawImage(tank, enemyshapeX, enemyshapeY,32,32,-16,-16,32,32);
  476.             context.restore();
  477.         }
  478.         //画炮弹
  479.         function enemyrdrawshell(){
  480.             if(gameover){
  481.                 return;
  482.             }
  483.             enemyrshellupdate()
  484.             enemyrshellrender()
  485.             //炮弹发射数据更新
  486.             function enemyrshellupdate(){
  487.                 if(enemyshell.shellAngle==0){
  488.                     enemyshell.nexty-=enemyshell.shellspeed;
  489.                     var i=scene[Math.floor((enemyshell.nexty-0)/32)][Math.floor((enemyshell.nextx)/32)];
  490.                     scene[Math.floor((enemyshell.nexty-0)/32)][Math.floor((enemyshell.nextx)/32)]=hitwall(i);
  491.                 }
  492.                 if(enemyshell.shellAngle==90){
  493.                     enemyshell.nextx+=enemyshell.shellspeed;
  494.                     var i=scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx+0)/32)];
  495.                     scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx+0)/32)]=hitwall(i);
  496.                 }
  497.                 if(enemyshell.shellAngle==180){
  498.                     enemyshell.nexty+=enemyshell.shellspeed;
  499.                     var i=scene[Math.floor((enemyshell.nexty+0)/32)][Math.floor((enemyshell.nextx)/32)];
  500.                     scene[Math.floor((enemyshell.nexty+0)/32)][Math.floor((enemyshell.nextx)/32)]=hitwall(i);
  501.                 }
  502.                 if(enemyshell.shellAngle==270){
  503.                     enemyshell.nextx-=enemyshell.shellspeed;
  504.                     var i=scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx-0)/32)];
  505.                     scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx-0)/32)]=hitwall(i);
  506.                 }
  507.                 //检测炮弹是否撞墙
  508.                 function hitwall(i){
  509.                     switch(i){
  510.                         case 26:
  511.                             if(enemyshellInterval){
  512.                                 clearInterval(enemyshellInterval);
  513.                                 enemyshellInterval=null;
  514.                             }
  515.                             setTimeout(function(){enemyshell.shellflage=false},300);
  516.                             enemyshell.nextx=-500;
  517.                             enemyshell.nexty=-500;
  518.                             return 0;
  519.                             break
  520.  
  521.                         case 31:
  522.                             if(enemyshellInterval){
  523.                                 clearInterval(enemyshellInterval);
  524.                                 enemyshellInterval=null;
  525.                             }
  526.                             setTimeout(function(){enemyshell.shellflage=false},300);
  527.                             enemyshell.nextx=-500;
  528.                             enemyshell.nexty=-500;
  529.                             return i;
  530.                             break
  531.                         case 30:
  532.                             if(enemyshellInterval){
  533.                                 clearInterval(enemyshellInterval);
  534.                                 enemyshellInterval=null;
  535.                             }
  536.                             setTimeout(function(){enemyshell.shellflage=false},300);
  537.                             enemyshell.nextx=-500;
  538.                             enemyshell.nexty=-500;
  539.                             return i;
  540.                             break
  541.                         default:
  542.                             return 0;
  543.                     }
  544.                 }
  545.             }
  546.             //炮弹发射实施
  547.             function enemyrshellrender(){
  548.                 enemyshell.x=enemyshell.nextx;
  549.                 enemyshell.y=enemyshell.nexty;
  550.                 context.save();
  551.                 context.setTransform(1,0,0,1,0,0)
  552.                 var shellangleInRadians =enemyshell.shellAngle * Math.PI / 180;
  553.                 context.translate(enemyshell.x+16, enemyshell.y+16)
  554.                 context.rotate(shellangleInRadians);
  555.                 var shellshapeX=Math.floor(enemyshell.shellshape%8)*32;
  556.                 var shellshapeY=Math.floor(enemyshell.shellshape/8)*32;
  557.                 context.drawImage(tank, shellshapeX, shellshapeY,32,32,-16,-16,32,32);
  558.                 context.restore();
  559.             }
  560.         }
  561.     }
  562.     //检测撞击
  563.     function impact(one,two){
  564.         var dx=one.nextx-two.nextx;
  565.         var dy=one.nexty-two.nexty;
  566.         var distance=Math.sqrt(dx*dx+dy*dy)
  567.         if(distance<=26){
  568.             return true;
  569.         }
  570.         else{
  571.             return false;
  572.         }
  573.     }
  574.     //检测撞击
  575.     function impact2(one,two){
  576.         var dx=one.nextx-two.nextx;
  577.         var dy=one.nexty-two.nexty;
  578.         var distance=Math.sqrt(dx*dx+dy*dy)
  579.         if(distance<=26){
  580.             return true;
  581.         }
  582.         else{
  583.             return false;
  584.         }
  585.     }
  586.     //爆炸
  587.     function explode(dietank){
  588.         explodeSound.play();
  589.         var x=dietank.x;
  590.         var y=dietank.y;
  591.         var times=0;
  592.         var dietankInterval=setInterval(function(){
  593.             drawdietank(17+Math.floor(times/10));
  594.             times++;
  595.             if(times>29){
  596.                 clearInterval(dietankInterval);
  597.                 setTimeout(function(){dietank.shellflage=false},300);
  598.                 if(dietank.appeary==48){
  599.                     if(surplus<=2){
  600.                         dietank.enemytankspeed=0;
  601.                         return;
  602.                     }
  603.                 }
  604.                 dietank.nextx=dietank.appearx;
  605.                 dietank.nexty=dietank.appeary;
  606.             }
  607.         },15)
  608.         function drawdietank(dietankshape){
  609.             context.save();
  610.             context.setTransform(1,0,0,1,0,0)
  611.             context.translate(x+16, y+16)
  612.             var dietankshapeX=Math.floor(dietankshape%8)*32;
  613.             var dietankshapeY=Math.floor(dietankshape/8)*32;
  614.             context.drawImage(tank, dietankshapeX, dietankshapeY,32,32,-16,-16,32,32);
  615.             context.restore();
  616.         }
  617.     }
  618.     var score=0;//分数
  619.     var level=1;//关卡
  620.     var surplus=5;//剩余敌人数量
  621.     var life=3;//生命
  622.     var invincible=false//无敌
  623.     var storage = window.localStorage;//"localStorage"HTML5存储数据
  624.     if(storage.length==0){
  625.         localStorage.record=0;
  626.     }
  627.     var record=localStorage.record;//最高分
  628.     var gameover=false;
  629.     var enemyInterval=null;//敌人timer
  630.     var tankInterval=null;//玩家timer
  631.     var Speed=3;//运动的速度
  632.     var Angle=0;//tank面向方向
  633.     var shape=1;//tank当前状态
  634.     //坦克数组
  635.     tankmove={appearx:240,appeary:304,x:240,y:304,nextx:240,nexty:304,tankAngle:Angle,tankspeed:Speed,tankshape:shape,tanknextshape:shape};
  636.     //炮弹数组
  637.     shell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+4,shellshape:20,shellAngle:Angle,shellflage:false};
  638.     //敌军数组
  639.     var enemy=new Array();
  640.     //敌军炮弹数组
  641.     var enemyshell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+2,shellshape:21,shellAngle:Angle,shellflage:false};
  642.     //场景数组
  643.     var scenenum=[[
  644.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
  645.     [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
  646.     [31, 0, 0, 0,26,26, 0, 0, 0,26,26, 0, 0, 0,31],
  647.     [31, 0, 0,26, 0, 0,26, 0,26, 0, 0,26, 0, 0,31],
  648.     [31, 0, 0,26, 0, 0, 0,26, 0, 0, 0,26, 0, 0,31],
  649.     [31,26, 0, 0,26, 0, 0, 0, 0, 0,26, 0, 0,26,31],
  650.     [31,26, 0, 0, 0,26, 0, 0, 0,26, 0, 0, 0,26,31],
  651.     [31,26, 0, 0, 0, 0,26, 0,26, 0, 0, 0, 0,26,31],
  652.     [31,26,26,26,26, 0, 0,26, 0, 0,26,26,26,26,31],
  653.     [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
  654.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
  655.     ],
  656.     [
  657.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
  658.     [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
  659.     [31, 0,26,26,26,26,0, 0,0,26,26, 26,26,0,31],
  660.     [31, 0, 0, 0, 0,26, 0, 0, 0, 26,0, 0, 0, 0,31],
  661.     [31,26,26,26, 26,26,26,26,26,26,26,26, 26,26,31],
  662.     [31, 0, 26, 0, 0, 0, 0,26, 0, 0, 0, 0, 26,0,31],
  663.     [31,26, 26,0,26,26,26,26,26,26,26, 0,26,26,31],
  664.     [31, 0, 0, 0, 0, 26,0, 0, 0,26, 0, 0, 0, 0,31],
  665.     [31,26,26,26,26, 0, 0,0,0,0, 26,26,26,26,31],
  666.     [31, 0, 0,26, 26, 0, 0, 0, 0, 0, 26,26, 0, 0,31],
  667.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
  668.     ],
  669.     [
  670.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
  671.     [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
  672.     [31, 0,26,26,26,26,26, 0,26,26,26,26,26, 0,31],
  673.     [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31],
  674.     [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31],
  675.     [31, 0,26, 0, 0, 0,26, 0,26,26,26,26,26, 0,31],
  676.     [31, 0,26, 0, 0, 0,26, 0, 0, 0, 0, 0,26, 0,31],
  677.     [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31],
  678.     [31, 0,26,26,26,26,26, 0,26,26,26,26,26, 0,31],
  679.     [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
  680.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
  681.     ],
  682.     [
  683.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30],
  684.     [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31],
  685.     [31, 0,26,26,26,26,26, 0,26,26,26, 0,26,26,31],
  686.     [31, 0, 0, 0, 0,26, 0, 0, 0, 0,26, 0, 0, 0,31],
  687.     [31,26,26,26, 0,26,26,26,26,26,26,26, 0,26,31],
  688.     [31, 0, 0, 0, 0, 0, 0,26, 0, 0, 0, 0, 0,26,31],
  689.     [31,26, 0,26,26,26,26,26,26,26,26, 0,26,26,31],
  690.     [31, 0, 0, 0, 0, 0,26, 0, 0,26, 0, 0, 0, 0,31],
  691.     [31,26,26,26,26, 0, 0,26,26,26, 0,26,26,26,31],
  692.     [31, 0, 0,26, 0, 0, 0, 0, 0, 0, 0,26, 0, 0,31],
  693.     [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30]
  694.     ]]
  695.     var scene=scenenum[(level-1)];
  696.     //计时器控制炮弹发出
  697.     var shellInterval=null;
  698.     var enemyshellInterval=null;
  699.     for(var enemynum=0;enemynum<=2;enemynum++){
  700.         var tempx=48+enemynum*192;
  701.     //敌军坦克
  702.     tempenemytank={appearx:tempx,appeary:48,x:tempx,y:48,nextx:tempx,nexty:48,enemytankspeed:Speed-1,enemytankAngle:180,enemytankshape:0,shapenum:0};
  703.     enemy[enemynum]=tempenemytank;
  704.     }
  705.     //键盘事件
  706.     var keyPressList=[];
  707.     document.onkeydown=function(e){
  708.         e=e?e:window.event;
  709.         keyPressList[e.keyCode]=true;
  710.     }
  711.     document.onkeyup=function(e){
  712.         e=e?e:window.event;
  713.         keyPressList[e.keyCode]=false;
  714.     }
  715.     //声音
  716.     //爆炸
  717.     var explodeSound = document.createElement("audio");
  718.     document.body.appendChild(explodeSound);
  719.     explodeSound.setAttribute("src", "explode1.mp3");
  720.     explodeSound.valume=.5;
  721.     //发射子弹
  722.     var shootSound = document.createElement("audio");
  723.     document.body.appendChild(shootSound);
  724.     shootSound.setAttribute("src", "shoot1.mp3");
  725.     shootSound.volume=.5;
  726.     //玩家行走
  727.     var playermove = document.createElement("audio");
  728.     document.body.appendChild(playermove);
  729.     playermove.setAttribute("src", "move1.mp3");
  730.     playermove.valume=.001;
  731.     //敌人行走
  732.     var enemyrmove = document.createElement("audio");
  733.     document.body.appendChild(enemyrmove);
  734.     enemyrmove.setAttribute("src", "move2.mp3");
  735.     enemyrmove.valume=.001;
  736.     //游戏开始
  737.  
  738.     //游戏失败
  739.  
  740.     //开始游戏
  741.     function start(){
  742.         tankInterval=setInterval(drawtank, 33);
  743.         enemyInterval=setInterval(drawenemy, 33);
  744.     }
  745.     //debug函数
  746.     var debug = function(log){
  747.         try{
  748.             console.log(log);//safari可用
  749.         }
  750.         catch(e){}
  751.     }
  752. }
  753. function supportedAudioFormat(audio) {
  754.     var returnExtension = "";
  755.     if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") {
  756.         returnExtension = "ogg";
  757.     } else if(audio.canPlayType("audio/wav") =="probably" || audio.canPlayType("audio/wav") == "maybe") {
  758.         returnExtension = "wav";
  759.     } else if(audio.canPlayType("audio/mp3") == "probably" || audio.canPlayType("audio/mp3") == "maybe") {
  760.         returnExtension = "mp3";
  761.     }
  762.  
  763.     return returnExtension;
  764.  
  765. }

via：http://www.w2bc.com/Article/25537

基于HTML5坦克大战游戏简化版的更多相关文章

  1. 小强的HTML5移动开发之路（7）——坦克大战游戏1

    来自:http://blog.csdn.net/dawanganban/article/details/17693145 上一篇中我们介绍了关于Canvas的基础知识,用Canvas绘制各种图形和图片 ...

  2. 小强的HTML5移动开发之路（8）——坦克大战游戏2

    来自:http://blog.csdn.net/cai_xingyun/article/details/48629015 在上一篇文章中我们已经画出了自己的坦克,并且可以控制自己的坦克移动,我们继续接 ...

  3. 3D坦克大战游戏源码

    3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...

  4. 3D坦克大战游戏iOS源码

    3D坦克大战游戏源码,该游戏是基于xcode 4.3,ios sdk 5.1开发.在xcode4.3.3上完美无报错.兼容ios4.3-ios6.0 ,一款ios平台上难得的3D坦克大战游戏源码,有2 ...

  5. 基于HTML5的SLG游戏开发(序）

          2012年前后,HTML5游戏凭借跨平台.易移植.部署简单.节省成本等优点被炒的火热,经过一两年的快速发展,市场出现了一些成功地HTML5游戏产品,像磊友的<修仙三国>,神奇时 ...

  6. HTML5坦克大战（韩顺平版本）

    HTML5坦克大战(韩顺平版本) 2017-3-22 22:46:22 by SemiconductorKING 去年暑假学习了一下HTML5实现简单的坦克大战,觉得对JavaScript初学者来说, ...

  7. cocos2d-x游戏开发系列教程-坦克大战游戏启动界面的编写

    用前面介绍的方法,创建一个cocos2d-x项目,可以看到新项目内容如下图:

  8. HTML5坦克大战1

    在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...

  9. HTML5坦克大战

    在JavaScript中,不要在变量为定义之前去使用,这样很难察觉并且无法运行. 颜色不对. 当我的坦克移动时,敌人坦克消失. tankGame3.html <!DOCTYPE html> ...

随机推荐

  1. JavaScript 你不知道的事 -- 关于函数

    接上篇Javascript 你不知道的事,直接条列了: 每个函数创建时默认带有一个prototype属性,其中包含一个constructor属性,和一个指向Object对象的隐藏属性__proto__ ...

  2. MySQL for Mac安装和启动

    MySQL for Mac安装和启动 学习了:https://blog.csdn.net/a380880304/article/details/49840139 注意密码是数字1还是字母l: 系统提示 ...

  3. 转： SVN使用教程总结(图文丰富，相当详细)

    转自:http://www.cnblogs.com/armyfai/p/3985660.html SVN使用教程总结   SVN简介: 为什么要使用SVN? 程序员在编写程序的过程中,每个程序员都会生 ...

  4. 使用libsvm对MNIST数据集进行实验---浅显易懂！

    原文:http://blog.csdn.net/arthur503/article/details/19974057 在学SVM中的实验环节,老师介绍了libsvm的使用.当时看完之后感觉简单的说不出 ...

  5. SVG报错error on line 39 at column 26: Namespace prefix xlink for href on script is not defined

    转自:http://stackoverflow.com/questions/3561270/error-on-line-39-at-column-26-namespace-prefix-xlink-f ...

  6. 使用ionic中的侧边栏以及angularjs中广播的使用

    接着之前的ionic的例子 查看例子:我的第一段ionic代码 demo3.html(黄底内容为增加或修改的内容) <!DOCTYPE html> <html ng-app=&quo ...

  7. 右键菜单 GenericMenu

    http://www.cnblogs.com/zhaoqingqing/p/3799294.html 自定义窗口中使用右键菜单: // This example shows how to create ...

  8. 桥(Bridge)模式

    Bridge定义:将抽象和行为划分开来,各自独立,但能动态的结合. 为什么使用桥模式 通常,当一个抽象类或接口有多个具体实现(concrete subclass),这些concrete之间关系可能有以 ...

  9. Jquery重新学习之二[属性attr(),removeAttr(),prop(),removeProp()]

    1:属性.attr(name|pro|key,val|key,fn)与removeAttr(name) 1.1 .attr(name) 参数name为属性名称 <a id="my_hr ...

  10. Appium环境的安装与配置，Python测试脚本测试

    Appium自动化测试系列1 - Appium环境的安装与配置 发表于4个月前(2015-01-27 14:34)   阅读(803) | 评论(0) 0人收藏此文章, 我要收藏 赞0 寻找 会’偷懒 ...