基于html5的單機游戲(20210215111225)

1、文檔從互聯(lián)網(wǎng)中收集，已重新修正排版，word格式支持編輯，如有幫助歡迎下載支持。 Index.html CH3EX 1: Text Arranger Version 1.0 Your browser does not support the HTML 5 Canvas. Main.js window.addEventListener(Mload, canvasApp, false); 是否支持canvas function canvasSupport () return Modernizr.canvas; function canvasAppO 是否支持canvas if (!canvasSu

2、pport() return; ) var theCanvas = document.gctElementById(HcanvasOneH); var context = theCanvas.getContext(M2dH); var tank=new Image(); tank.addEventListeneload*. start, false); tank.src=Htanks-sheet.pngH /Background context.fillStyle = ”#CCCCCC”； context.fillRect(0, 0, theCanvas.width, theCanvas.he

3、ight); /Box context.lineWidth= 16; context.strokeStyle = #000000H; context.strokeRcct( /畫我方tank和我方炮彈 function drawtank() if(gameover) context.save(); context.fillStyle = M#000000H; context.font = *normal bold 50px normaln; context.fillText(v 游戲結束”，150. 150); context.restore(); context.save(); contex

4、t.fillStyle = ”#000000”； context.font =Hnormal bold 25px normalM; context.fillText(按空格鍵重新開始游戲，125, 200); context.restore(); update(); return; updateO; drawScene(); render(); /畫場景 function drawScene() for(var i=0;i=10;i+) for(var j=O;j8) tankmove.tanknextshapc= I; return; 右 if(keyPressList39=true) if

5、(gameover) return; space(); tankniove.tankAngle=90; tankinove.nextx+=tankmove.tankspecd; tankniove.tankshape=tankmove.tanknextshape; if(sceneMath.ceil(tankmove.nexty-20)/32)Math.ceil(tankmove.nextx-20)/32)!=0llscene Math.floor(tankmove.nexty-12)/32)|Math.ceil(tankniove.nextx-20)/32) !=0) tankmove.ne

6、xtx=tankmove.x; tankmove.nexty=tankmove.y; return: tankinove.tanknextshape+= 1: if(tankmove.tankncxtshape8) tankmove.tanknextshape= 1; return; 上 if(keyPressList38=true) if(gameover) return: space(); tankmove.tankAngle=0; tankmove.nexty-=tankmove.tankspeed; tankmove.tankshapc=tankmove.tanknextshape;

7、if(sceneMath.floor(tankmo ve.nexty-12)/32) Math.floor(tankmove.nextx-12)/32) !=0llscen e| Math.floor(tankmove.nexty-l 2)/32) Math.ceil(tankmove.nextx-20)/32)!=0) tankmove.nextx=tankmove.x; tankmove.nexty=tankmove.y; return: tankmove.tanknextshape+= 1: if(tankmove.tankncxtshape8) tankmove.tanknextsha

8、pc= I; return; 下 if(keyPressList40=true) if(gameover) return; space(); tankniove.tankAnglc= 180; tankniove.nexty+=tankmove.tankspecd; tankniove.tankshape=tankmove.tanknextshape; if(sceneMath.ceil(tankmove.nexty-20)/32)Math.ceil(tankmove.nextx-20)/32)!=0llscene Math.ceil(tankmove.nexty-20)/32)Math.fl

9、oor(tankmove.nextx-12)/32) !=0) tankmove.nextx=tankmove.x; tankmove.nexty=tankmove.y; return: tankinove.tanknextshape+= 1: if(tankmove.tankncxtshape8) tankmove.tanknextshape= 1; return; space() /空格，發(fā)射炮彈 function space() if(keyPressList32=true) if(gameover) location.reload(); if(shell.shellflage) ret

10、urn; if(tankmove.nextx0) return; else shootSound.playO; shell.shellflage=true; shell.nextx=tankmove.nextx; shell.nexty=tankmove.nexty; shell.shellAngle=tankniove.tankAngle; if(shelllnterval) clearlnterval(shelllnterval); shelllnterval=null; ) shellInterval=setInterval(drawshcIL 33); 坦克實施 function re

