HTML5移動(dòng)開(kāi)發(fā)之路(7)——坦克大戰(zhàn)游戲1_第1頁(yè)
HTML5移動(dòng)開(kāi)發(fā)之路(7)——坦克大戰(zhàn)游戲1_第2頁(yè)
HTML5移動(dòng)開(kāi)發(fā)之路(7)——坦克大戰(zhàn)游戲1_第3頁(yè)
HTML5移動(dòng)開(kāi)發(fā)之路(7)——坦克大戰(zhàn)游戲1_第4頁(yè)
HTML5移動(dòng)開(kāi)發(fā)之路(7)——坦克大戰(zhàn)游戲1_第5頁(yè)
已閱讀5頁(yè)，還剩6頁(yè)未讀， 繼續(xù)免費(fèi)閱讀

下載本文檔

版權(quán)說(shuō)明：本文檔由用戶提供并上傳，收益歸屬內(nèi)容提供方，若內(nèi)容存在侵權(quán)，請(qǐng)進(jìn)行舉報(bào)或認(rèn)領(lǐng)

文檔簡(jiǎn)介

1、 上一篇中我們介紹了關(guān)于Canvas的基礎(chǔ)知識(shí)，用Canvas繪制各種圖形和圖片，在上一篇的基礎(chǔ)上我們來(lái)做一個(gè)基于HTML5的坦克大戰(zhàn)游戲，下面我們開(kāi)始吧一、用Canvas畫(huà)出我們的坦克我們?cè)O(shè)計(jì)的坦克結(jié)構(gòu)如下圖所示，如果有的朋友有更好的設(shè)計(jì)，希望分享和交流一下。如上圖所示，我們的坦克基本上是由三個(gè)矩形和一個(gè)圓形一個(gè)線段組成，每個(gè)部件的尺寸進(jìn)行了標(biāo)記，單位為px,下面我們用上一篇中講到的知識(shí)來(lái)畫(huà)出我們的坦克，注意：我們?cè)诋?huà)坦克的時(shí)候應(yīng)該選擇一個(gè)參考點(diǎn)，這里我們選擇的是坦克的左上角，如圖所示。html view plain copy print?1. <!DOC

2、TYPE html>  2. <html>  3. <head>  4. <meta charset="utf-8"/>  5. </head>  6. <body>  7. <h1>html5-坦克大戰(zhàn)</h1>  8. <!-坦克大戰(zhàn)的戰(zhàn)場(chǎng)->  9. <canvas id=&

3、quot;tankMap" width="400px" height="300px" style="background-color:black"></canvas>  10. <script type="text/javascript">  11.     /得到畫(huà)布  12.     var&#

4、160;canvas1 = document.getElementById("tankMap");  13.       14.     /定義一個(gè)位置變量  15.     var heroX = 80;  16.     var heroY = 80;&#

5、160; 17.       18.     /得到繪圖上下文  19.     var cxt = canvas1.getContext("2d");  20.     /設(shè)置顏色  21.     cxt.fillStyle="#BA9658&q

6、uot;  22.     /左邊的矩形  23.     cxt.fillRect(heroX,heroY,5,30);  24.     /右邊的矩形  25.     cxt.fillRect(heroX+17,heroY,5,30);  26.     /畫(huà)中間的矩形  

7、27.     cxt.fillRect(heroX+6,heroY+5,10,20);  28.     /畫(huà)出坦克的蓋子  29.     cxt.fillStyle="#FEF26E"  30.     cxt.arc(heroX+11,heroY+15,5,0,360,true);  31.    &

8、#160;cxt.fill();  32.     /畫(huà)出炮筒  33.     cxt.strokeStyle="#FEF26E"  34.     cxt.lineWidth=1.5;  35.     cxt.beginPath();  36.     cxt.moveTo

9、(heroX+11,heroY+15);  37.     cxt.lineTo(heroX+11,heroY);  38.     cxt.closePath();  39.     cxt.stroke();  40.       41.       42. </scr

