HTML5製作坦克大戰遊戲+Canvas繪製基礎圖形——學習筆記一
阿新 • • 發佈：2019-01-23
1.離線儲存：1)儲存到本地，可以離線瀏覽網頁 2）不用cookie(安全性不太高，來回互動的資料量比較大)
2.語音識別
3.影象識別
4.HTML5遊戲
5.CSS3的強大之處：動畫和各種選擇器
6.Stoke：畫線
fill:填充
7.Canvas相關的程式碼：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>畫圖</title> </head> <body> <canvas執行效果：id="cav" width="500px" height="500px" style="border:1px solid red"> </canvas> <script type="text/javascript"> var canvas1=document.getElementById("cav"); var ctx=canvas1.getContext("2d"); // 畫線 ctx.moveTo(20,20); //設定起始點的位置 ctx.lineTo(20,100); //結束點的位置 ctx.stroke(); //畫線 // 三角形--路徑 ctx.beginPath(); //開啟一個新的路徑 ctx.moveTo(40,20); //設定起始點 ctx.lineTo(40,100); ctx.lineTo(80,100); ctx.closePath(); //閉合路徑 ctx.fill(); //填充，要把路徑閉合以後再填充 //ctx.stroke(); //空心的三角形，沒有內容填充 // 畫矩形 ctx.strokeRect(100,20,100,100); //畫出無填充矩形 ctx.fillStyle="#fdd"; //改變填充矩形的填充色，要改變填充色的時候就呼叫畫筆的fillStyle屬性就可以了ctx.fillRect(250,30,50,50); //畫出填充矩形，預設填充色為黑色 // 畫圓 ctx.beginPath(); ctx.arc(350,80,45,0,360,false); //注意最後一個引數可以不寫或者為false，如果為true的話就會出問題 ctx.closePath(); ctx.stroke(); //路徑閉合之後再畫線 // 繪製填充的圓 ctx.beginPath(); ctx.arc(50,200,45,0,360,false); //注意最後一個引數可以不寫或者為false，如果為true的話就會出問題 ctx.closePath(); ctx.stroke(); //路徑閉合之後再畫線 ctx.fillStyle="yellow"; //注意要先設定顏色再填充，因為已經填充好了的圓是沒法修改顏色的 ctx.fill(); // 畫圖片 var img=new Image(); //建立圖片物件 img.src="images/daiyu.jpg"; //給定路徑 //要先載入成功圖片再畫圖片的位置 img.onload=function(){ ctx.drawImage(img,100,180,200,150); //注意此處的img不能忘，忘了就顯示不出來 } // 在畫布上寫字 var text="林黛玉"; ctx.fillStyle="#330033"; //設定字型顏色 ctx.font="30px 微軟雅黑"; //設定大小和字型 ctx.fillText(text,350,300); //填寫字型的位置 </script> </body> </html>
8.畫圖片是比較耗資源的。
9.JavaScript事件處理機制、事件監聽、閉包
清屏
示例程式碼：（小球移動）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>JavaScript事件處理機制</title> </head> <!--當鍵盤按下之後，呼叫test方法--> <body onkeydown="test()"> <h1>小球上下左右移動</h1> <canvas id="test" width="400px" height="400px" style="background-color: black;"></canvas> <script type="text/javascript"> var canvas=document.getElementById("test"); var cxt=canvas.getContext("2d"); var BallX=30; var BallY=30; drawBall(); function drawBall(){ // 畫出紅色小球 cxt.beginPath(); cxt.fillStyle="red"; cxt.arc(BallX,BallY,10,0,360); cxt.closePath(); //畫圖時一定要開始和閉合路徑，防止出現一些奇怪的問題 cxt.fill(); } // 用鍵盤上的W,S,A,D這四個鍵來代表上下左右 function test(){ //如何知道使用者按下的是哪個鍵呢？通過event.KeyCode來判斷鍵盤的ASCII值 var code=event.keyCode; switch (code){ case 87: //W鍵 BallY--; // alert("向上"); break; case 68: //D鍵 BallX++; // alert("向右"); break; case 83: //S鍵 BallY++; // alert("向下"); break; case 65: //A鍵 BallX--; // alert("向左"); break; } cxt.clearRect(0,0,400,400); //清空畫布 drawBall(); //畫布清空後重新繪製小球的位置 } </script> </body> </html>
執行效果：
注意：當按下W.S、A.D這幾個鍵後，小球會隨之上下左右移動
10.OOP：面向物件程式設計
11.最初的坦克大戰版本：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>坦克大戰遊戲</title> </head> <body> <h1 style="background-color: ">坦克大戰練習 </h1> <canvas id="tankBackgr" width="400px" height="400px" style="background-color: black;"></canvas> <script type="text/javascript"> //得到畫布 var canvas=document.getElementById("tankBackgr"); //得到上下文，相當於畫筆 var ctx=canvas.getContext("2d"); // 我的坦克myTank(等所有的橫縱座標給定了以後，再替換成下面的兩個引數) var myTankX=30; var myTankY=30; // 畫出自己的坦克 ctx.fillStyle="#DED284"; //給定矩形的顏色 ctx.fillRect(myTankX,myTankY,5,30); //畫出左邊的矩形 ctx.fillRect(myTankX+15,myTankY,5,30); //畫出右側的矩形 //畫出中間的矩形（中間的矩形寬高為10*20，為了讓中間的矩形和兩側的矩形之間有空隙，將左右兩邊都空出一個畫素，所以x軸的位置 // 向右移動了一個畫素，左邊就空出1px,寬度減少了2px,這樣右邊就又空出了1px） ctx.fillRect(myTankX+6,myTankY+5,8,20); ctx.fillStyle="#FFFA7E"; //圓的填充顏色 ctx.arc(myTankX+10,myTankY+15,4,0,360); //畫出坦克的蓋（30+10=30+5+1+8/2）（30+15=30+5+20/2） ctx.fill(); //填充圓 // 畫出炮筒的線條 ctx.beginPath(); ctx.moveTo(myTankX+10,myTankY+15); //線條的起始位置為圓心的位置 ctx.lineTo(myTankX+10,myTankY); //線條的結束位置 ctx.strokeStyle="#FFFA7E"; ctx.lineWidth=2; //設定線條的寬度（粗細） ctx.closePath(); ctx.stroke(); </script> </body> </html>
12.坦克版本2之自己的坦克（實現移動、方向轉換功能）
示例程式碼：（TankBattle.html）
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>坦克大戰遊戲</title> </head> <body onkeydown="getCommand();"> <h1>坦克大戰練習 </h1> <canvas id="tankBg" width="400px" height="400px" style="background-color: black;"></canvas> <!--把js檔案引入--> <script type="text/javascript" src="js/TankBattle.js"></script> <script type="text/javascript"> var canvas=document.getElementById("tankBg"); //得到畫布 var ctx=canvas.getContext("2d"); //得到上下文，相當於畫筆 var myTank=new MyTank(30,30,0); //用0,1,2,3,4分別表示上、右、下、左,此處的0位向上 drawTank(myTank); //接受使用者的鍵盤輸入 function getCommand(){ var code=event.keyCode; //通過event.KeyCode來判斷鍵盤的ASCII值 switch (code){ case 87: //W鍵 myTank.moveUp(); break; case 68: //D鍵 myTank.moveRight(); break; case 83: //S鍵 myTank.moveDown(); break; case 65: //A鍵 myTank.moveLeft(); break; } //注意是ctx,而不是cxt，千萬別寫錯了 ctx.clearRect(0,0,400,400); //清空畫布,這一步是不能少的 drawTank(myTank); //畫布清空後重新繪製坦克的位置 } </script> </body> </html>JS檔案（TankBattle.js）
//x表示坦克的橫座標，y表示坦克的縱座標，dirc表示移動方向 function MyTank(x,y,direc){ this.x=x; this.y=y; this.speed=1; this.direc=direc; //向上移動 this.moveUp=function(){ this.y-=this.speed; this.direc=0 } //向右移動 this.moveRight=function(){ this.x+=this.speed; this.direc=1; } //向下移動 this.moveDown=function(){ this.y+=this.speed; this.direc=2; } //向左移動 this.moveLeft=function(){ this.x-=this.speed; this.direc=3; } } // 畫坦克 function drawTank(tank){ //考慮方向 switch (tank.direc){ case 0: case 2: ctx.fillStyle="#DED284"; //給定矩形的顏色 ctx.fillRect(tank.x,tank.y,5,30); //畫出左邊的矩形 ctx.fillRect(tank.x+15,tank.y,5,30); //畫出右側的矩形 //畫出中間的矩形（中間的矩形寬高為10*20，為了讓中間的矩形和兩側的矩形之間有空隙，將左右兩邊都空出一個畫素，所以x軸的位置 // 向右移動了一個畫素，左邊就空出1px,寬度減少了2px,這樣右邊就又空出了1px） ctx.fillRect(tank.x+6,tank.y+5,8,20); ctx.fillStyle="#FFFA7E"; //圓的填充顏色 ctx.arc(tank.x+10,tank.y+15,4,0,360); //畫出坦克的蓋（30+10=30+5+1+8/2）（30+15=30+5+20/2） ctx.fill(); //填充圓 // 畫出炮筒的線條 ctx.beginPath(); ctx.moveTo(tank.x+10,tank.y+15); //線條的起始位置為圓心的位置 if(tank.direc==0){ ctx.lineTo(tank.x+10,tank.y); //線條的結束位置 }else if(tank.direc==2){ ctx.lineTo(tank.x+10,tank.y+30); } ctx.strokeStyle="#FFFA7E"; ctx.lineWidth=2; //設定線條的寬度（粗細） ctx.closePath(); ctx.stroke(); break; case 1: //右 case 3: //左 // 畫出自己的坦克 ctx.fillStyle="#DED284"; //給定矩形的顏色 ctx.fillRect(tank.x,tank.y,30,5); //畫出左邊的矩形 ctx.fillRect(tank.x,tank.y+15,30,5); //畫出右側的矩形 //畫出中間的矩形（中間的矩形寬高為10*20，為了讓中間的矩形和兩側的矩形之間有空隙，將左右兩邊都空出一個畫素，所以x軸的位置 // 向右移動了一個畫素，左邊就空出1px,寬度減少了2px,這樣右邊就又空出了1px） ctx.fillRect(tank.x+5,tank.y+6,20,8); ctx.fillStyle="#FFFA7E"; //圓的填充顏色 ctx.arc(tank.x+15,tank.y+10,4,0,360); //畫出坦克的蓋（30+10=30+5+1+8/2）（30+15=30+5+20/2） ctx.fill(); //填充圓 // 畫出炮筒的線條 ctx.beginPath(); ctx.moveTo(tank.x+15,tank.y+10); //向右 if(tank.direc==1){ ctx.lineTo(tank.x+30,tank.y+10); }else if(tank.direc==3){ //向左 ctx.lineTo(tank.x,tank.y+10); } ctx.strokeStyle="#FFFA7E"; ctx.lineWidth=2; //設定線條的寬度（粗細） ctx.closePath(); ctx.stroke(); break; } }執行效果：
當按下鍵盤上的D鍵後，向右移動的效果
注：學習視訊來自傳智播客公開課