11、nder() context.save(); context.setTransform( 1.0.0,0,0) var anglelnRadians =tankmove.tankAngle * Math.PI /180; context.translate(tankmove.x+16. tankmove.y+16) context.rotate(anglelnRadians); var tankshapeX=Math.floor(tankniove.tankshape%8)*32; var tankshapeY=Math.floor(tankmove.tankshape/8)*32; cont

12、ext.drawlmage(tank, tankshapcX. tankshapeY32,32rl 6,-16,32,32); context.restore(); context.clearRcct(496,16,13 context.fillStyle = ”#3cb371”； context.fillRect(496J 6,13 context.save(); context.fillStyle = ”#000000”; context.font = italic bold 23px serif1; context.fiUTextC關 卡:Jlcvcl+, 500, 80); conte

13、xt.fillText(v 敵 context.fillText(u 生 context.fillText(H 得 人:+surplus+, 500,110); 命叮+lifc+, 500, 140); 分:v+score+, 500. 170); context.fiUTextC最高分:,+record+,M 500, 200); context.restore(); context.save(); context.fillStyle = ”#000000”； context.font = normal bold 15px normal,1; context.fillText(H游戲說明：玩

14、家”，500. 270); context.fillTextC操控坦克進行戰(zhàn)”,500, 290); context.fillTcx斗，擊毀敵方得二 500, 310); context.fillTextC分,被擊毀或相S 500, 330); context.fillText(u相撞減分。 500. 350); context.restore(); ) 畫炮彈 function drawshell() if(gameover) return; shellupdateO shellrender() 炮彈發(fā)射數(shù)據(jù)更新 function shellupdateO if(shell .shell A

15、ngle=0) shell】cxty=shcll.shcllspccd: var i=scencMath.floor(shelI.nexty-12)/32) Math.floor(shcll.nextx)/32); sceneMath.floor(shell.nexty-12)/32)Math.floor(shell.nextx)/32)=hitwall(i); if(shell.shell Angle=90) shell】cxix+=shcllshcllspccd; var i=sceneMath.floor(shell.nexty)/32)Math.floor(shell.nextx+l

16、2)/32): sceneMath.floor(shell.nexty)/32)Math.floor(shell.nextx+12)/32)=hitwall(i); if(sheIl.shellAngle=180) shell】cxty+=shcll.shcllspccd; var i=sceneMath.floor(shell.nexty+12)/32 )M ath.floor(shell.nextx)/32); sceneMath.floor(shell.nexty+12)/32 )M ath.floor(shell.nextx)/32)=hitwall(i); if(sheIl.shel

17、lAngle=270) shell】cxw=shcll.shcllspccd: 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); 檢測炮彈是否撞墻 function hitwall(i) switch(i) case 26: if(shelllnterval) clearlnterval(sheninter-al); shelllnterval=null;

18、setTimeout(function() shell.shellflage=false ,300); shell.nextx=-500: shell.nexty=-500; return 0; break case 31: if(shelllnterval) clearlnterval(shelllnterval); shelllnterval=null; setTimeout(function() shell, shcllflagc二false ,300); shell.nextx=-500: shell.nexty=-500; return i; break case 30: if(sh

19、elllnterval) clearlnterval(shelllnter*al); shelllnterval=null; setTimeout(function() shell.shellflage=false ,300); shell.nextx=-500: shell.nexty=-500; return i; break default: return 0; /炮彈發(fā)射實施 function shellrender() shell.x=shell.nextx; shell.y=shell.ncxty; context.save(); context.setTransform( 1Q0

20、 J .0.0) var shellanglelnRadians =shell.shellAngle * Math.PI / 180; context.translate(shell.x+16, shell.y+16) context.rotate(shellanglelnRadians); var shellshapeX=Math.floor(shell.sheIlshape%8)*32; var shellshapeY=Math.floor(shell.sheIlshape/8)*32; context.drawlmage(tank. shellshapeX, shellshapeY,32

21、32,-16,-16,32,32); context.restore(); ) 畫敵軍坦克 function drawenemy() if(gameover) return; ) for(var enemytanknum=0;enemytanknum=2;enemytanknum+) var enemytank=enemyfenemytanknum|: /enemyrmove.playO; enemyupdate(); eneniyrender(); ) function enemyupdate() enemytank.shapenum=(0.1+enemytank.shapenuni)%8+

