當前位置：首頁 > 前端技术 > HTML >内容正文

HTML

学习HTML5之塔克大战（详细记录）

發布時間：2025/7/14 HTML 21 豆豆

生活随笔收集整理的這篇文章主要介紹了学习HTML5之塔克大战（详细记录）小編覺得挺不錯的,現在分享給大家,幫大家做個參考.

????????? 學了一些HTML5的一些基本知識，開始學習制作......

????????? 介紹一些基本知識：? px(像素)---》1px等于多少？ 1cm or 2cm -->no? no no!

????????? (1).像素是一個密度單位：無法用度量....

???????? (2)? stoke--->畫線??? fill--->填充

??? ? ? (3)再畫圖形時，一定記得路徑閉合...

??????? (4)在繪制圖片時:需要注意的是：先加載圖片，在進行繪制

????????? 繪制照片的一些基本步驟：

????????? （1）創建image對象?? new Image();

????????? （2）指定圖片（或者路徑）? src=" "

????????? （3）先加載，再進行一段繪制? dirawImage();

???? 代碼詳細的注釋：?

??????????

1 <html> 2 <head> 3 4 </head> 5 <body> 6  7 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 8 <script type="text/javascript"> 9  10 var canvas_1=document.getElementById("gxjun"); 11 var cnt=canvas_1.getContext("2d"); 12 //alert(cxt); 13 //moveto設置點位置 14 cnt.moveTo(20,20); 15 //有上面那個點為起點設置第二個點位置 16 cnt.lineTo(20,90); 17 //將兩個點連接起來 18 cnt.stroke(); 19 //畫出一個填充的三角形.-->路徑 20 //開始新路徑 21 cnt.beginPath(); 22 cnt.moveTo(40,20); 23 cnt.lineTo(40,90); 24 cnt.lineTo(80,90); 25 //閉合路徑，把最后這個點和第一點MoveTO()閉合 26 cnt.closePath(); 27 //cnt.stroke(); 28 //填充矩形由于三角形閉合了，所以填充了三角形 29 //注意的一點是：只有矩形才會不用路徑閉合 30 cnt.fill(); 31 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height); 32 //填充矩形 33 cnt.fillStyle="#004DFF"; //填充顏色 34 cnt.fillRect(140,20,30,50); 35 //畫其他圖形時一定的記得開始和閉合 36 cnt.beginPath(); 37 //如何話圓形 arc函數 38 //這些參數的含義(x,y,radius,開始度數,結束的度針還是逆時 39 cnt.fillStyle="#FF0000"; 40 cnt.arc(220,40,20,0,360,false); cnt.closePath(); 41 cnt.stroke(); 42 cnt.fill(); 43 //畫圖像 44 var img_1=new Image(); 45 img_1.src="10.jpg"; 46 //加載完畢后再繪圖.... 47 img_1.onload=function(){ 48 //(object,x,y,weidth,height) 49 cnt.drawImage(img_1,20,100,155,220); 50 } 51 </script> 52 </body> 53 </html>

效果圖：

???

? 有關Javascript寫字體：

??代碼：

???

1 <html> 2 <head》</head> 3 <body> 4  5 <canvas id="gxjun"width="500px"height="400px"style="border: 2px solid blue"></canvas> 6 <script type="text/javascript"> 7  8 var canvas_1=document.getElementById("gxjun"); 9 var cnt=canvas_1.getContext("2d"); 10 //alert(cxt); 11 //moveto設置點位置 12 cnt.moveTo(20,20); 13 //有上面那個點為起點設置第二個點位置 14 cnt.lineTo(20,90); 15 //將兩個點連接起來 16 cnt.stroke(); 17 //畫出一個填充的三角形.-->路徑 18 //開始新路徑 19 cnt.beginPath(); 20 cnt.moveTo(40,20); 21 cnt.lineTo(40,90); 22 cnt.lineTo(80,90); 23 //閉合路徑，把最后這個點和第一點MoveTO()閉合 24 cnt.closePath(); 25 //cnt.stroke(); 26 //填充矩形由于三角形閉合了，所以填充了三角形 27 //注意的一點是：只有矩形才會不用路徑閉合 28 cnt.fill(); 29 cnt.strokeRect(100,20,30,50); //strokeRect(x,y,weidth,height); 30 //填充矩形 31 cnt.fillStyle="#004DFF"; //填充顏色 32 cnt.fillRect(140,20,30,50); 33 //畫其他圖形時一定的記得開始和閉合 34 cnt.beginPath(); 35 //如何話圓形 arc函數 36 //這些參數的含義(x,y,radius,開始度數,結束的度針還是逆時 37 cnt.fillStyle="#FF0000"; 38 cnt.arc(220,40,20,0,360,false); cnt.closePath(); 39 cnt.stroke(); 40 cnt.fill(); 41 //畫圖像 42 var img_1=new Image(); 43 img_1.src="10.jpg"; 44 //加載完畢后再繪圖.... 45 img_1.οnlοad=function(){ 46 //(object,x,y,weidth,height) 47 cnt.drawImage(img_1,20,100,155,220); 48 //在畫布上寫字 49 //設置字體的大小 50 var text="火影忍著之戰國時代" 51 cnt.fillStyle="#0000FF"; 52 cnt.font="30px 華文彩云"; 53 cnt.fillText(text,200,200); 54 } 55 </script> 56 </body> 57 </html>> View Code