10、ipt>  43. </body>  44. </html>  二、怎么讓坦克動(dòng)起來(lái)？在研究怎么讓坦克動(dòng)起來(lái)之前，我們先來(lái)研究一下怎么讓一個(gè)小球通過(guò)鍵盤(pán)操作使其動(dòng)起來(lái)。首先我們給<body>標(biāo)簽添加一個(gè)監(jiān)聽(tīng)函數(shù)html view plain copy print?1. <body onkeydown="test()">  監(jiān)聽(tīng)函數(shù)html view plain copy p

11、rint?1. /現(xiàn)在按鍵盤(pán)上ASDW移動(dòng)小球  2. /說(shuō)明：當(dāng)我們按下一個(gè)鍵，實(shí)際上觸發(fā)了一個(gè)onkeydown事件  3. function test()  4.     var code = event.keyCode;  /鍵盤(pán)上字幕的ASCII碼  5.     switch(code)  6.     &

12、#160;   case 87:  7.             ballY-;  8.             break;  9.         case 68:&

13、#160; 10.             ballX+;  11.             break;  12.         case 83:  13.    &

14、#160;        ballY+;  14.             break;  15.         case 65:  16.          

15、;   ballX-;  17.             break;  18.       19.     /重新繪制  20.     drawBall();  21.   我們可以在外部定義兩個(gè)全局的變量

16、分別表示x軸和y軸的坐標(biāo)，然后通過(guò)改變ballX和ballY的值來(lái)改變小球的位置，我們用鍵盤(pán)的WDSA鍵來(lái)控制，這樣出來(lái)的效果非常奇怪，如下圖：我們?cè)诶L制的時(shí)候沒(méi)有將以前位置的小球擦除掉，在每次重新繪制前應(yīng)該先擦除一下，下面將全部代碼貼出來(lái)：html view plain copy print?1. <!DOCTYPE html>  2. <html>  3. <head>  4. <meta charset="utf-8"

17、/>  5. </head>  6. <!-當(dāng)按鍵后，去調(diào)用test->  7. <body onkeydown="test()">  8. <h1>小球上下左右移動(dòng)</h1>  9. <canvas id="test" width="400px" height="300px" style=&qu

18、ot;background-color:black">  10. </canvas>  11. <script type="text/javascript">  12.   13.     /得到畫(huà)布  14.     var canvas1 = document.getElementById("test&q

19、uot;);  15.       16.     /定義一個(gè)位置變量  17.     var ballX = 80;  18.     var ballY = 80;  19.       20.  

20、60;  /得到繪圖上下文  21.     var cxt = canvas1.getContext("2d");  22.     drawBall();  23.     function drawBall()  24.        

21、0;/畫(huà)出一個(gè)紅色的圓球  25.         cxt.beginPath();  /要注意閉合路徑  26.         cxt.fillStyle="#FF0000"  27.         cxt.arc(ballX,ballY,10,0,36

22、0,true);  28.         cxt.closePath();  29.         cxt.fill();  30.       31.       32.     /現(xiàn)在按鍵盤(pán)上ASDW移動(dòng)小球&#

23、160; 33.     /說(shuō)明：當(dāng)我們按下一個(gè)鍵，實(shí)際上觸發(fā)了一個(gè)onkeydown事件  34.     function test()  35.         var code = event.keyCode;  /鍵盤(pán)上字幕的ASCII碼  36.     &

24、#160;   switch(code)  37.             case 87:  38.                 ballY-;  39.      

25、;           break;  40.             case 68:  41.                 ballX+; &

26、#160;42.                 break;  43.             case 83:  44.             

27、    ballY+;  45.                 break;  46.             case 65:  47.      

28、0;          ballX-;  48.                 break;  49.           50.      

29、60;  /把畫(huà)布清理  51.         cxt.clearRect(0,0,400,300);  52.         /重新繪制  53.         drawBall();  54.     

30、0; 55. </script>  56. </body>  57. </html>  三、讓我們的坦克動(dòng)起來(lái)我們的坦克如果只是朝一個(gè)方向移動(dòng)的話就非常容易了，只要將上面代碼中的畫(huà)小球改成畫(huà)坦克就OK了，在讓坦克移動(dòng)之前我們首先應(yīng)該考慮的是怎么讓坦克繞著自己的中心朝各個(gè)方向轉(zhuǎn)動(dòng)的問(wèn)題。好的，再將上面的圖貼出來(lái)分析一下。詳細(xì)的計(jì)算過(guò)程我就不啰嗦了，想必大家的數(shù)學(xué)都很好，按照上圖的比例計(jì)算好各個(gè)組件的坐標(biāo)和位置，旋轉(zhuǎn)后坦克畫(huà)法如下：html view plain copy&