22、9;/ 減慢滾帶的速度 enemytank.enemytankshape=Math.floor(enemytank.shapenum); 下 if(enemytank.enemytankAngle= 180)( swerve() encmytank.nexty+=enemytank.enemytankspecd; if(sceneMath.ceil(enemytank.nexty-20)/32) Math.ceiI(enemytank.nextx-20)/32) !=0llscen eMath.ceil(enemytank.nexty-20)/32) Math.floor(enemytank.

23、nextx-12)/32) !=0) enemyhitwallO 左 if(enemytank.enemytankAngIe=270) swervre() encmytank.nextx-=enemytank.enemytankspeed; if(sceneMath.floor(enemytank.nexty-12)/32 )Math.floor(enemytank.nextx-12)/32) !=0llsc eneMath.ceil(enemytank.nexty-20)/32)Math.floor(enemytank.nextxl 2)/32) !=0) enemyhitwallO 右 i

24、f(enemytank.enemytankAngle=90) swervre() encinytank.nextx+=enemytank.enemytankspccd; if(sceneMath.ceil(enemytank.nexty-2O)/32 )Math.ceil(enemytank.nextx-20)/32)!=0llscen eMath.floor(enemytank.nexty-l 2)/32) Math.ceil(enemytank.nextx-20)/32)!=0) enemyhitwallO 上 if(enemytank.enemytankAngle=O) swerve()

25、 encmytank.nexty-=eneniytank.enemytankspeed; if(sceneMath.floor(enemytank.nexty-12)/32) Math.floor(enemytank.nextx-12)/32) !=Ollsc eneMath.floor(enemytank.nexty-12)/32) Math.ceil(enemy tank.nextx-2O)/32) !=0) enemyhitwallO /隨機發(fā)射炮彈 var enemyfire=Math.floor(Math.random() 100); if(enemyfire=O) if(encmy

26、shell.shellflage) return: if(enemytank.ncxtx=record) record=score: IocalStorage.record=record; if(score=level*5) level+; if(level=5) gameover=true; return scene=scenenum(level-l )%4J; for(var enemynuin=0;enemynuni=2:enemynuni+) var tempx=48+enemynu m* 192; 敵軍坦克 tempenemytank=appearx:tempx,appcary:48

27、,x:tempx,y:48,nextx:tempx.nexty:48xnemytank speed :Spced+level *0.5,enemytankAngle: 180,enemytankshape:0?shapenum:0; eneniyenemynum=tcmpenemytank; tankmove=appearx:240,appeary:304,x:240,y:304,nextx:240.nexty:3Q4,tankAngIe:Angle4an kspced:Specd.tankshape:shapeJanknextshape:shape; enemyshell=x:0,y:0,n

28、extx:0,nexty:0,shellspecd:Spced+level*0.5+2,shellshape:21,shell Angl e:Angle,shellflage:false; surplus=6: surplus-; sctTimeout(function()shell.shcllflage=false,300); explode(enemytank) encmytank.nextx=-500: shell.nextx=-500; shell.nexty=-500; /檢測是否打擊到玩家 if(impact2(enemyshelLtankmove) if(invincible)

29、return: if(enemyshclllnterval) clcarlnterval(enemyshelllntenfal); enemyshelllntenral=null; life-; if(life=0) gameover=truc: return; ) invincible=truc; setTimcout(function()invincible=false )2000) explode(tankmove) setTimeout(function()enemyshell.sheIlflage=false300): tankmove.nextx=-500; encmyshell.

30、nextx=-500; encmyshell.nexty=-500; 與敵人相撞 if(inipact(enemytank.tankmove) if(enemyshelllnterval) clearlnterval(enemyshelllnten-al); enemyshelllntenfal=null; if(invincible) return; ) invincible=true; setTinieout(function()invincible=false,2000) life-; if(life=0) gameover=truc: return; explode(tankmove)

