個人初學html5 canvas

時間 2019-12-14

標籤個人初學 html5 html canvas 欄目 HTML5 简体版

原文原文鏈接

---恢復內容開始---javascript

純html5+css+js實現噠css

運行效果：html

實現功能：html5

按鍵W,S,A,D,J分別控制坦克上下左右移動和發射子彈，因爲水平有限，還在努力中~目前只實現了對本身坦克行爲的控制，只畫了一顆子彈，記錄這顆子彈的座標軌跡java

源碼：canvas

源碼在這裏啦~，只用了兩個文件，衆多不足，還望指出謝謝~~~~數組

canvas.html函數

 1 <!doctype html>
 2 <html lang="en">
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>Document</title>
 6 </head>
 7 <body onkeydown="getCommand()">
 8 <h1>坦克大戰</h1>
 9 <canvas id="tankMap" width="400px" height="300px"
10 style="background-color: black">    
11 </canvas>
12 <span id="aa">個人數據：</span>
13 <script type="text/javascript" src="canvas.js"></script>
14 <script type="text/javascript">
15 
16 //畫出個人坦克
17 var can1 = document.getElementById("tankMap");
18 var ctx = can1.getContext("2d");
19 
20 //個人坦克hero
21 var hero=new Hero(240,40,0,heroColor);
22 var heroBullet=null;
23 //定義敵人的坦克，採用數組的辦法
24 var enemyTanks=new Array();
25 for (var i = 0; i < 3; i++) {
26 var enemyTank= new EnemyTank((i+1)*50,0,2,enemyColor);
27 enemyTanks[i]=enemyTank;
28 
29 drawTank(enemyTanks[i]);
30 }
31 flashTankMay();
32 //寫一個函數專門用做畫布定時刷新
33 function flashTankMay(){
34 ctx.clearRect(0,0,400,300);
35 drawTank(hero);
36 
37 //畫出個人子彈
38 drawHeroBullet();
39 
40 for (var i = 0; i < 3; i++) {
41 drawTank(enemyTanks[i]);
42 }
43 //alert("flashTankMay()被調用");
44 }
45 
46 //接收用戶按鍵函數
47 function getCommand(){
48 
49 var code = event.keyCode;
50 
51 switch(code){
52 case 87:
53 hero.moveUp();
54 //this.direct=0;
55 break;
56 case 68:
57 hero.moveRight();
58 // this.direct=1;
59 
60 break;
61 case 83:
62 hero.moveDown();
63 // this.direct=2;
64 
65 break;
66 case 65:
67 hero.moveLeft();
68 // this.direct=3;
69 
70 break;
71 case 74:
72 hero.shotEnemy();
73 break;
74 }
75 }
76 window.setInterval("flashTankMay()",200);
77 </script>
78 </body>
79 </html>

canvas.jsthis

  1 //定義兩個顏色數組
  2  var heroColor=new Array("#ba9658","#fef26e");
  3  var enemyColor=new Array("#00a2b5","#00fefe");
  4 function Bullet(x,y,direct,speed){
  5             this.x=x;
  6             this.y=y;
  7             this.speed=1;
  8             this.direct=direct;
  9             this.timer=null;
 10             this.isLive=true;
 11             this.run=function run(){
 12                 //先判斷子彈是否已經到邊界
 13                 if (this.x<=0 || this.x>=400||this.y<=0 ||this.y>=300) {
 14                     window.cleaRInterval(this.timer);
 15                     //子彈死亡
 16                     this.isLive=false;
 17                 }else{
 18                 //修改座標
 19 
 20                 switch(this.direct){
 21                     case 0:
 22                       this.y-=this.speed;
 23                       break;
 24                     case 1:
 25                       this.x+=this.speed;
 26                       break;
 27                     case 2:
 28                       this.y+=this.speed;
 29                       break;
 30                     case 3:
 31                       this.x-=this.speed;
 32                       break;
 33                 }
 34             }
 35                 document.getElementById("aa").innerText="子彈x="+this.x+"，子彈y="+this.y;
 36             }
 37 }
 38   function Tank (x,y,direct,color){
 39               this.x=x;
 40             this.y=y;
 41             this.speed=1;
 42             this.direct=direct;
 43             //一個坦克須要倆個顏色
 44             this.color=color;
 45             //上移
 46             this.moveUp=function(){
 47                 this.y-=this.speed;
 48                 this.direct=0;
 49             }
 50             this.moveRight=function(){
 51                 this.x+=this.speed;
 52                 this.direct=1;
 53 
 54             }
 55             this.moveDown=function(){
 56                 this.y+=this.speed;
 57                 this.direct=2;
 58 
 59             }
 60             this.moveLeft=function(){
 61                 this.x-=this.speed;
 62                 this.direct=3;
 63 
 64             }
 65         
 66   }
 67 
 68     function Hero(x,y,direct,color){
 69       //經過對象冒充，實現繼承
 70         this.tank=Tank;
 71         this.tank(x,y,direct,color);
 72 
 73         this.shotEnemy=function(){
 74             //建立子彈,位置跟個人坦克有關
 75             switch(this.direct){
 76                 case 0:
 77                    heroBullet=new Bullet(this.x+9,this.y,this.direct,1);
 78                    break;
 79                 case 1:
 80                    heroBullet=new Bullet(this.x+30,this.y+9,this.direct,1);
 81                    break;
 82                 case 2:
 83                    heroBullet=new Bullet(this.x+9,this.y+30,this.direct,1);
 84                    break;
 85                 case 3:
 86                    heroBullet=new Bullet(this.x,this.y+9,this.direct,1);
 87                    break;
 88             }
 89             //調用咱們的子彈run(),js對象是引用傳遞
 90             var timer = window.setInterval("heroBullet.run()",50);
 91             
 92         }
 93      }
 94     function EnemyTank(x,y,direct,color){
 95         this.tank=Tank;
 96         this.tank(x,y,direct,color);
 97  
 98      }
 99 