31、#160;print?1. /設(shè)置顏色  2. cxt.fillStyle="#BA9658"  3. /上邊的矩形  4. cxt.fillRect(tank.x-4,tank.y+4,30,5);  5. /下邊的矩形  6. cxt.fillRect(tank.x-4,tank.y+17+4,30,5);  7. /畫(huà)中間的矩形  8. cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10); 

32、; 9. /畫(huà)出坦克的蓋子  10. cxt.fillStyle="#FEF26E"  11. cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  12. cxt.fill();  13. /畫(huà)出炮筒  14. cxt.strokeStyle="#FEF26E"  15. cxt.lineWidth=1.5;  16. cxt.beginPath(); 

33、 17. cxt.moveTo(tank.x+15-4,tank.y+11+4);  18. if(tank.direct=1)         /只是炮筒的方向不同  19.     cxt.lineTo(tank.x+30-4,tank.y+11+4);  20. else  21.     cxt.lineTo(tank.x-4,t

34、ank.y+11+4);  22.   23. cxt.closePath();  24. cxt.stroke();  好了現(xiàn)在我們發(fā)現(xiàn)坦克朝向左邊和右邊僅僅只有炮筒的方向不同，同理朝向上邊和下邊也僅僅只有炮筒的方向不同，這時(shí)候我們可以將四個(gè)方向分為兩種情況，再在各個(gè)小情況中做處理。同時(shí)用OO的思想將代碼進(jìn)行了封裝，代碼如下：html view plain copy print?1. <!DOCTYPE html>  2. <html&

35、gt;  3. <head>  4. <meta charset="utf-8"/>  5. </head>  6. <body onkeydown="getCommand();">  7. <h1>html5-坦克大戰(zhàn)</h1>  8. <!-坦克大戰(zhàn)的戰(zhàn)場(chǎng)->  9. <canvas id=&q

36、uot;tankMap" width="400px" height="300px" style="background-color:black"></canvas>  10. <script type="text/javascript">  11.     /定義一個(gè)Hero類(后面還要改進(jìn)）  12.    

37、; /x表示坦克的橫坐標(biāo)  13.     /y表示縱坐標(biāo)  14.     /direct表示方向  15.     function Hero(x,y,direct)  16.         this.x=x;  17.     &#

38、160;   this.y=y;  18.         this.speed=1;  19.         this.direct=direct;  20.         /上移  21.     &#

39、160;   this.moveUp=function()  22.             this.y-=this.speed;  23.             this.direct=0;  24.      &

40、#160;    25.         /右移  26.         this.moveRight=function()  27.             this.x+=this.speed;  28. 

41、0;           this.direct=1;  29.           30.         /下移  31.         this.moveDown=function(

42、)  32.             this.y+=this.speed;  33.             this.direct=2;  34.           35.  

43、0;      /左移  36.         this.moveLeft=function()  37.             this.x-=this.speed;  38.         

44、    this.direct=3;  39.           40.       41.   42.   43.     /得到畫(huà)布  44.     var canvas1 = document.get

45、ElementById("tankMap");  45.     /得到繪圖上下文  46.     var cxt = canvas1.getContext("2d");  47.       48.     /我的tank  49.   

46、0; /規(guī)定0向上、1向右、2向下、3向左  50.     var hero = new Hero(40,40,0);  51.     drawTank(hero);  52.     /繪制坦克  53.     function drawTank(tank)  54. &

47、#160;       /考慮方向  55.         switch(tank.direct)  56.             case 0:     /向上  57.   

48、0;         case 2:     /向下  58.                 /設(shè)置顏色  59.            

49、     cxt.fillStyle="#BA9658"  60.                 /左邊的矩形  61.                 cxt.fil

50、lRect(tank.x,tank.y,5,30);  62.                 /右邊的矩形  63.                 cxt.fillRect(tank.x+17,tank.y,5,30); &#