31、 tankmove.nextx=-500; 自動轉向 function swcrvc() var j=Math.floor(Math.random() * 100); if(j=O) enemytank.enemytankAngle+=90; enemytank.enemytankAngle-=90: encmytank.enemytankAngle=(encinytank.enemytankAngIe+360)%360: 撞墻轉向 function enemyhitwall() encmytank.nextx=enemytank.x; enemytank.nexty=encmytank.y;

32、 var j=Math.floor(Math.random() * 2); if(i=O) enemytank.enemytankAnglc+=90; else enemytank.enemytankAngle-=90: encmytank.enemytankAngle=(encinytank.enemytankAngle+360)%360: 敵軍tank function enemyrender() enemytank.x=enemytank enemytank.y=enemytank.nexty: context.save(); context.setTransform( 1.0.0,0,

33、0) var enemyanglelnRadians =enemytank.enemytankAngle * Math.PI /180; context.translate(enemytank.x+16 encmytank.y+16) context.rotate(encmyanglelnRadians); var enemyshapeX=Math.floor(enemytank.enemytankshape%8)*32; var enemyshapeY=Math.floor(enemytank.enemytankshape/8)*32; context.drawlmage(tank, ene

34、myshapeX. cncmyshapcY.32,32, 116.32,32); context.restore(); ) /畫炮彈 function enemyrdrawshcll() if(gameover) return; enemyrshellupdateO enemyrshellrender() 炮彈發(fā)射數(shù)據(jù)更新 function enemyrshellupdate() if(enemyshell.shell Angle=0) enemyshell.nexty-=enemyshell.shcllspeed; var i=sceneMath.floor(enemyshell.nexty

35、-0)/32)Math.floor(enemyshell.nextx)/32); sceneMath.floor(enemysheILnexty-0)/32)Math.floor(enemyshelI.nextx)/32)=hitwall(i); if(enemyshcll.shell Angle=90) enemyshe 11iextx+=enemyshell.shellspeed; var i=sceneMath.floor(enemyshell.nexty)/32)Math.floor(enemysheIl.nextx+0)/32); sceneMath.floor(enemysheIl

36、.nexty)/32)Math.floor(enemyshell.nextx+0)/32)=hitwall(i); if(enemyshell.shellAngle= 180)( enemyshen.nexty+=encmyshell.shenspeed; var i=sceneMath.floor(enemyshell.nexty+0)/32 )M ath.floor(enemyshell.nextx)/32); sceneMath.floor(enemysheILnexty+0)/32)Math.floor(enemyshell.nextx)/32)=hitwalI(i); if(enem

37、yshell.shell Angle=270) enemy shell】cxmncmyshcll.shcllspccd; var i=sceneMath.floor(enemyshell.nexty)/32)Math.floor(enemysheIl.nextx-0)/32); sceneMath.floor(enemyshell.nexty)/32)Math.floor(enemysheIl.nextx-0)/32)=hitwall(i); 檢測炮彈是否撞墻 function hitwall(i) switch(i) case 26: if(enemyshelllnterval) clear

38、lnterval(enemyshelllnterval); enemyshclllnterval=null; setTimeout(function()enemysheIl.shellflage=faIse ,300); enemyshell.nextx=-500; enemyshell.nexty=-500; return 0; break case 31: if(enemyshelllnterval) clearlnterval(enemyshelllnterval); enemyshclllnterval=null; setTimeout(function()enemyshell.she

39、llflage=false、300); enemyshell.nextx=-500: enemyshell.nexty=-500; return i; break case 30: if(enemyshelllnterval) clearlnterval(enemyshelllnterval); eneniyshelllnterval=null; setTimeout(function()enemyshell.shellflage=false ,300); enemyshell.nextx=-500: enemyshell.nexty=-500; return i; break default

40、: return 0; /炮彈發(fā)射實施 function enemyrshellrender() cnemyshell.x=enemyshell.nextx; encniyshell.y=enemyshell.nexty; context.save(); context.setTransfornX 1,0,0,1.0.0) var shellanglelnRadians =enemyshell.shellAngle * Math.PI / 180; context.translate(encmyshell.x+16. enemyshell.y+16) context.rotate(shella

41、nglelnRadians); var shellshapeX=Math.floor(eneinyshcll.shellshape%8)*32; var shellshapeY=Math.fIoor(eneinyshcll.shellshape/8)*32; context.drawlmage(tank. shellshapeX, shellshapcY32,32, 16,-16,32,32); context.restore(); 檢測撞擊 function impact(onejwo) var dx=one.nextx-two.nextx; var dy=one.nexty-two.nex