效果圖：

1.畫坦克的思路：
?? 以坦克的左上角為參照點，然后畫出坦克的其它部分。這樣的
好處是當左上角的坐標變換，坦克就會整體移動。（畫出圖片時比較耗費cpu）

畫出第一輛坦克..

代碼：

1 <!DOCTYPE html> 2 <html> 3 <head> 4  5 </head> 6 <body> 7 <h1>經典坦克大戰</h1> 8  9 <canvas id="tankMap" width="600px" height="500px" 10 style="background-color: black; border: 2px solid red"></canvas> 11 <script type="text/javascript"> 12 //得到畫布 13 var canvas1=document.getElementById("tankMap"); 14 //得到繪圖上下文（即畫筆） 15 var cxt=canvas1.getContext("2d"); 16 //我的坦克hero 17 var herox=130; 18 var heroy=30; 19 // alert(cxt); 20 //設置顏色 21 cxt.fillStyle="#DED284"; 22 //先畫出左面的矩形 23 cxt.fillRect(herox,heroy,5,30); 24 //平移畫出右邊的矩形 25 cxt.fillRect(herox+15,heroy,5,30); 26 //畫出中間矩形 27 cxt.fillRect(herox +6,heroy + 5,8,20); 28 //畫出坦克的蓋子 29 cxt.fillStyle="#FFD972"; 30 cxt.arc(herox +10,heroy +15,4,0,360,true); 31 cxt.fill(); 32 //畫出炮筒（直線） 33 cxt.strokeStyle="#FFD972"; 34 cxt.lineWidth=1.5; 35 cxt.beginPath(); 36 cxt.moveTo(herox +10,heroy +15); 37 cxt.lineTo(herox +10,heroy); 38 cxt.closePath(); 39 cxt.stroke(); 40 cxt.fillStyle="#FFD972"; 41 cxt.arc(herox +10,heroy,1.5,0,360,true); 42 cxt.fill(); 43 </script> 44 </body> 45 </html> View Code

效果圖：

附加一個小功能，讓小球開始移動....

代碼：

1 <!DOCTYPE html> 2 <html> 3 <head> 4 //meta charset="utf-8"; 5 </head> 6  7 <body onkeydown="test()"> 8 <h1>小球上下左右移動</h1> 9 <canvas id="test" width="400px" height="300px" 10 style="background-color:black; border: 2px solid blue"> 11 </canvas> 12 <script type="text/javascript"> 13 //得到畫布 14 var canvas1=document.getElementById("test"); 15 //得到繪圖上下文（畫筆） 16 var cxt= canvas1.getContext("2d"); 17 //畫出紅色圓球 18 var ballx=30; 19 var bally=30; 20 function drawball() 21 { 22 cxt.beginPath(); 23 cxt.fillStyle="#FF0000"; 24 cxt.arc(ballx,bally,10,0,360,false); 25 cxt.closePath(); 26 cxt.fill(); 27 } 28 //alert(cxt); 29 //現在我摁下wsaf依次表示上下左右- 30 //說明：當我們按下一個建，實際上觸發一個onkeydowm 31 drawball(); 32 function test(){ 33 //我怎么知道，玩家按下的是什么鍵 34 //說明當按下鍵后，事件---》event對象----》事件處理函數（） 35 var code=event.keyCode; 36 //鍵盤上的每一個字母對應的是ascii 37 switch(code) 38 { 39 case 87: bally--; break; 40 case 68: ballx++; break; 41 case 83: bally++; break; 42 case 65: ballx--; break; 43 } 44 cxt.clearRect(0,0,400,300); 45 drawball(); 46 } 47 </script> 48 </body> 49 </html> View Code

效果如圖：

好了，又小球衍生出第一輛坦克....

代碼：

