基于html5的单机游戏

《基于html5的单机游戏》由会员分享，可在线阅读，更多相关《基于html5的单机游戏（20页珍藏版）》请在装配图网上搜索。

1、Index.htmlCH3EX1: Text Arranger Version 1.0Your browser does not support the HTML 5 Canvas. Main.jswindow.addEventListener(load, canvasApp, false);/是否支持canvasfunction canvasSupport () return Modernizr.canvas;function canvasApp() /是否支持canvasif (!canvasSupport() return; var theCanvas = document.getEle

2、mentById(canvasOne);var context = theCanvas.getContext(2d);var tank=new Image();tank.addEventListener(load, start, false);tank.src=tanks_sheet.png/Backgroundcontext.fillStyle = #CCCCCC;context.fillRect(0, 0, theCanvas.width, theCanvas.height);/Boxcontext.lineWidth=16;context.strokeStyle = #000000; c

3、ontext.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 =

4、 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;j8)tankmove.tanknextshape=1;return;/右if(keyPressList39=true)if(gameover)return;space();tankmove.tankAngle=90;tank

5、move.nextx+=tankmove.tankspeed;tankmove.tankshape=tankmove.tanknextshape;if(sceneMath.ceil(tankmove.nexty-20)/32)Math.ceil(tankmove.nextx-20)/32)!=0|sceneMath.floor(tankmove.nexty-12)/32)Math.ceil(tankmove.nextx-20)/32)!=0)tankmove.nextx=tankmove.x;tankmove.nexty=tankmove.y;return;tankmove.tanknexts

6、hape+=1;if(tankmove.tanknextshape8)tankmove.tanknextshape=1;return;/上if(keyPressList38=true)if(gameover)return;space();tankmove.tankAngle=0;tankmove.nexty-=tankmove.tankspeed;tankmove.tankshape=tankmove.tanknextshape;if(sceneMath.floor(tankmove.nexty-12)/32)Math.floor(tankmove.nextx-12)/32)!=0|scene

7、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.tanknextshape8)tankmove.tanknextshape=1;return;/下if(keyPressList40=true)if(gameover)return;space();tankmove.tankAngle=180;tankmove.nex

8、ty+=tankmove.tankspeed;tankmove.tankshape=tankmove.tanknextshape;if(sceneMath.ceil(tankmove.nexty-20)/32)Math.ceil(tankmove.nextx-20)/32)!=0|sceneMath.ceil(tankmove.nexty-20)/32)Math.floor(tankmove.nextx-12)/32)!=0)tankmove.nextx=tankmove.x;tankmove.nexty=tankmove.y;return;tankmove.tanknextshape+=1;

9、if(tankmove.tanknextshape8)tankmove.tanknextshape=1;return;space()/空格，发射炮弹function space()if(keyPressList32=true)if(gameover)location.reload();if(shell.shellflage)return;if(tankmove.nextx0)return;elseshootSound.play();shell.shellflage=true;shell.nextx=tankmove.nextx;shell.nexty=tankmove.nexty;shell.

10、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, tankmo

11、ve.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.fil

12、lRect(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+, 50

13、0, 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.r

14、estore();/画炮弹function drawshell()if(gameover)return;shellupdate()shellrender()/炮弹发射数据更新function shellupdate()if(shell.shellAngle=0)shell.nexty-=shell.shellspeed;var i=sceneMath.floor(shell.nexty-12)/32)Math.floor(shell.nextx)/32);sceneMath.floor(shell.nexty-12)/32)Math.floor(shell.nextx)/32)=hitwall

15、(i);if(shell.shellAngle=90)shell.nextx+=shell.shellspeed;var i=sceneMath.floor(shell.nexty)/32)Math.floor(shell.nextx+12)/32);sceneMath.floor(shell.nexty)/32)Math.floor(shell.nextx+12)/32)=hitwall(i);if(shell.shellAngle=180)shell.nexty+=shell.shellspeed;var i=sceneMath.floor(shell.nexty+12)/32)Math.

16、floor(shell.nextx)/32);sceneMath.floor(shell.nexty+12)/32)Math.floor(shell.nextx)/32)=hitwall(i);if(shell.shellAngle=270)shell.nextx-=shell.shellspeed;var i=sceneMath.floor(shell.nexty)/32)Math.floor(shell.nextx-12)/32);sceneMath.floor(shell.nexty)/32)Math.floor(shell.nextx-12)/32)=hitwall(i);/检测炮弹是

17、否撞墙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;breakcase 31:if(shellInterval)clearInterval(shellInterval);shellInterval=null;setTimeout(function()shell

18、.shellflage=false,300);shell.nextx=-500;shell.nexty=-500;return i;breakcase 30:if(shellInterval)clearInterval(shellInterval);shellInterval=null;setTimeout(function()shell.shellflage=false,300);shell.nextx=-500;shell.nexty=-500;return i;breakdefault:return 0;/炮弹发射实施function shellrender()shell.x=shell

19、.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.shellsh

20、ape/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=enemyenemytanknum;/enemyrmove.play();enemyupdate();enemyrender();function enemyupdate()enem