51、160;64.                 /畫(huà)中間的矩形  65.                 cxt.fillRect(tank.x+6,tank.y+5,10,20);  66.     

52、;            /畫(huà)出坦克的蓋子  67.                 cxt.fillStyle="#FEF26E"  68.          

53、0;      cxt.arc(tank.x+11,tank.y+15,5,0,360,true);  69.                 cxt.fill();  70.              

54、60;  /畫(huà)出炮筒  71.                 cxt.strokeStyle="#FEF26E"  72.                 cxt.lineWidth=1.5;

55、60; 73.                 cxt.beginPath();  74.                 cxt.moveTo(tank.x+11,tank.y+15);  75.   

56、60;             if(tank.direct=0)         /只是炮筒的方向不同  76.                     cx

57、t.lineTo(tank.x+11,tank.y);  77.                 else  78.                     cxt.lineTo(tank.x+11,

58、tank.y+30);  79.                   80.                 cxt.closePath();  81.      

59、60;          cxt.stroke();  82.                 break;  83.             case 1: 

60、 84.             case 3:  85.                 /設(shè)置顏色  86.             &

61、#160;   cxt.fillStyle="#BA9658"  87.                 /上邊的矩形  88.                 cxt.fillRect(t

62、ank.x-4,tank.y+4,30,5);  89.                 /下邊的矩形  90.                 cxt.fillRect(tank.x-4,tank.y+17+4,30,5); &

63、#160;91.                 /畫(huà)中間的矩形  92.                 cxt.fillRect(tank.x+5-4,tank.y+6+4,20,10);  93.    

64、             /畫(huà)出坦克的蓋子  94.                 cxt.fillStyle="#FEF26E"  95.          

65、;       cxt.arc(tank.x+15-4,tank.y+11+4,5,0,360,true);  96.                 cxt.fill();  97.             

66、    /畫(huà)出炮筒  98.                 cxt.strokeStyle="#FEF26E"  99.                 cxt.lineWidt

67、h=1.5;  100.                 cxt.beginPath();  101.                 cxt.moveTo(tank.x+15-4,tank.y+11+4);  102.

68、                 if(tank.direct=1)         /只是炮筒的方向不同  103.                  

69、60;  cxt.lineTo(tank.x+30-4,tank.y+11+4);  104.                 else  105.                    &

70、#160;cxt.lineTo(tank.x-4,tank.y+11+4);  106.                   107.                 cxt.closePath();  108. 

71、60;               cxt.stroke();  109.                 break;    110.           111.      

溫馨提示

  • 1. 本站所有資源如無(wú)特殊說(shuō)明，都需要本地電腦安裝OFFICE2007和PDF閱讀器。圖紙軟件為CAD,CAXA,PROE,UG,SolidWorks等.壓縮文件請(qǐng)下載最新的WinRAR軟件解壓。
  • 2. 本站的文檔不包含任何第三方提供的附件圖紙等，如果需要附件，請(qǐng)聯(lián)系上傳者。文件的所有權(quán)益歸上傳用戶所有。
  • 3. 本站RAR壓縮包中若帶圖紙，網(wǎng)頁(yè)內(nèi)容里面會(huì)有圖紙預(yù)覽，若沒(méi)有圖紙預(yù)覽就沒(méi)有圖紙。
  • 4. 未經(jīng)權(quán)益所有人同意不得將文件中的內(nèi)容挪作商業(yè)或盈利用途。
  • 5. 人人文庫(kù)網(wǎng)僅提供信息存儲(chǔ)空間，僅對(duì)用戶上傳內(nèi)容的表現(xiàn)方式做保護(hù)處理，對(duì)用戶上傳分享的文檔內(nèi)容本身不做任何修改或編輯，并不能對(duì)任何下載內(nèi)容負(fù)責(zé)。
  • 6. 下載文件中如有侵權(quán)或不適當(dāng)內(nèi)容，請(qǐng)與我們聯(lián)系，我們立即糾正。
  • 7. 本站不保證下載資源的準(zhǔn)確性、安全性和完整性, 同時(shí)也不承擔(dān)用戶因使用這些下載資源對(duì)自己和他人造成任何形式的傷害或損失。

最新文檔

評(píng)論

0/150

提交評(píng)論