版權說明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權，請進行舉報或認領
文檔簡介
1、 在上一篇文章中我們已經(jīng)畫出了自己的坦克，并且可以控制自己的坦克移動，我們繼續(xù)接著上一篇來實現(xiàn)我們的坦克大戰(zhàn)游戲吧。一、將JS文件分離出來使用OO的思想，我們已經(jīng)對坦克進行了封裝，對畫坦克也進行了封裝，下面我們將這兩個對象提取到外部的js文件中，文件內(nèi)容如下：javascript view plain copy print?1. /定義一個Hero類(后面還要改進） 2. /x表示坦克的橫坐標 3. /y表示縱坐標 4. /direct表示方向 5. function
2、;Hero(x,y,direct) 6. this.x=x; 7. this.y=y; 8. this.speed=1; 9. this.direct=direct; 10. /上移 11.
3、 this.moveUp=function() 12. this.y-=this.speed; 13. this.direct=0; 14. 15. /右移 16.
4、 this.moveRight=function() 17. this.x+=this.speed; 18. this.direct=1; 19. 20. /下移 21.
5、60; this.moveDown=function() 22. this.y+=this.speed; 23. this.direct=2; 24. 25. /左移
6、;26. this.moveLeft=function() 27. this.x-=this.speed; 28. this.direct=3; 29. 30. 31. 32
7、. /繪制坦克 33. function drawTank(tank) 34. /考慮方向 35. switch(tank.direct) 36. case 0: /向上
8、37. case 2: /向下 38. /設置顏色 39. cxt.fillStyle="#B
9、A9658" 40. /左邊的矩形 41. cxt.fillRect(tank.x,tank.y,5,30); 42.
10、0; /右邊的矩形 43. cxt.fillRect(tank.x+17,tank.y,5,30); 44. /畫中間的矩形 45.
11、60; cxt.fillRect(tank.x+6,tank.y+5,10,20); 46. /畫出坦克的蓋子 47. cxt.fillStyle="#FEF26E" 48. &#
12、160; cxt.arc(tank.x+11,tank.y+15,5,0,Math.PI*2,true); 49. cxt.fill(); 50. &
13、#160;/畫出炮筒 51. cxt.strokeStyle="#FEF26E" 52. cxt.lineWidth=1.5; 53.
14、60; cxt.beginPath(); 54. cxt.moveTo(tank.x+11,tank.y+15); 55. if(tank.direct=0) &#
15、160; /只是炮筒的方向不同 56. cxt.lineTo(tank.x+11,tank.y); 57. else 58. &
16、#160; cxt.lineTo(tank.x+11,tank.y+30); 59. 60. cxt.closePath()
17、; 61. cxt.stroke(); 62. break; 63. case 1: 64.
18、 case 3: 65. /設置顏色 66. cxt.fillStyle="#BA9658" 67.
19、0; /上邊的矩形 68. cxt.fillRect(tank.x-4,tank.y+4,30,5); 69. /下邊的矩形 70.
20、60; cxt.fillRect(tank.x-4,tank.y+17+4,30,5); 71. /畫中間的矩形 72. cxt.fillRect(t
21、ank.x+5-4,tank.y+6+4,20,10); 73. /畫出坦克的蓋子 74. cxt.fillStyle="#FEF26E" 75.
22、60; cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math.PI*2,true); 76. cxt.fill(); 77. /畫出炮筒 78. &
23、#160; cxt.strokeStyle="#FEF26E" 79. cxt.lineWidth=1.5; 80. cxt.be
24、ginPath(); 81. cxt.moveTo(tank.x+15-4,tank.y+11+4); 82. if(tank.direct=1) /只是炮筒的方
25、向不同 83. cxt.lineTo(tank.x+30-4,tank.y+11+4); 84. else 85.
26、; cxt.lineTo(tank.x-4,tank.y+11+4); 86. 87. cxt.closePath(); 88.
27、0; cxt.stroke(); 89. break; 90. 91. 92. 在上一篇中
28、有一個小問題，感謝 Mark_Lee的提醒。html view plain copy print?1. /畫出坦克的蓋子 2. cxt.fillStyle="#FEF26E" 3. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true); 4. cxt.fill(); 這里畫的坦克蓋子不是園的，大家可以參考：好了，現(xiàn)在我們的html中的內(nèi)容就變的清晰多了，html中的內(nèi)容如下：html view pla
29、in copy print?1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"/> 5. </head> 6. <body onkeydown="getCommand();"> 7. <h1>html5-坦克大戰(zhàn)<
30、;/h1> 8. <!-坦克大戰(zhàn)的戰(zhàn)場-> 9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> 10. <!-將tankGame04.js引入-> 11. <script type=&q
31、uot;text/javascript" src="tankGame04.js"></script> 12. <script type="text/javascript"> 13. 14. 15. /得到畫布 16. var canvas1 = documen
32、t.getElementById("tankMap"); 17. /得到繪圖上下文 18. var cxt = canvas1.getContext("2d"); 19. 20. /我的tank 21.
33、; /規(guī)定0向上、1向右、2向下、3向左 22. var hero = new Hero(40,40,0); 23. drawTank(hero); 24. 25. 26. /接收用戶按鍵的函數(shù) 27.
34、60; function getCommand() 28. var code = event.keyCode; /鍵盤上字幕的ASCII碼 29. switch(code) 30. &#
35、160; case 87: 31. hero.moveUp(); 32. break;
36、60; 33. case 68: 34. hero.moveRight(); 35.
37、60; break; 36. case 83: 37. hero.moveDown(); 38.
38、0; break; 39. case 65: 40. &
39、#160;hero.moveLeft(); 41. break; 42. 43. /把畫布清理 44.
40、; cxt.clearRect(0,0,400,300); 45. /重新繪制 46. drawTank(hero); 47. 48. </script> 49. &
41、lt;/body> 50. </html> 二、繪制敵人的坦克好多朋友可能現(xiàn)在已經(jīng)有了思路，這還不簡單嗎？畫敵人坦克的時候再新建立一個function仿照自己的坦克類再寫一遍不就好了嗎。還有的朋友不同意這個方法，說：既然都是坦克我們就不用寫了，直接創(chuàng)建坦克實例不就完了嗎。第一個朋友和第二個朋友的做法看似是面向?qū)ο笃鋵嵅皇敲嫦驅(qū)ο螅谧鲞@種游戲的時候如果我們不用面向?qū)ο蟮乃枷肴崿F(xiàn)，也可以實現(xiàn)，但是會很復雜。我們這樣考慮一下，自己坦克肯定和敵人坦克有區(qū)別，不能歸為一類，比如：發(fā)的子彈不同，顏色不同等。但是兩者又有相同點（都是坦克），我
42、們是不是應該把這部分給抽象出來呢？是的，我們先抽象出來一個Tank類，再分別繼承這個Tank類。你開玩笑吧這個不是Java語言，這個是JavaScript腳本語言，哪里來的繼承？呵呵，我們可以用javascript中的對象冒充，對象冒充，是JavaScript 和 ECMAScript實現(xiàn)繼承的方法，在學習對象冒充實現(xiàn)繼承前我們的先了解關鍵字 this 的使用javascript view plain copy print?1. function classA(color) 2. this.col
43、or = color; 3. this.show = function()alert(this.color); 4. 5. /* 6. Note: 7. 1> this 代表的是classA函數(shù)所構建的對象，而非函數(shù)classA對象本身這樣說主要是為了避免（function is object）的影響;&
44、#160;8. 2> 在構建classA對象時，是通過this來初始化的屬性和方法的，如果用classB的this去冒充classA的this，那么就實現(xiàn)了簡單的繼承了 9. */ 對象冒充的原理：函數(shù)classA通過this來初始化屬性和方法，如果用函數(shù)classB的this冒充classA的this去執(zhí)行，則就會使classB具有classA的屬性和方法好了，現(xiàn)在我們用自己的坦克和敵人的坦克對象去冒充一下坦克，呵呵。javascript view plain co
45、py print?1. /定義一個Tank類（基類） 2. function Tank(x,y,direct,color) 3. this.x=x; 4. this.y=y; 5. this.speed=1; 6. this.direct=direct;
46、7. this.color=color; 8. /上移 9. this.moveUp=function() 10. this.y-=this.speed; 11. this.d
47、irect=0; 12. 13. /右移 14. this.moveRight=function() 15. this.x+=this.speed; 16.
48、60;this.direct=1; 17. 18. /下移 19. this.moveDown=function() 20. this.y+=this.speed; 21. &
49、#160; this.direct=2; 22. 23. /左移 24. this.moveLeft=function() 25. this.x-=this.speed; 26.
50、; this.direct=3; 27. 28. 29. 30. /定義一個Hero類 31. function Hero(x,y,direct,color) 32. /下面兩句話的作用是通過對象冒充達到繼承的效果 33. this.tank=Tank
51、; 34. this.tank(x,y,direct,color); 35. 36. 37. /定義一個EnemyTank類 38. function EnemyTank(x,y,direct,color) 39. this.tank=Tank; 40. this.tank(x,y,di
52、rect,color); 41. 這樣我們就將自己的坦克和敵人的坦克定義好了，那么繪制坦克的drawTank(tank)要不要變呢？因為繪制的是Tank所以不需要改動，呵呵，這就是面向?qū)ο蟮亩鄳B(tài)嘍。創(chuàng)建坦克對象吧！html view plain copy print?1. /我的tank 2. /規(guī)定0向上、1向右、2向下、3向左 3. var hero=new Hero(40,40,0,heroColor); 4. /敵人的tank
53、 5. var enemyTanks=new Array(); 6. for(var i=0;i<3;i+) 7. var enemyTank = new EnemyTank(i+1)*50,0,2,enemyColor); 8. enemyTanksi=enemyTank; &#
54、160;9. 完整代碼如下：tankGame05.jsjavascript view plain copy print?1. /為了編程方便，我們定義兩個顏色數(shù)組 2. var heroColor=new Array("#BA9658","#FEF26E"); 3. var enemyColor=new Array("#00A2B5","#00FEFE");
55、;4. 5. /定義一個Tank類（基類） 6. function Tank(x,y,direct,color) 7. this.x=x; 8. this.y=y; 9. this.speed=1; 10. this.direct=direct;
56、60;11. this.color=color; 12. /上移 13. this.moveUp=function() 14. this.y-=this.speed; 15.
57、this.direct=0; 16. 17. /右移 18. this.moveRight=function() 19. this.x+=this.speed; 20.
58、60; this.direct=1; 21. 22. /下移 23. this.moveDown=function() 24. this.y+=this.speed; 25. &
59、#160; this.direct=2; 26. 27. /左移 28. this.moveLeft=function() 29. this.x-=this.speed; 30.
60、; this.direct=3; 31. 32. 33. 34. /定義一個Hero類 35. function Hero(x,y,direct,color) 36. /下面兩句話的作用是通過對象冒充達到繼承的效果 37. this.tan
61、k=Tank; 38. this.tank(x,y,direct,color); 39. 40. 41. /定義一個EnemyTank類 42. function EnemyTank(x,y,direct,color) 43. this.tank=Tank; 44. this.tank(
62、x,y,direct,color); 45. 46. 47. /繪制坦克 48. function drawTank(tank) 49. /考慮方向 50. switch(tank.direct) 51.
63、; case 0: /向上 52. case 2: /向下 53. /設置顏色 54.
64、 cxt.fillStyle=tank.color0; 55. /左邊的矩形 56. cxt.fillRect(tank.x,tank.y,5,30); 57. &
65、#160; /右邊的矩形 58. cxt.fillRect(tank.x+17,tank.y,5,30); 59. /畫中間的矩形
66、0; 60. cxt.fillRect(tank.x+6,tank.y+5,10,20); 61. /畫出坦克的蓋子 62.
67、 cxt.fillStyle=tank.color1; 63. cxt.arc(tank.x+11,tank.y+15,5,0,Math*PI*2,true); 64. cxt.fill(); 65.
68、; /畫出炮筒 66. cxt.strokeStyle=tank.color1; 67. cxt.lineWidth=1.5; 68. &#
69、160; cxt.beginPath(); 69. cxt.moveTo(tank.x+11,tank.y+15); 70. if(tan
70、k.direct=0) /只是炮筒的方向不同 71. cxt.lineTo(tank.x+11,tank.y); 72. &#
71、160;else 73. cxt.lineTo(tank.x+11,tank.y+30); 74. 75. &#
72、160; cxt.closePath(); 76. cxt.stroke(); 77. break; 78.
73、60;case 1: 79. case 3: 80. /設置顏色 81. cxt.fillStyle="#BA9658&
74、quot; 82. /上邊的矩形 83. cxt.fillRect(tank.x-4,tank.y+4,30,5); 84.
75、 /下邊的矩形 85. cxt.fillRect(tank.x-4,tank.y+17+4,30,5); 86. /畫中間的矩形 87. &
76、#160; cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10); 88. /畫出坦克的蓋子 89. cxt.fillStyle="#FEF26E"
77、90. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,Math*PI*2,true); 91. cxt.fill(); 92.
78、60; /畫出炮筒 93. cxt.strokeStyle="#FEF26E" 94. cxt.lineWidth=1.5; 95.
79、; cxt.beginPath(); 96. cxt.moveTo(tank.x+15-4,tank.y+11+4); 97. if(tank.direct=1)
80、 /只是炮筒的方向不同 98. cxt.lineTo(tank.x+30-4,tank.y+11+4); 99. else 10
81、0. cxt.lineTo(tank.x-4,tank.y+11+4); 101. 102. &#
82、160; cxt.closePath(); 103. cxt.stroke(); 104. break; 105. 106. &
83、#160; 107. 坦克大戰(zhàn).htmlhtml view plain copy print?1. <!DOCTYPE html> 2. <html> 3. <head> 4. <meta charset="utf-8"/> 5. </head> 6. <body onke
84、ydown="getCommand();"> 7. <h1>html5-坦克大戰(zhàn)</h1> 8. <!-坦克大戰(zhàn)的戰(zhàn)場-> 9. <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
85、60;10. <!-將tankGame04.js引入-> 11. <script type="text/javascript" src="tankGame05.js"></script> 12. <script type="text/javascript"> 13. /得到畫布 14. &
86、#160;var canvas1=document.getElementById("tankMap"); 15. /得到繪圖上下文 16. var cxt=canvas1.getContext("2d"); 17. 18. /我的tank
87、0;19. /規(guī)定0向上、1向右、2向下、3向左 20. var hero=new Hero(40,40,0,heroColor); 21. /敵人的tank 22. var enemyTanks=new Array(); 23.
88、for(var i=0;i<3;i+) 24. var enemyTank = new EnemyTank(i+1)*50,0,2,enemyColor); 25. enemyTanksi=enemyTank; 26. 27. 28.
溫馨提示
- 1. 本站所有資源如無特殊說明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請下載最新的WinRAR軟件解壓。
- 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請聯(lián)系上傳者。文件的所有權益歸上傳用戶所有。
- 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁內(nèi)容里面會有圖紙預覽，若沒有圖紙預覽就沒有圖紙。
- 4. 未經(jīng)權益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
- 5. 人人文庫網(wǎng)僅提供信息存儲空間，僅對用戶上傳內(nèi)容的表現(xiàn)方式做保護處理，對用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對任何下載內(nèi)容負責。
- 6. 下載文件中如有侵權或不適當內(nèi)容，請與我們聯(lián)系，我們立即糾正。
- 7. 本站不保證下載資源的準確性、安全性和完整性, 同時也不承擔用戶因使用這些下載資源對自己和他人造成任何形式的傷害或損失。
最新文檔
- 【IMF】利率敏感性情景指導貨幣政策-2025.5
- 仲夏促銷活動方案
- 仿名師展示課活動方案
- 企業(yè)七夕聯(lián)誼活動方案
- 企業(yè)人才創(chuàng)新活動方案
- 企業(yè)公眾號打卡活動方案
- 企業(yè)軍訓特色活動方案
- 企業(yè)單車活動方案
- 企業(yè)品牌培育活動方案
- 企業(yè)基礎活動方案
- 危險貨物運輸安全生產(chǎn)作業(yè)規(guī)程
- ai訓練師面試題及答案
- 2024-2025學年人教版數(shù)學五年級下學期期末試卷（含答案）
- 氣象戰(zhàn)略合作協(xié)議書
- 統(tǒng)編版四年級下冊語文第八單元達標練習（含答案）
- 美國船級社（ABS）材料與焊接規(guī)范
- 酒類考試題及答案大全
- 職高歷史考試題及答案
- 土地復墾整治合同協(xié)議
- GB/T 6516-2025電解鎳
- 共享菜園可行性研究報告
評論
0/150
提交評論