上一篇我們介紹了關於Canvas的基礎知識,用Canvas繪製各種圖形和圖片,在上一篇的基礎上我們來做一個基於HTML5的坦克大戰遊戲,下面我們開始吧
一、用Canvas畫出我們的坦克車
我們設計的坦克結構如下圖所示,如果有的朋友有更好的設計,希望分享並交流一下。
如上圖所示,我們的坦克基本上是由三個矩形和一個圓形一個線段組成,每個部件的尺寸進行了標記,單位為px,下面我們用上一篇中講到的知識來畫出我們的坦克,注意:我們在畫坦克的時候應該選擇一個參考點,這裡我們選擇的是坦克的左上角,如圖所示。
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> </head> <body> <h1>html5-坦克大战</h1> <!--坦克大战的战场--> <canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas> <script type="text/javascript"> //得到画布 var canvas1 = document.getElementById("tankMap"); //定义一个位置变量 var heroX = 80; var heroY = 80; //得到绘图上下文 var cxt = canvas1.getContext("2d"); //设置颜色 cxt.fillStyle="#BA9658"; //左边的矩形 cxt.fillRect(heroX,heroY,5,30); //右边的矩形 cxt.fillRect(heroX+17,heroY,5,30); //画中间的矩形 cxt.fillRect(heroX+6,heroY+5,10,20); //画出坦克的盖子 cxt.fillStyle="#FEF26E"; cxt.arc(heroX+11,heroY+15,5,0,360,true); cxt.fill(); //画出炮筒 cxt.strokeStyle="#FEF26E"; cxt.lineWidth=1.5; cxt.beginPath(); cxt.moveTo(heroX+11,heroY+15); cxt.lineTo(heroX+11,heroY); cxt.closePath(); cxt.stroke(); </script> </body> </html>
二、怎麼讓坦克動起來?
在研究怎麼讓坦克動起來之前,我們先來研究一下怎麼讓一個小球透過鍵盤操作使其動起來。
首先我們為
標籤新增一個監聽函數<body onkeydown="test()">
監聽函數
//现在按键盘上ASDW移动小球 //说明:当我们按下一个键,实际上触发了一个onkeydown事件 function test(){ var code = event.keyCode; //键盘上字幕的ASCII码 switch(code){ case 87: ballY--; break; case 68: ballX++; break; case 83: ballY++; break; case 65: ballX--; break; } //重新绘制 drawBall(); }
我們可以在外部定義兩個全域的變數分別表示x軸和y軸的座標,然後透過改變ballX和ballY的值來改變小球的位置,我們用鍵盤的WDSA鍵來控制,這樣出來的效果非常奇怪,如下圖:
我們在繪製的時候沒有將以前位置的小球擦除掉,在每次重新繪製前應該先擦除一下,下面將全部程式碼貼出來:
<body onkeydown="test()">小球上下左右移动