HTML5移動(dòng)開(kāi)發(fā)之路(8)——坦克大戰(zhàn)游戲2

1、 在上一篇文章中我們已經(jīng)畫(huà)出了自己的坦克，并且可以控制自己的坦克移動(dòng)，我們繼續(xù)接著上一篇來(lái)實(shí)現(xiàn)我們的坦克大戰(zhàn)游戲吧。一、將JS文件分離出來(lái)使用OO的思想，我們已經(jīng)對(duì)坦克進(jìn)行了封裝，對(duì)畫(huà)坦克也進(jìn)行了封裝，下面我們將這兩個(gè)對(duì)象提取到外部的js文件中，文件內(nèi)容如下：javascriptview plaincopyprint?1. /定義一個(gè)Hero類(lèi)(后面還要改進(jìn)）2. /x表示坦克的橫坐標(biāo)3. /y表示縱坐標(biāo)4. /direct表示方向5. functionHero(x,y,direct)6. this.x=x;7. this.y=y;8. this.speed=1;9. this.direct=

2、direct;10. /上移11. this.moveUp=function()12. this.y-=this.speed;13. this.direct=0;14. 15. /右移16. this.moveRight=function()17. this.x+=this.speed;18. this.direct=1;19. 20. /下移21. this.moveDown=function()22. this.y+=this.speed;23. this.direct=2;24. 25. /左移26. this.moveLeft=function()27. this.x-=this.sp

3、eed;28. this.direct=3;29. 30. 31. 32. /繪制坦克33. functiondrawTank(tank)34. /考慮方向35. switch(tank.direct)36. case0:/向上37. case2:/向下38. /設(shè)置顏色39. cxt.fillStyle=#BA9658;40. /左邊的矩形41. cxt.fillRect(tank.x,tank.y,5,30);42. /右邊的矩形43. cxt.fillRect(tank.x+17,tank.y,5,30);44. /畫(huà)中間的矩形45. cxt.fillRect(tank.x+6,tank

4、.y+5,10,20);46. /畫(huà)出坦克的蓋子47. cxt.fillStyle=#FEF26E;48. cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true);49. cxt.fill();50. /畫(huà)出炮筒51. cxt.strokeStyle=#FEF26E;52. cxt.lineWidth=1.5;53. cxt.beginPath();54. cxt.moveTo(tank.x+11,tank.y+15);55. if(tank.direct=0)/只是炮筒的方向不同56. cxt.lineTo(tank.x+11,tank.y);57.

5、else58. cxt.lineTo(tank.x+11,tank.y+30);59. 60. cxt.closePath();61. cxt.stroke();62. break;63. case1:64. case3:65. /設(shè)置顏色66. cxt.fillStyle=#BA9658;67. /上邊的矩形68. cxt.fillRect(tank.x-4,tank.y+4,30,5);69. /下邊的矩形70. cxt.fillRect(tank.x-4,tank.y+17+4,30,5);71. /畫(huà)中間的矩形72. cxt.fillRect(tank.x+5-4,tank.y+6+4

6、,20,10);73. /畫(huà)出坦克的蓋子74. cxt.fillStyle=#FEF26E;75. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true);76. cxt.fill();77. /畫(huà)出炮筒78. cxt.strokeStyle=#FEF26E;79. cxt.lineWidth=1.5;80. cxt.beginPath();81. cxt.moveTo(tank.x+15-4,tank.y+11+4);82. if(tank.direct=1)/只是炮筒的方向不同83. cxt.lineTo(tank.x+30-4,tank.y

7、+11+4);84. else85. cxt.lineTo(tank.x-4,tank.y+11+4);86. 87. cxt.closePath();88. cxt.stroke();89. break;90. 91. 92. 在上一篇中有一個(gè)小問(wèn)題，感謝Mark_Lee的提醒。htmlview plaincopyprint?1. /畫(huà)出坦克的蓋子2. cxt.fillStyle=#FEF26E;3. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);4. cxt.fill();這里畫(huà)的坦克蓋子不是園的，大家可以參考：好了，現(xiàn)在我們的html中的內(nèi)容

8、就變的清晰多了，html中的內(nèi)容如下：htmlview plaincopyprint?1. 2. 3. 4. 5. 6. 7. html5-坦克大戰(zhàn)8. 9. 10. 11. 12. 13. 14. 15. /得到畫(huà)布16. varcanvas1=document.getElementById(tankMap);17. /得到繪圖上下文18. varcxt=canvas1.getContext(2d);19. 20. /我的tank21. /規(guī)定0向上、1向右、2向下、3向左22. varhero=newHero(40,40,0);23. drawTank(hero);24. 25. 26.

