html5制作坦克大戰
全部html5都采用繪圖技術完成。坦克是畫出來的。（坦克，子彈，墻，水，草坪）
首先我們畫出坦克。
坦克是兩邊兩個矩形，中間一個大矩形，矩形了有一個圓，還有一根線。
畫出坦克的思路是以坦克的左上角為參照點，畫出坦克的其他部分。
這樣的好處是，當左上角的點發生改變是，坦克才能發生改變。
不使用圖片的原因就是圖片是比較耗費資源的。因為圖片的像素點很大。
tankGame1.html的代碼
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<h6>HTML5坦克大戰</h6>
<!--這是坦克大戰的戰場 -->
<canvas id="tankMap" width="400px" height="300px" style="background-color:black"></canvas>
<script type="text/javascript">
//得到畫布
var canvas1=document.getElementById("tankMap");
//得到繪圖上下文（你可以理解是畫筆）
var cxt=canvas1.getContext("2d");
//我的坦克
var heroX=130;
var heroY=130;
cxt.fillStyle="#DED284";
//韓老師使用先死-->後活
cxt.fillRect(heroX, heroY, 5, 30);
//畫出右邊的矩形
cxt.fillRect(heroX+15, heroY,5,30);
cxt.fillRect(heroX+6,heroY+5,8,20);
cxt.fillStyle="#FFD972";
cxt.arc(heroX+10, heroY+15,4,0,360,true);
cxt.fill();
//畫出炮筒
cxt.strokeStyle="#FFD972";
cxt.lineWidth=2;
cxt.beginPath();
cxt.moveTo(heroX+10, heroY+15);
cxt.lineTo(heroX+10, heroY);
cxt.stroke();
</script>
javascript時間處理機制
事件處理機制
怎樣讓小求收到鍵盤控制上下左右移動。
2.讓坦克可以上下左右移動
先補充一個知識點：javascript
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"/>
</head>
<!--當按鍵後，去調用test():-->
<body onkeydown="test()">
<canvas id="test" width="400px" height="300px" style="background-color:black">
<script type="text/javascript">
//得到畫布
var canvas1=document.getElementById("test");
var cxt = canvas1.getContext("2d");
var ballX=30;
var ballY=30;
function drawBall(){
//如果在函數中沒有定義就直接使用便利，就意味你使用的全局便利
//如果在函數中定義了才使用該變量，說明使用的是局部變量
//畫出紅色圓球
//畫圖時，要閉合路徑。
cxt.beginPath();//這句必須有
cxt.fillStyle="#FF0000";
cxt.arc(ballX,ballY,10,0,Math.PI * 2,true);
//
cxt.closePath();
cxt.fill();
}
drawBall();
//現在我按w->"向上" d="右" s="下" a="左"
//當我們按下一個鍵時，實際上觸發了一個事件，
function test(){
//怎麽知道玩家按下的是什麽鍵
//說明按下鍵後 事件--->event對象
var code=event.keyCode;
switch(code){
case 87:
ballY--;
break;
case 68:
ballX++;
break;
case 83:
ballY++;
break;
case 65:
ballX--;
break;
}
cxt.clearRect(0,0,400,300);
drawBall();
//按下的鍵實際上就是它的ascii對應的數字。
}
</script>
</canvas>
</body>
</html>
瀏覽器在請求頁面的時候可能會發出多次請求。
text/css，把它當做css文件來解析。
如果把圖片,css文件，js文件當做html來解析是會出問題的。
當請求一個帶有圖片等資源的頁面時瀏覽器會經過多次請求將頁面完整顯示。
第一次發起請求：index.html。
根據請求找到對應的index.html頁面並響應給客戶端。
解析：
客戶端解析index.html頁面，發現有圖片，再次發起請求獲取該圖片。而服務端根據請求找到響應的圖片，並響應給客戶端。
客戶端接收到圖片後，將頁面顯示在瀏覽器中。
坦克需要實時變化。
把頁面中的類和函數分別放在js中。
畫出敵人坦克的思路：
a.敵人坦克做成對象->定義EnemyTank。
Hero Enemy都可以繼承一個坦克類，因此可以抽象出一個父類。把hero和enemy的共有特點放在Tank類中，在js中，是通過對象冒充來實現繼承的。
在js中如何通過對象冒充來繼承對象。
html5制作坦克大戰