1 <!DOCTYPE html> 2 <html> 3 <head> 4  5 </head> 6 <body onkeydown="getCommand()"> 7 <h1>經典坦克大戰</h1> 8  9 <canvas id="tankMap" width="600px" height="500px" 10 style="background-color: black; border: 2px solid red"></canvas> 11 <script type="text/javascript"> 12 //定義一個HEro類 13 // x,y表示坐標 direct表示方向 14 function Hero(x,y,direct){ 15 this.x=x; 16 this.y=y; 17 this.direct=direct; 18 this.speed=1; 19 //上移 20 this.moveUp=function() { 21 this.y-=this.speed; 22 this.direct=0; 23 } 24 this.moveDown=function(){ 25 this.y+=this.speed; 26 this.direct=2; 27 } 28 this.moveRight=function(){ 29 this.x+=this.speed; 30 this.direct=1; 31 } 32 this.moveLeft=function() { 33 this.x-=this.speed; 34 this.direct=3; //改變方向 35 } 36 } 37 //得到畫布 38 var canvas1=document.getElementById("tankMap"); 39 //得到繪圖上下文（即畫筆） 40 var cxt=canvas1.getContext("2d"); 41 //我的坦克hero 42 // var herox=130; 43 //var heroy=30; 44 // alert(cxt); 45 //坦克的方向:0表示向上,1表示向右,2表示下,3表示左 46 var hero = new Hero(40,40,0); 47 //把繪制坦克封裝成為一個函數 48 function drawTank(tank){ 49 50 switch(tank.direct) 51 { 52 case 0: //塔克 53 case 2: 54 //設置顏色 55 cxt.fillStyle="#BA9658" ; 56 //先畫出左面的矩形 57 cxt.fillRect(tank.x,tank.y,5,30); 58 //平移畫出右邊的矩形 59 cxt.fillRect(tank.x+15,tank.y,5,30); 60 //畫出中間矩形 61 cxt.fillRect(tank.x +5,tank.y+ 5,10,20); 62 //畫出坦克的蓋子 63 cxt.fillStyle="#FEF26E" ; 64 cxt.arc(tank.x +10,tank.y +15,4,0,360,false); 65 cxt.fill(); 66 //畫出炮筒（直線） 67 cxt.strokeStyle="#FEF26E" ; 68 cxt.lineWidth=1.5; 69 cxt.beginPath(); 70 cxt.moveTo(tank.x +10,tank.y +15); 71 var cnt=0; 72 if(tank.direct==0) cnt=0; 73 else if(tank.direct==2)cnt=30; 74 cxt.lineTo(tank.x +10,tank.y+cnt); 75 break; 76 case 1: 77 case 3: 78 //設置顏色 79 cxt.fillStyle="#BA9658" ; 80 //先畫出左面的矩形 81 cxt.fillRect(tank.x,tank.y,30,5); 82 //平移畫出右邊的矩形 83 cxt.fillRect(tank.x,tank.y+15,30,5); 84 //畫出中間矩形 85 cxt.fillRect(tank.x +6,tank.y+ 5,20,10); 86 //畫出坦克的蓋子 87 cxt.fillStyle="#FEF26E" ; 88 cxt.arc(tank.x +15,tank.y +10,4,0,360,false); 89 cxt.fill(); 90 //畫出炮筒（直線） 91 cxt.strokeStyle="#FEF26E" ; 92 cxt.lineWidth=1.5; 93 cxt.beginPath(); 94 cxt.moveTo(tank.x +15,tank.y +10); 95 if(tank.direct==1) 96 cxt.lineTo(tank.x +30,tank.y+10); 97 else if(tank.direct==3) 98 cxt.lineTo(tank.x,tank.y+10); 99 // cxt.fillStyle="#FEF26E" ; 100 //cxt.beginPath(); 101 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false); 102 //cxt.closePath(); 103 //cxt.fill(); 104 105 106 break; 107 108 } 109 cxt.closePath(); 110 cxt.stroke(); 111 112 113 } 114 drawTank(hero); 115 //這是一個接收按鍵的函數 116 function getCommand(){ 117 //alert("汗啊"); 118 var code = event.keyCode; 119 // alert(code); 120 switch(code) 121 { 122 // 向上 123 case 38: 124 case 87: hero.moveUp(); break; 125 //向左 126 case 37: 127 case 65: hero.moveLeft(); break; 128 //向下 129 case 40: 130 case 83: hero.moveDown(); break; 131 //向右 132 case 39: 133 case 68: hero.moveRight(); break; 134 } 135 cxt.clearRect(0,0,600,500); 136 drawTank(hero); 137 } 138 </script> 139 </body> 140 </html> View Code

效果圖：

當然想韓老師所說的我們可以將其分為兩個文件。一個js文件和一個html文件：

其實內容沒有任何變化，就只是將其拆分為兩部分只是為了看起來方便一些》。。。

