HTML5坦克大战游戏简化版
jopen
9年前
之前我们有分享过不少经典的HTML5游戏，有些还是很有意思的，比如HTML5版切水果游戏和HTML5中国象棋游戏。今天要分享的是一款简化版的HTML5坦克大战游戏，方向键控制坦克的行进方向，空格键发射子弹，命中敌方坦克后也会发出声音，效果还算可以。
JavaScript代码：
window.addEventListener("load", canvasApp, false); //是否支持canvas function canvasSupport () { return Modernizr.canvas; } function canvasApp() { //是否支持canvas if (!canvasSupport()) { return; } var theCanvas = document.getElementById("canvasOne"); var context = theCanvas.getContext("2d"); var tank=new Image(); tank.addEventListener('load', start, false); tank.src="tanks_sheet.png" //Background context.fillStyle = "#CCCCCC"; context.fillRect(0, 0, theCanvas.width, theCanvas.height); //Box context.lineWidth=16; context.strokeStyle = "#000000"; context.strokeRect(8,8, theCanvas.width-16, theCanvas.height-16); //画我方tank和我方炮弹 function drawtank() { if(gameover){ context.save(); context.fillStyle = "#000000"; context.font = "normal bold 50px normal"; context.fillText("游戏结束", 150, 150); context.restore(); context.save(); context.fillStyle = "#000000"; context.font = "normal bold 25px normal"; context.fillText("按空格键重新开始游戏", 125, 200); context.restore(); update(); return; } update(); drawScene(); render(); //画场景 function drawScene(){ for(var i=0;i<=10;i++){ for(var j=0;j<=14;j++){ colCtr=j*32+16; rowCtr=i*32+16; context.save(); sourceX=Math.floor(scene[i][j]%8)*32; sourceY=Math.floor(scene[i][j]/8)*32; context.drawImage(tank, sourceX,sourceY,32,32,colCtr,rowCtr,32,32); context.restore(); } } } //坦克更新数据 function update(){ tankmove.x=tankmove.nextx; tankmove.y=tankmove.nexty; //左 if(keyPressList[37]==true){ //playermove.play(); //playermove.stop(); if(gameover){ return; } space(); tankmove.tankAngle=270; tankmove.nextx-=tankmove.tankspeed; tankmove.tankshape=tankmove.tanknextshape; 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){ tankmove.nextx=tankmove.x; tankmove.nexty=tankmove.y; return; } tankmove.tanknextshape+=1; if(tankmove.tanknextshape>8){ tankmove.tanknextshape=1; } return; } //右 if(keyPressList[39]==true){ if(gameover){ return; } space(); tankmove.tankAngle=90; tankmove.nextx+=tankmove.tankspeed; tankmove.tankshape=tankmove.tanknextshape; 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){ tankmove.nextx=tankmove.x; tankmove.nexty=tankmove.y; return; } tankmove.tanknextshape+=1; if(tankmove.tanknextshape>8){ tankmove.tanknextshape=1; } return; } //上 if(keyPressList[38]==true){ if(gameover){ return; } space(); tankmove.tankAngle=0; tankmove.nexty-=tankmove.tankspeed; tankmove.tankshape=tankmove.tanknextshape; 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){ tankmove.nextx=tankmove.x; tankmove.nexty=tankmove.y; return; } tankmove.tanknextshape+=1; if(tankmove.tanknextshape>8){ tankmove.tanknextshape=1; } return; } //下 if(keyPressList[40]==true){ if(gameover){ return; } space(); tankmove.tankAngle=180; tankmove.nexty+=tankmove.tankspeed; tankmove.tankshape=tankmove.tanknextshape; 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){ tankmove.nextx=tankmove.x; tankmove.nexty=tankmove.y; return; } tankmove.tanknextshape+=1; if(tankmove.tanknextshape>8){ tankmove.tanknextshape=1; } return; } space() //空格，发射炮弹 function space(){ if(keyPressList[32]==true){ if(gameover){ location.reload(); } if(shell.shellflage){ return; } if(tankmove.nextx<0){ return; } else{ shootSound.play(); shell.shellflage=true; shell.nextx=tankmove.nextx; shell.nexty=tankmove.nexty; shell.shellAngle=tankmove.tankAngle; if(shellInterval){ clearInterval(shellInterval); shellInterval=null; } shellInterval=setInterval(drawshell, 33); } } } } //坦克实施 function render(){ context.save(); context.setTransform(1,0,0,1,0,0) var angleInRadians =tankmove.tankAngle * Math.PI / 180; context.translate(tankmove.x+16, tankmove.y+16) context.rotate(angleInRadians); var tankshapeX=Math.floor(tankmove.tankshape%8)*32; var tankshapeY=Math.floor(tankmove.tankshape/8)*32; context.drawImage(tank, tankshapeX, tankshapeY,32,32,-16,-16,32,32); context.restore(); context.clearRect(496,16,138,352); context.fillStyle = "#3cb371"; context.fillRect(496,16,138,352); context.save(); context.fillStyle = "#000000"; context.font = "italic bold 23px serif"; context.fillText("关 卡:"+level+"", 500, 80); context.fillText("敌 人:"+surplus+"", 500, 110); context.fillText("生 命:"+life+"", 500, 140); context.fillText("得 分:"+score+"", 500, 170); context.fillText("最高分:"+record+"", 500, 200); context.restore(); context.save(); context.fillStyle = "#000000"; context.font = "normal bold 15px normal"; context.fillText("游戏说明: 玩家", 500, 270); context.fillText("操控坦克进行战", 500, 290); context.fillText("斗，击毁敌方得", 500, 310); context.fillText("分，被击毁或相", 500, 330); context.fillText("相撞减分。", 500, 350); context.restore(); } //画炮弹 function drawshell(){ if(gameover){ return; } shellupdate() shellrender() //炮弹发射数据更新 function shellupdate(){ if(shell.shellAngle==0){ shell.nexty-=shell.shellspeed; var i=scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)]; scene[Math.floor((shell.nexty-12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i); } if(shell.shellAngle==90){ shell.nextx+=shell.shellspeed; var i=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)]; scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx+12)/32)]=hitwall(i); } if(shell.shellAngle==180){ shell.nexty+=shell.shellspeed; var i=scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)]; scene[Math.floor((shell.nexty+12)/32)][Math.floor((shell.nextx)/32)]=hitwall(i); } if(shell.shellAngle==270){ shell.nextx-=shell.shellspeed; var i=scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)]; scene[Math.floor((shell.nexty)/32)][Math.floor((shell.nextx-12)/32)]=hitwall(i); } //检测炮弹是否撞墙 function hitwall(i){ switch(i){ case 26: if(shellInterval){ clearInterval(shellInterval); shellInterval=null; } setTimeout(function(){shell.shellflage=false},300); shell.nextx=-500; shell.nexty=-500; return 0; break case 31: if(shellInterval){ clearInterval(shellInterval); shellInterval=null; } setTimeout(function(){shell.shellflage=false},300); shell.nextx=-500; shell.nexty=-500; return i; break case 30: if(shellInterval){ clearInterval(shellInterval); shellInterval=null; } setTimeout(function(){shell.shellflage=false},300); shell.nextx=-500; shell.nexty=-500; return i; break default: return 0; } } } //炮弹发射实施 function shellrender(){ shell.x=shell.nextx; shell.y=shell.nexty; context.save(); context.setTransform(1,0,0,1,0,0) var shellangleInRadians =shell.shellAngle * Math.PI / 180; context.translate(shell.x+16, shell.y+16) context.rotate(shellangleInRadians); var shellshapeX=Math.floor(shell.shellshape%8)*32; var shellshapeY=Math.floor(shell.shellshape/8)*32; context.drawImage(tank, shellshapeX, shellshapeY,32,32,-16,-16,32,32); context.restore(); } } } //画敌军坦克 function drawenemy(){ if(gameover){ return; } for(var enemytanknum=0;enemytanknum<=2;enemytanknum++){ var enemytank=enemy[enemytanknum]; //enemyrmove.play(); enemyupdate(); enemyrender(); } function enemyupdate(){ enemytank.shapenum=(0.1+enemytank.shapenum)%8+9;//减慢滚带的速度 enemytank.enemytankshape=Math.floor(enemytank.shapenum); //下 if(enemytank.enemytankAngle==180){ swerve() enemytank.nexty+=enemytank.enemytankspeed; 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){ enemyhitwall() } } //左 if(enemytank.enemytankAngle==270){ swerve() enemytank.nextx-=enemytank.enemytankspeed; 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){ enemyhitwall() } } //右 if(enemytank.enemytankAngle==90){ swerve() enemytank.nextx+=enemytank.enemytankspeed; 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){ enemyhitwall() } } //上 if(enemytank.enemytankAngle==0){ swerve() enemytank.nexty-=enemytank.enemytankspeed; 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){ enemyhitwall() } } //随机发射炮弹 var enemyfire=Math.floor(Math.random() * 100); if(enemyfire==0){ if(enemyshell.shellflage){ return; } if(enemytank.nextx<0){ return; } else{ enemyshell.shellflage=true; enemyshell.nextx=enemytank.nextx; enemyshell.nexty=enemytank.nexty; enemyshell.shellAngle=enemytank.enemytankAngle; if(enemyshellInterval){ clearInterval(enemyshellInterval); enemyshellInterval=null; } enemyshellInterval=setInterval(enemyrdrawshell, 33); } } //检测是否打击到目标 if(impact(shell,enemytank)){ if(shellInterval){ clearInterval(shellInterval); shellInterval=null; } score++; if(score>=record){ record=score; localStorage.record=record; } if(score>=level*5){ level++; if(level>=5){ gameover=true; return } scene=scenenum[(level-1)%4]; for(var enemynum=0;enemynum<=2;enemynum++){ var tempx=48+enemynum*192; //敌军坦克 tempenemytank={appearx:tempx,appeary:48,x:tempx,y:48,nextx:tempx,nexty:48,enemytankspeed:Speed+level*0.5,enemytankAngle:180,enemytankshape:0,shapenum:0}; enemy[enemynum]=tempenemytank; } tankmove={appearx:240,appeary:304,x:240,y:304,nextx:240,nexty:304,tankAngle:Angle,tankspeed:Speed,tankshape:shape,tanknextshape:shape}; enemyshell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+level*0.5+2,shellshape:21,shellAngle:Angle,shellflage:false}; surplus=6; } surplus--; setTimeout(function(){shell.shellflage=false},300); explode(enemytank) enemytank.nextx=-500; shell.nextx=-500; shell.nexty=-500; } //检测是否打击到玩家 if(impact2(enemyshell,tankmove)){ if(invincible){ return; } if(enemyshellInterval){ clearInterval(enemyshellInterval); enemyshellInterval=null; } life--; if(life<=0){ gameover=true; return; } invincible=true; setTimeout(function(){invincible=false},2000) explode(tankmove) setTimeout(function(){enemyshell.shellflage=false},300); tankmove.nextx=-500; enemyshell.nextx=-500; enemyshell.nexty=-500; } //与敌人相撞 if(impact(enemytank,tankmove)){ if(enemyshellInterval){ clearInterval(enemyshellInterval); enemyshellInterval=null; } if(invincible){ return; } invincible=true; setTimeout(function(){invincible=false},2000) life--; if(life<=0){ gameover=true; return; } explode(tankmove) tankmove.nextx=-500; } //自动转向 function swerve(){ var j=Math.floor(Math.random() * 100); if(j==0){ enemytank.enemytankAngle+=90; } if(j==1){ enemytank.enemytankAngle-=90; } enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360; } //撞墙转向 function enemyhitwall(){ enemytank.nextx=enemytank.x; enemytank.nexty=enemytank.y; var j=Math.floor(Math.random() * 2); if(j==0){ enemytank.enemytankAngle+=90; } else{ enemytank.enemytankAngle-=90; } enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360; } } //敌军tank function enemyrender(){ enemytank.x=enemytank.nextx; enemytank.y=enemytank.nexty; context.save(); context.setTransform(1,0,0,1,0,0) var enemyangleInRadians =enemytank.enemytankAngle * Math.PI / 180; context.translate(enemytank.x+16, enemytank.y+16) context.rotate(enemyangleInRadians); var enemyshapeX=Math.floor(enemytank.enemytankshape%8)*32; var enemyshapeY=Math.floor(enemytank.enemytankshape/8)*32; context.drawImage(tank, enemyshapeX, enemyshapeY,32,32,-16,-16,32,32); context.restore(); } //画炮弹 function enemyrdrawshell(){ if(gameover){ return; } enemyrshellupdate() enemyrshellrender() //炮弹发射数据更新 function enemyrshellupdate(){ if(enemyshell.shellAngle==0){ enemyshell.nexty-=enemyshell.shellspeed; var i=scene[Math.floor((enemyshell.nexty-0)/32)][Math.floor((enemyshell.nextx)/32)]; scene[Math.floor((enemyshell.nexty-0)/32)][Math.floor((enemyshell.nextx)/32)]=hitwall(i); } if(enemyshell.shellAngle==90){ enemyshell.nextx+=enemyshell.shellspeed; var i=scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx+0)/32)]; scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx+0)/32)]=hitwall(i); } if(enemyshell.shellAngle==180){ enemyshell.nexty+=enemyshell.shellspeed; var i=scene[Math.floor((enemyshell.nexty+0)/32)][Math.floor((enemyshell.nextx)/32)]; scene[Math.floor((enemyshell.nexty+0)/32)][Math.floor((enemyshell.nextx)/32)]=hitwall(i); } if(enemyshell.shellAngle==270){ enemyshell.nextx-=enemyshell.shellspeed; var i=scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx-0)/32)]; scene[Math.floor((enemyshell.nexty)/32)][Math.floor((enemyshell.nextx-0)/32)]=hitwall(i); } //检测炮弹是否撞墙 function hitwall(i){ switch(i){ case 26: if(enemyshellInterval){ clearInterval(enemyshellInterval); enemyshellInterval=null; } setTimeout(function(){enemyshell.shellflage=false},300); enemyshell.nextx=-500; enemyshell.nexty=-500; return 0; break case 31: if(enemyshellInterval){ clearInterval(enemyshellInterval); enemyshellInterval=null; } setTimeout(function(){enemyshell.shellflage=false},300); enemyshell.nextx=-500; enemyshell.nexty=-500; return i; break case 30: if(enemyshellInterval){ clearInterval(enemyshellInterval); enemyshellInterval=null; } setTimeout(function(){enemyshell.shellflage=false},300); enemyshell.nextx=-500; enemyshell.nexty=-500; return i; break default: return 0; } } } //炮弹发射实施 function enemyrshellrender(){ enemyshell.x=enemyshell.nextx; enemyshell.y=enemyshell.nexty; context.save(); context.setTransform(1,0,0,1,0,0) var shellangleInRadians =enemyshell.shellAngle * Math.PI / 180; context.translate(enemyshell.x+16, enemyshell.y+16) context.rotate(shellangleInRadians); var shellshapeX=Math.floor(enemyshell.shellshape%8)*32; var shellshapeY=Math.floor(enemyshell.shellshape/8)*32; context.drawImage(tank, shellshapeX, shellshapeY,32,32,-16,-16,32,32); context.restore(); } } } //检测撞击 function impact(one,two){ var dx=one.nextx-two.nextx; var dy=one.nexty-two.nexty; var distance=Math.sqrt(dx*dx+dy*dy) if(distance<=26){ return true; } else{ return false; } } //检测撞击 function impact2(one,two){ var dx=one.nextx-two.nextx; var dy=one.nexty-two.nexty; var distance=Math.sqrt(dx*dx+dy*dy) if(distance<=26){ return true; } else{ return false; } } //爆炸 function explode(dietank){ explodeSound.play(); var x=dietank.x; var y=dietank.y; var times=0; var dietankInterval=setInterval(function(){ drawdietank(17+Math.floor(times/10)); times++; if(times>29){ clearInterval(dietankInterval); setTimeout(function(){dietank.shellflage=false},300); if(dietank.appeary==48){ if(surplus<=2){ dietank.enemytankspeed=0; return; } } dietank.nextx=dietank.appearx; dietank.nexty=dietank.appeary; } },15) function drawdietank(dietankshape){ context.save(); context.setTransform(1,0,0,1,0,0) context.translate(x+16, y+16) var dietankshapeX=Math.floor(dietankshape%8)*32; var dietankshapeY=Math.floor(dietankshape/8)*32; context.drawImage(tank, dietankshapeX, dietankshapeY,32,32,-16,-16,32,32); context.restore(); } } var score=0;//分数 var level=1;//关卡 var surplus=5;//剩余敌人数量 var life=3;//生命 var invincible=false//无敌 var storage = window.localStorage;//"localStorage"HTML5存储数据 if(storage.length==0){ localStorage.record=0; } var record=localStorage.record;//最高分 var gameover=false; var enemyInterval=null;//敌人timer var tankInterval=null;//玩家timer var Speed=3;//运动的速度 var Angle=0;//tank面向方向 var shape=1;//tank当前状态 //坦克数组 tankmove={appearx:240,appeary:304,x:240,y:304,nextx:240,nexty:304,tankAngle:Angle,tankspeed:Speed,tankshape:shape,tanknextshape:shape}; //炮弹数组 shell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+4,shellshape:20,shellAngle:Angle,shellflage:false}; //敌军数组 var enemy=new Array(); //敌军炮弹数组 var enemyshell={x:0,y:0,nextx:0,nexty:0,shellspeed:Speed+2,shellshape:21,shellAngle:Angle,shellflage:false}; //场景数组 var scenenum=[[ [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30], [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31], [31, 0, 0, 0,26,26, 0, 0, 0,26,26, 0, 0, 0,31], [31, 0, 0,26, 0, 0,26, 0,26, 0, 0,26, 0, 0,31], [31, 0, 0,26, 0, 0, 0,26, 0, 0, 0,26, 0, 0,31], [31,26, 0, 0,26, 0, 0, 0, 0, 0,26, 0, 0,26,31], [31,26, 0, 0, 0,26, 0, 0, 0,26, 0, 0, 0,26,31], [31,26, 0, 0, 0, 0,26, 0,26, 0, 0, 0, 0,26,31], [31,26,26,26,26, 0, 0,26, 0, 0,26,26,26,26,31], [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31], [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30] ], [ [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30], [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31], [31, 0,26,26,26,26,0, 0,0,26,26, 26,26,0,31], [31, 0, 0, 0, 0,26, 0, 0, 0, 26,0, 0, 0, 0,31], [31,26,26,26, 26,26,26,26,26,26,26,26, 26,26,31], [31, 0, 26, 0, 0, 0, 0,26, 0, 0, 0, 0, 26,0,31], [31,26, 26,0,26,26,26,26,26,26,26, 0,26,26,31], [31, 0, 0, 0, 0, 26,0, 0, 0,26, 0, 0, 0, 0,31], [31,26,26,26,26, 0, 0,0,0,0, 26,26,26,26,31], [31, 0, 0,26, 26, 0, 0, 0, 0, 0, 26,26, 0, 0,31], [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30] ], [ [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30], [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31], [31, 0,26,26,26,26,26, 0,26,26,26,26,26, 0,31], [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31], [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31], [31, 0,26, 0, 0, 0,26, 0,26,26,26,26,26, 0,31], [31, 0,26, 0, 0, 0,26, 0, 0, 0, 0, 0,26, 0,31], [31, 0,26, 0, 0, 0,26, 0,26, 0, 0, 0,26, 0,31], [31, 0,26,26,26,26,26, 0,26,26,26,26,26, 0,31], [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31], [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30] ], [ [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30], [31, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,31], [31, 0,26,26,26,26,26, 0,26,26,26, 0,26,26,31], [31, 0, 0, 0, 0,26, 0, 0, 0, 0,26, 0, 0, 0,31], [31,26,26,26, 0,26,26,26,26,26,26,26, 0,26,31], [31, 0, 0, 0, 0, 0, 0,26, 0, 0, 0, 0, 0,26,31], [31,26, 0,26,26,26,26,26,26,26,26, 0,26,26,31], [31, 0, 0, 0, 0, 0,26, 0, 0,26, 0, 0, 0, 0,31], [31,26,26,26,26, 0, 0,26,26,26, 0,26,26,26,31], [31, 0, 0,26, 0, 0, 0, 0, 0, 0, 0,26, 0, 0,31], [30,30,30,30,30,30,30,30,30,30,30,30,30,30,30] ]] var scene=scenenum[(level-1)]; //计时器控制炮弹发出 var shellInterval=null; var enemyshellInterval=null; for(var enemynum=0;enemynum<=2;enemynum++){ var tempx=48+enemynum*192; //敌军坦克 tempenemytank={appearx:tempx,appeary:48,x:tempx,y:48,nextx:tempx,nexty:48,enemytankspeed:Speed-1,enemytankAngle:180,enemytankshape:0,shapenum:0}; enemy[enemynum]=tempenemytank; } //键盘事件 var keyPressList=[]; document.onkeydown=function(e){ e=e?e:window.event; keyPressList[e.keyCode]=true; } document.onkeyup=function(e){ e=e?e:window.event; keyPressList[e.keyCode]=false; } //声音 //爆炸 var explodeSound = document.createElement("audio"); document.body.appendChild(explodeSound); explodeSound.setAttribute("src", "explode1.mp3"); explodeSound.valume=.5; //发射子弹 var shootSound = document.createElement("audio"); document.body.appendChild(shootSound); shootSound.setAttribute("src", "shoot1.mp3"); shootSound.volume=.5; //玩家行走 var playermove = document.createElement("audio"); document.body.appendChild(playermove); playermove.setAttribute("src", "move1.mp3"); playermove.valume=.001; //敌人行走 var enemyrmove = document.createElement("audio"); document.body.appendChild(enemyrmove); enemyrmove.setAttribute("src", "move2.mp3"); enemyrmove.valume=.001; //游戏开始 //游戏失败 //开始游戏 function start(){ tankInterval=setInterval(drawtank, 33); enemyInterval=setInterval(drawenemy, 33); } //debug函数 var debug = function(log){ try{ console.log(log);//safari可用 } catch(e){} } } function supportedAudioFormat(audio) { var returnExtension = ""; if (audio.canPlayType("audio/ogg") =="probably" || audio.canPlayType("audio/ogg") == "maybe") { returnExtension = "ogg"; } else if(audio.canPlayType("audio/wav") =="probably" || audio.canPlayType("audio/wav") == "maybe") { returnExtension = "wav"; } else if(audio.canPlayType("audio/mp3") == "probably" || audio.canPlayType("audio/mp3") == "maybe") { returnExtension = "mp3"; } return returnExtension; }