| HTML5坦克大战游戏简化版 | 您所在的位置：网站首页 › 炮弹shell › HTML5坦克大战游戏简化版 |
HTML5坦克大战游戏简化版
|
本文作者html5tricks，转载请注明出处 之前我们有分享过不少经典的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;i8){ 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=5){ gameover=true; return } scene=scenenum[(level-1)%4]; for(var enemynum=0;enemynum |
【本文地址】
公司简介
联系我们