1.tankgame2.js文件

1 // x,y表示坐標 direct表示方向 2 function Hero(x,y,direct){ 3 this.x=x; 4 this.y=y; 5 this.direct=direct; 6 this.speed=1; 7 //上移 8 this.moveUp=function() { 9 this.y-=this.speed; 10 this.direct=0; 11 } 12 this.moveDown=function(){ 13 this.y+=this.speed; 14 this.direct=2; 15 } 16 this.moveRight=function(){ 17 this.x+=this.speed; 18 this.direct=1; 19 } 20 this.moveLeft=function() { 21 this.x-=this.speed; 22 this.direct=3; //改變方向 23 } 24 } 25 26 //把繪制坦克封裝成為一個函數 27 function drawTank(tank){ 28 29 switch(tank.direct) 30 { 31 case 0: //塔克 32 case 2: 33 //設置顏色 34 cxt.fillStyle="#BA9658" ; 35 //先畫出左面的矩形 36 cxt.fillRect(tank.x,tank.y,5,30); 37 //平移畫出右邊的矩形 38 cxt.fillRect(tank.x+15,tank.y,5,30); 39 //畫出中間矩形 40 cxt.fillRect(tank.x +5,tank.y+ 5,10,20); 41 //畫出坦克的蓋子 42 cxt.fillStyle="#FEF26E" ; 43 cxt.arc(tank.x +10,tank.y +15,4,0,360,false); 44 cxt.fill(); 45 //畫出炮筒（直線） 46 cxt.strokeStyle="#FEF26E" ; 47 cxt.lineWidth=1.5; 48 cxt.beginPath(); 49 cxt.moveTo(tank.x +10,tank.y +15); 50 var cnt=0; 51 if(tank.direct==0) cnt=0; 52 else if(tank.direct==2)cnt=30; 53 cxt.lineTo(tank.x +10,tank.y+cnt); 54 break; 55 case 1: 56 case 3: 57 //設置顏色 58 cxt.fillStyle="#BA9658" ; 59 //先畫出左面的矩形 60 cxt.fillRect(tank.x,tank.y,30,5); 61 //平移畫出右邊的矩形 62 cxt.fillRect(tank.x,tank.y+15,30,5); 63 //畫出中間矩形 64 cxt.fillRect(tank.x +6,tank.y+ 5,20,10); 65 //畫出坦克的蓋子 66 cxt.fillStyle="#FEF26E" ; 67 cxt.arc(tank.x +15,tank.y +10,4,0,360,false); 68 cxt.fill(); 69 //畫出炮筒（直線） 70 cxt.strokeStyle="#FEF26E" ; 71 cxt.lineWidth=1.5; 72 cxt.beginPath(); 73 cxt.moveTo(tank.x +15,tank.y +10); 74 if(tank.direct==1) 75 cxt.lineTo(tank.x +30,tank.y+10); 76 else if(tank.direct==3) 77 cxt.lineTo(tank.x,tank.y+10); 78 // cxt.fillStyle="#FEF26E" ; 79 //cxt.beginPath(); 80 //cxt.arc(tank.x +10,tank.y+cnt,1.5,0,360,false); 81 //cxt.closePath(); 82 //cxt.fill(); 83 84 85 break; 86 87 } 88 cxt.closePath(); 89 cxt.stroke(); 90 91 92 }

2.html文件...

代碼：

<!DOCTYPE html> <html><head> </head><body onkeydown="getCommand()"><h1>經典坦克大戰</h1> <canvas id="tankMap" width="600px" height="500px"style="background-color: black; border: 2px solid red"></canvas><script type="text/javascript" src="tankgame2.js"></script><script type="text/javascript">//定義一個HEro類//得到畫布var canvas1=document.getElementById("tankMap");//得到繪圖上下文（即畫筆）var cxt=canvas1.getContext("2d");//我的坦克hero// var herox=130;//var heroy=30;// alert(cxt);//坦克的方向:0表示向上,1表示向右,2表示下,3表示左var hero = new Hero(40,40,0);drawTank(hero);//這是一個接收按鍵的函數function getCommand(){//alert("汗啊");var code = event.keyCode;// alert(code);switch(code){// 向上case 38:case 87: hero.moveUp(); break;//向左case 37:case 65: hero.moveLeft(); break;//向下 case 40:case 83: hero.moveDown(); break;//向右case 39:case 68: hero.moveRight(); break; }cxt.clearRect(0,0,600,500);drawTank(hero);}</script></body> </html>

效果圖還是一樣的

總結

以上是生活随笔為你收集整理的学习HTML5之塔克大战（详细记录）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。

上一篇： mysql function 与 pro
下一篇：为Process.waitFor设置超时