42、ty; 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(distance29) clearlnterval(dictanklntenfal); setTimcout(function()dietank.shellflage=

43、false,300); if(dietank.appeary=48) if(surplus=2) dietank.enemytankspeed=O; return; dietank.nextx=dietank.appearx; dietank.nexty=dietank.appear)r: ),15) function drawdietank(dietankshape) context.save(); context.setTransform( 1.0,0Q0) context.translate(x+16, y+16) var dietankshapeX=Math.floor(dietank

44、shape%8)*32; var dietankshapeY=Math.floor(dietankshape/8)*32; context.drawlmage(tank, dietankshapeX. dietankshapeY,32,32,-16,-16,32,32); context.restore(); var score=0;/ 分數(shù) var level=l;/ 關卡 var surplus=5;剩余敵人數(shù)量 var life=3y/ 生命 var invincible=false/ 無敵 var storage = window.locaIStorage;/HlocalStorage

45、MHTML5 存儲數(shù)據(jù) if(storage.length=0) localStorage.record=0; var record=locaIStorage.recordy/Mi55 var gameover=false; var enemylnterval=null;/敵人 timer var tanklnterval=null;/5c家 timer var Speed=37/is 動的速度 var Angle=O:/tank 而向方向 var shape=l y/tank 當前狀態(tài) 坦克數(shù)組 tankmove=appearx:240,appeary:304,x:240,y:304,nex

46、tx:240.nexty:304,tankAngle:Angle4an kspced:SpecdJankshape:shapejankncxtshape:shapc; 炮彈數(shù)組 shell=x:0j:0,nextx:0,nexty:0,shellspeed:Speed+4,shellshape:20,shellAngle:Angle,shellflag e:false; 敵軍數(shù)組 var enemy=new ArrayO; /敵軍炮彈數(shù)組 var enemyshell=x:0,y:0,nextx:09nexty:05shellspeed:Speed+2,shellshape:2hshellAn

47、gle:Angle,shellfla ge:false; 場景數(shù)組 var scenenum= , 3L 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,(X 0、0. 0,26, 0, 0,26,31 , 31,26. 0, 0、0.26. 0. 0,

48、0.26, 0. 0, 0,26,31, 31,26, 0, 0, 0. 0.26, 0,26, 0. 0. 0, 0,26,31, 31,26.262626. 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 , 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.26Q31, 31,0, 0, 0

49、, 0,26, 0, 0, 0, 26,0, 0, 0, 0,31, 31.26.26,26. 26.26,26,26.26,26,2626. 26,26,31, 31,0, 26, 0, 0.0, 026, 0, 0, 0, 0, 26031, 31,26. 26、0,262626,2626,26、26、0,26.26,31, 31,0, 0, 0, 0, 26Q 0, 0.26, 0. 0. 0, 0,31, 31.26.26,26,26. 0, 0Q0.0. 26,26,26,2631, 31,0. 0,26, 26, 0. 0, 0, 0. 0, 26,26, 0, 0,31, , 3

50、0,30,3030,303030,30,30.30,30,30,3030,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, 026, 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

51、,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, 3i, a o, o, o, o, o, o, o、o, o, o, o, 03 ij, , 30,30,3030,3O3O3O,3O,3O.30,30,30,3030,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, 026 0. 0, 0, 0,26, 0, 0, 0,31, 31.26.26,26, 0.26.26,26,26.26,2626. 0.26,31, 31,0, 0, 0, 0, 0, 0,26, 0, 0. 0, 0, 0,26,31, 31.26, 0.26,2626,26,26.2626,26. 0,26.26,31, 31,0, 0, 0, 0, 0,26, 0, 0.26, 0, 0, 0, 0,31, 31,26.26,2626. 0, 0,26.26,26, 0,26.2626,31, 31, 0, 0,26, 0