9、/接收用戶(hù)按鍵的函數(shù)27. functiongetCommand()28. varcode=event.keyCode;/鍵盤(pán)上字幕的ASCII碼29. switch(code)30. case87:31. hero.moveUp();32. break;33. case68:34. hero.moveRight();35. break;36. case83:37. hero.moveDown();38. break;39. case65:40. hero.moveLeft();41. break;42. 43. /把畫(huà)布清理44. cxt.clearRect(0,0,400,300);45.

10、 /重新繪制46. drawTank(hero);47. 48. 49. 50. 二、繪制敵人的坦克好多朋友可能現(xiàn)在已經(jīng)有了思路，這還不簡(jiǎn)單嗎？畫(huà)敵人坦克的時(shí)候再新建立一個(gè)function仿照自己的坦克類(lèi)再寫(xiě)一遍不就好了嗎。還有的朋友不同意這個(gè)方法，說(shuō)：既然都是坦克我們就不用寫(xiě)了，直接創(chuàng)建坦克實(shí)例不就完了嗎。第一個(gè)朋友和第二個(gè)朋友的做法看似是面向?qū)ο笃鋵?shí)不是面向?qū)ο?，在做這種游戲的時(shí)候如果我們不用面向?qū)ο蟮乃枷肴?shí)現(xiàn)，也可以實(shí)現(xiàn)，但是會(huì)很復(fù)雜。我們這樣考慮一下，自己坦克肯定和敵人坦克有區(qū)別，不能歸為一類(lèi)，比如：發(fā)的子彈不同，顏色不同等。但是兩者又有相同點(diǎn)（都是坦克），我們是不是應(yīng)該把這部分給抽

11、象出來(lái)呢？是的，我們先抽象出來(lái)一個(gè)Tank類(lèi)，再分別繼承這個(gè)Tank類(lèi)。你開(kāi)玩笑吧這個(gè)不是Java語(yǔ)言，這個(gè)是JavaScript腳本語(yǔ)言，哪里來(lái)的繼承？呵呵，我們可以用javascript中的對(duì)象冒充，對(duì)象冒充，是JavaScript 和 ECMAScript實(shí)現(xiàn)繼承的方法，在學(xué)習(xí)對(duì)象冒充實(shí)現(xiàn)繼承前我們的先了解關(guān)鍵字 this 的使用javascriptview plaincopyprint?1. functionclassA(color)2. this.color=color;3. this.show=function()alert(this.color);4. 5. /*6. Note:

12、7. 1this代表的是classA函數(shù)所構(gòu)建的對(duì)象，而非函數(shù)classA對(duì)象本身這樣說(shuō)主要是為了避免（functionisobject）的影響;8. 2在構(gòu)建classA對(duì)象時(shí)，是通過(guò)this來(lái)初始化的屬性和方法的，如果用classB的this去冒充classA的this，那么就實(shí)現(xiàn)了簡(jiǎn)單的繼承了9. */對(duì)象冒充的原理：函數(shù)classA通過(guò)this來(lái)初始化屬性和方法，如果用函數(shù)classB的this冒充classA的this去執(zhí)行，則就會(huì)使classB具有classA的屬性和方法好了，現(xiàn)在我們用自己的坦克和敵人的坦克對(duì)象去冒充一下坦克，呵呵。javascriptview plaincopy

13、print?1. /定義一個(gè)Tank類(lèi)（基類(lèi)）2. functionTank(x,y,direct,color)3. this.x=x;4. this.y=y;5. this.speed=1;6. this.direct=direct;7. this.color=color;8. /上移9. this.moveUp=function()10. this.y-=this.speed;11. this.direct=0;12. 13. /右移14. this.moveRight=function()15. this.x+=this.speed;16. this.direct=1;17. 18. /

14、下移19. this.moveDown=function()20. this.y+=this.speed;21. this.direct=2;22. 23. /左移24. this.moveLeft=function()25. this.x-=this.speed;26. this.direct=3;27. 28. 29. 30. /定義一個(gè)Hero類(lèi)31. functionHero(x,y,direct,color)32. /下面兩句話的作用是通過(guò)對(duì)象冒充達(dá)到繼承的效果33. this.tank=Tank;34. this.tank(x,y,direct,color);35. 36. 37.