21、ytank.shapenum=(0.1+enemytank.shapenum)%8+9;/减慢滚带的速度enemytank.enemytankshape=Math.floor(enemytank.shapenum);/下if(enemytank.enemytankAngle=180)swerve()enemytank.nexty+=enemytank.enemytankspeed;if(sceneMath.ceil(enemytank.nexty-20)/32)Math.ceil(enemytank.nextx-20)/32)!=0|sceneMath.ceil(enemytank.nexty

22、-20)/32)Math.floor(enemytank.nextx-12)/32)!=0)enemyhitwall()/左if(enemytank.enemytankAngle=270)swerve()enemytank.nextx-=enemytank.enemytankspeed;if(sceneMath.floor(enemytank.nexty-12)/32)Math.floor(enemytank.nextx-12)/32)!=0|sceneMath.ceil(enemytank.nexty-20)/32)Math.floor(enemytank.nextx-12)/32)!=0)

23、enemyhitwall()/右if(enemytank.enemytankAngle=90)swerve()enemytank.nextx+=enemytank.enemytankspeed;if(sceneMath.ceil(enemytank.nexty-20)/32)Math.ceil(enemytank.nextx-20)/32)!=0|sceneMath.floor(enemytank.nexty-12)/32)Math.ceil(enemytank.nextx-20)/32)!=0)enemyhitwall()/上if(enemytank.enemytankAngle=0)swe

24、rve()enemytank.nexty-=enemytank.enemytankspeed;if(sceneMath.floor(enemytank.nexty-12)/32)Math.floor(enemytank.nextx-12)/32)!=0|sceneMath.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.s

25、hellflage)return;if(enemytank.nextx=record)record=score;localStorage.record=record;if(score=level*5)level+;if(level=5)gameover=true;returnscene=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,n

26、exty:48,enemytankspeed:Speed+level*0.5,enemytankAngle:180,enemytankshape:0,shapenum:0;enemyenemynum=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+l

27、evel*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(en

28、emyshellInterval);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,t

29、ankmove)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

30、);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;elseenemyt

31、ank.enemytankAngle-=90;enemytank.enemytankAngle=(enemytank.enemytankAngle+360)%360;/敌军tankfunction 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(

32、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(

33、)if(gameover)return;enemyrshellupdate()enemyrshellrender()/炮弹发射数据更新function enemyrshellupdate()if(enemyshell.shellAngle=0)enemyshell.nexty-=enemyshell.shellspeed;var i=sceneMath.floor(enemyshell.nexty-0)/32)Math.floor(enemyshell.nextx)/32);sceneMath.floor(enemyshell.nexty-0)/32)Math.floor(enemyshell

34、.nextx)/32)=hitwall(i);if(enemyshell.shellAngle=90)enemyshell.nextx+=enemyshell.shellspeed;var i=sceneMath.floor(enemyshell.nexty)/32)Math.floor(enemyshell.nextx+0)/32);sceneMath.floor(enemyshell.nexty)/32)Math.floor(enemyshell.nextx+0)/32)=hitwall(i);if(enemyshell.shellAngle=180)enemyshell.nexty+=e

35、nemyshell.shellspeed;var i=sceneMath.floor(enemyshell.nexty+0)/32)Math.floor(enemyshell.nextx)/32);sceneMath.floor(enemyshell.nexty+0)/32)Math.floor(enemyshell.nextx)/32)=hitwall(i);if(enemyshell.shellAngle=270)enemyshell.nextx-=enemyshell.shellspeed;var i=sceneMath.floor(enemyshell.nexty)/32)Math.f

36、loor(enemyshell.nextx-0)/32);sceneMath.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);enemyshel

37、l.nextx=-500;enemyshell.nexty=-500;return 0;breakcase 31:if(enemyshellInterval)clearInterval(enemyshellInterval);enemyshellInterval=null;setTimeout(function()enemyshell.shellflage=false,300);enemyshell.nextx=-500;enemyshell.nexty=-500;return i;breakcase 30:if(enemyshellInterval)clearInterval(enemysh

38、ellInterval);enemyshellInterval=null;setTimeout(function()enemyshell.shellflage=false,300);enemyshell.nextx=-500;enemyshell.nexty=-500;return i;breakdefault:return 0;/炮弹发射实施function enemyrshellrender()enemyshell.x=enemyshell.nextx;enemyshell.y=enemyshell.nexty;context.save();context.setTransform(1,0

39、,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, shellsh

40、apeX, 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;elsereturn false;/检测撞击function impact2(one,two)var dx=one.nextx-two.nextx;var dy=one.nexty-two.nex

41、ty;var distance=Math.sqrt(dx*dx+dy*dy)if(distance29)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)c

42、ontext.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 su

43、rplus=5;/剩余敌人数量var life=3;/生命var invincible=false/无敌var storage = window.localStorage;/localStorageHTML5存储数据if(storage.length=0)localStorage.record=0;var record=localStorage.record;/最高分var gameover=false;var enemyInterval=null;/敌人timervar tankInterval=null;/玩家timervar Speed=3;/运动的速度var Angle=0;/tank

44、面向方向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();/敌军炮弹数组v

45、ar 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,