100      //畫子彈
101      function drawHeroBullet(){
102          
103          if (heroBullet!=null && heroBullet.isLive) {
104          ctx.fillStyle="#fef26e";
105          ctx.fillRect(heroBullet.x,heroBullet.y,2,2);
106          }
107      }
108     function drawTank(tank){
109 
110         //考慮方向
111 
112         switch(tank.direct){
113                case 0://上
114                case 2:
115                     // var heroX=30;
116                     // var heroY=230;
117                     //以坦克左上角爲參照點
118                     ctx.fillStyle=tank.color[0];
119                     ctx.fillRect (tank.x,tank.y,5,30);//左邊的矩形
120                     ctx.fillRect (tank.x+15,tank.y,5,30);//右邊的矩形
121                     ctx.fillRect (tank.x+6,tank.y+5,8,20);//中間的矩形
122                 
123                     ctx.fillStyle=tank.color[1];
124                     ctx.arc(tank.x+10,tank.y+15,4,0,360,false);
125                     ctx.fill();
126 
127                     //畫出炮筒
128                     ctx.strokeStyle=tank.color[1];
129                     //設置線條的寬度
130                     ctx.lineWidth=1.5;
131                     ctx.beginPath();
132                     ctx.moveTo(tank.x+10,tank.y+15);
133                     
134                     if (tank.direct==0) {
135                          ctx.lineTo(tank.x+10,tank.y);
136                     }else if (tank.direct==2) {
137                         ctx.lineTo(tank.x+10,tank.y+30);
138 
139                     }
140                     ctx.closePath();
141                     ctx.stroke();
142                     break;
143                 case 1:
144                 case 3:
145                      //以坦克左上角爲參照點
146                     ctx.fillStyle=tank.color[0];
147                     ctx.fillRect (tank.x,tank.y,30,5);//左邊的矩形
148                     ctx.fillRect (tank.x,tank.y+15,30,5);//右邊的矩形
149                     ctx.fillRect (tank.x+5,tank.y+6,20,8);//中間的矩形
150                     // 蓋子
151                     ctx.fillStyle=tank.color[1];
152                     ctx.arc(tank.x+15,tank.y+10,4,0,360,false);
153                     ctx.fill();
154 
155                     //畫出炮筒
156                     ctx.strokeStyle=tank.color[1];
157                     //設置線條的寬度
158                     ctx.lineWidth=1.5;
159                     ctx.beginPath();
160                     ctx.moveTo(tank.x+15,tank.y+10);
161                     
162                     if (tank.direct==1) {
163                          ctx.lineTo(tank.x+30,tank.y+10);
164                     }else if (tank.direct==3) {
165                         ctx.lineTo(tank.x,tank.y+10);
166 
167                     }
168                     ctx.closePath();
169                     ctx.stroke();
170                     break;
171         }
172     }