15、 /定義一個(gè)EnemyTank類(lèi)38. functionEnemyTank(x,y,direct,color)39. this.tank=Tank;40. this.tank(x,y,direct,color);41. 這樣我們就將自己的坦克和敵人的坦克定義好了，那么繪制坦克的drawTank(tank)要不要變呢？因?yàn)槔L制的是Tank所以不需要改動(dòng)，呵呵，這就是面向?qū)ο蟮亩鄳B(tài)嘍。創(chuàng)建坦克對(duì)象吧！htmlview plaincopyprint?1. /我的tank2. /規(guī)定0向上、1向右、2向下、3向左3. varhero=newHero(40,40,0,heroColor);4. /敵人的

16、tank5. varenemyTanks=newArray();6. for(vari=0;i3;i+)7. varenemyTank=newEnemyTank(i+1)*50,0,2,enemyColor);8. enemyTanksi=enemyTank;9. 完整代碼如下：tankGame05.jsjavascriptview plaincopyprint?1. /為了編程方便，我們定義兩個(gè)顏色數(shù)組2. varheroColor=newArray(#BA9658,#FEF26E);3. varenemyColor=newArray(#00A2B5,#00FEFE);4. 5. /定義一個(gè)

17、Tank類(lèi)（基類(lèi)）6. functionTank(x,y,direct,color)7. this.x=x;8. this.y=y;9. this.speed=1;10. this.direct=direct;11. this.color=color;12. /上移13. this.moveUp=function()14. this.y-=this.speed;15. this.direct=0;16. 17. /右移18. this.moveRight=function()19. this.x+=this.speed;20. this.direct=1;21. 22. /下移23. this

18、.moveDown=function()24. this.y+=this.speed;25. this.direct=2;26. 27. /左移28. this.moveLeft=function()29. this.x-=this.speed;30. this.direct=3;31. 32. 33. 34. /定義一個(gè)Hero類(lèi)35. functionHero(x,y,direct,color)36. /下面兩句話的作用是通過(guò)對(duì)象冒充達(dá)到繼承的效果37. this.tank=Tank;38. this.tank(x,y,direct,color);39. 40. 41. /定義一個(gè)Enem

19、yTank類(lèi)42. functionEnemyTank(x,y,direct,color)43. this.tank=Tank;44. this.tank(x,y,direct,color);45. 46. 47. /繪制坦克48. functiondrawTank(tank)49. /考慮方向50. switch(tank.direct)51. case0:/向上52. case2:/向下53. /設(shè)置顏色54. cxt.fillStyle=tank.color0;55. /左邊的矩形56. cxt.fillRect(tank.x,tank.y,5,30);57. /右邊的矩形58. cxt

20、.fillRect(tank.x+17,tank.y,5,30);59. /畫(huà)中間的矩形60. cxt.fillRect(tank.x+6,tank.y+5,10,20);61. /畫(huà)出坦克的蓋子62. cxt.fillStyle=tank.color1;63. cxt.arc(tank.x+11,tank.y+15,5,0,Math*PI*2,true);64. cxt.fill();65. /畫(huà)出炮筒66. cxt.strokeStyle=tank.color1;67. cxt.lineWidth=1.5;68. cxt.beginPath();69. cxt.moveTo(tank.x+

21、11,tank.y+15);70. if(tank.direct=0)/只是炮筒的方向不同71. cxt.lineTo(tank.x+11,tank.y);72. else73. cxt.lineTo(tank.x+11,tank.y+30);74. 75. cxt.closePath();76. cxt.stroke();77. break;78. case1:79. case3:80. /設(shè)置顏色81. cxt.fillStyle=#BA9658;82. /上邊的矩形83. cxt.fillRect(tank.x-4,tank.y+4,30,5);84. /下邊的矩形85. cxt.fil

22、lRect(tank.x-4,tank.y+17+4,30,5);86. /畫(huà)中間的矩形87. cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);88. /畫(huà)出坦克的蓋子89. cxt.fillStyle=#FEF26E;90. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math*PI*2,true);91. cxt.fill();92. /畫(huà)出炮筒93. cxt.strokeStyle=#FEF26E;94. cxt.lineWidth=1.5;95. cxt.beginPath();96. cxt.moveTo(tank.x+

23、15-4,tank.y+11+4);97. if(tank.direct=1)/只是炮筒的方向不同98. cxt.lineTo(tank.x+30-4,tank.y+11+4);99. else100. cxt.lineTo(tank.x-4,tank.y+11+4);101. 102. cxt.closePath();103. cxt.stroke();104. break;105. 106. 107. 坦克大戰(zhàn).htmlhtmlview plaincopyprint?1. 2. 3. 4. 5. 6. 7. html5-坦克大戰(zhàn)8. 9. 10. 11. 12. 13. /得到畫(huà)布14. varcanvas1=document.getElementById(tankMap);15. /得到繪圖上下文16. varcxt=canvas1.getContext(2d);17. 18. /我的tan