HTML5实现坦克大战（一）
Tank
字段 x:坦克的中心点的横坐标
y:坦克的中心点的纵坐标
dir：坦克的前进的方向
spped：坦克的速度
color：坦克的颜色，用于区分种类不同的坦克
bullet：坦克的子弹 为array类型
方法：MoveUp：坦克上移
MoveDown：坦克下移
MoveRight：坦克右移
MoveLeft：坦克左移
MyTank extends Tank
EnemeyTank extends Tank
Bullet
Tank
字段：x:
y:
DIR
IsLive：判断子弹是否还存活（包括过界和击中目标）
方法 drawBullet():在canvas上画出子弹
run() 让子弹飞
1 <!DOCTYPE html> 2 <html xmlns="http://www.w3.org/1999/xhtml"> 3 <head> 4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 5 <script src="../JS/jquery-1.11.2.js"></script> 6 <title></title> 7 <script type="text/javascript"> 8 var EnemeyTankColor = new Array("#61D2F1", "#8A4A6E"); 9 var MyTankColor = new Array("green", "blue"); 10 var tank = null; 11 12 13 function Tank(x,y,dir,color){ 14 this.x = x; 15 this.y = y; 16 this.dir = dir; //0代表向上 1代表向右 2代表向下 3代表向左 17 this.speed = 1; 18 this.color = color; 19 this.MoveUp = function () { 20 this.y -= this.speed; 21 this.dir = 0; 22 //DrawTank(this); 23 }; 24 this.MoveRight = function () { 25 this.x += this.speed; 26 this.dir = 1; 27 //DrawTank(this); 28 }; 29 30 this.MoveDown = function () { 31 this.y += this.speed; 32 this.dir = 2; 33 //DrawTank(this); 34 }; 35 36 this.MoveLeft = function () { 37 this.x -= this.speed; 38 this.dir = 3; 39 //DrawTank(this); 40 }; 41 //alert(this.dir); 42 this.bullet = new Array(new Bullet(this.x, this.y, this.dir)); 43 } 44 45 function MyTank(x, y, dir,color) { 46 this.tank = Tank; 47 this.tank(x,y,dir,color); 48 } 49 50 function EnemeyTank(x,y,dir,color) 51 { 52 this.tank = Tank; 53 this.tank(x, y, dir,color); 54 } 55 56 function Bullet(x,y,dir) 57 { 58 var bullet = new Object; 59 bullet.x = x; 60 bullet.y = y; 61 bullet.dir = dir; 62 bullet.isLive = true; 63 bullet.timer = null; 64 bullet.drawBullet = function () { 65 if (bullet.isLive == true) 66 { 67 var canvas = document.getElementById("cantank"); 68 var ctx = canvas.getContext("2d"); 69 ctx.fillStyle = "red"; 70 //ctx.clearRect(bullet.x,bullet.y,3,3); 71 switch (bullet.dir) { 72 case 0: ctx.fillRect(bullet.x, bullet.y - 35, 3, 3); break; 73 case 1: ctx.fillRect(bullet.x + 35, bullet.y, 3, 3); break; 74 case 2: ctx.fillRect(bullet.x, bullet.y + 35, 3, 3); break; 75 case 3: ctx.fillRect(bullet.x - 35, bullet.y, 3, 3); break; 76 } 77 } 78 } 79 80 bullet.run = function () { 81 //alert("run"); 82 83 84 if (bullet.x < 35 || bullet.x > 600 || bullet.y < 35 || bullet.y > 600) 85 { 86 //clearInterval(bullet.timer); 87 //bullet.x = tank.x; 88 //bullet.y = tank.y; 89 //bullet.dir = tank.dir; 90 bullet.isLive = false; 91 } else { 92 switch (bullet.dir) { 93 case 0: bullet.y=bullet.y-2; break; 94 case 1: bullet.x=bullet.x+2; break; 95 case 2: bullet.y=bullet.y+2; break; 96 case 3: bullet.x=bullet.x-2; break; 97 } 98 } 99 100 $("#span1").html("x="+bullet.x+" "+"y="+bullet.y); 101 } 102 return bullet; 103 } 104 105 //画出坦克对象 106 function DrawTank(tank) { 107 var canTank = document.getElementById("cantank"); 108 var ctx = canTank.getContext("2d"); 109 var dir = tank.dir; 110 switch(dir){ 111 case 0: 112 case 2: 113 114 //画出坦克的左边的轮子 115 ctx.fillStyle = tank.color[0]; 116 ctx.fillRect(tank.x-25, tank.y-25, 10, 50); 117 118 //画出坦克的中间的机箱 119 ctx.fillRect(tank.x -15, tank.y - 15, 30, 30); 120 121 //画出坦克的右边的轮子 122 ctx.fillRect(tank.x + 15, tank.y-25, 10, 50); 123 ctx.fillStyle = tank.color[1]; 124 125 //画出坦克的盖子 126 ctx.beginPath(); 127 ctx.arc(tank.x, tank.y, 15, 0, 360, false); 128 ctx.closePath(); 129 ctx.fill(); 130 ctx.closePath(); 131 132 //画出坦克的炮筒 133 ctx.beginPath(); 134 ctx.moveTo(tank.x, tank.y); 135 if (tank.dir == 0) 136 { 137 ctx.lineTo(tank.x, tank.y-30); 138 } 139 else if (tank.dir == 2) 140 { 141 ctx.lineTo(tank.x,tank.y+30); 142 } 143 ctx.closePath(); 144 ctx.lineWidth = "2"; 145 ctx.strokeStyle = "yellow"; 146 ctx.stroke(); 147 break; 148 case 1: 149 case 3: 150 //画出坦克的上边的轮子 151 ctx.fillStyle = tank.color[0]; 152 ctx.fillRect(tank.x-25, tank.y-25, 50, 10); 153 154 //画出坦克的中间的机箱 155 ctx.fillRect(tank.x -15, tank.y - 15, 30, 30); 156 157 //画出坦克的下边的轮子 158 ctx.fillRect(tank.x - 25, tank.y+15, 50, 10); 159 ctx.fillStyle = tank.color[1]; 160 161 //画出坦克的盖子 162 ctx.beginPath(); 163 ctx.arc(tank.x, tank.y, 15, 0, 360, false); 164 ctx.closePath(); 165 ctx.fill(); 166 ctx.closePath(); 167 168 //画出坦克的炮筒 169 ctx.beginPath(); 170 ctx.moveTo(tank.x, tank.y); 171 if (tank.dir == 1) { 172 ctx.lineTo(tank.x + 30, tank.y ); 173 } 174 else if (tank.dir == 3) { 175 ctx.lineTo(tank.x -30, tank.y ); 176 } 177 ctx.closePath(); 178 ctx.lineWidth = "2"; 179 ctx.strokeStyle = "yellow"; 180 ctx.stroke(); 181 break; 182 } 183 184 }; 185 186 //刷新坦克和子弹的位置 187 function Refresh(mytank, enemeytanks) { 188 DrawTank(mytank); 189 //if (mytank.bullet.isLive == true) 190 //{ 191 // mytank.bullet.drawBullet(); 192 //} 193 194 for (var i = 0; i < mytank.bullet.length; i++) 195 { 196 mytank.bullet[i].drawBullet(); 197 } 198 for(var i=0;i<3;i++) 199 { 200 DrawTank(enemeytanks[i]); 201 202 //for (var i = 0; i < enemeytanks[i].bullet.length; i++) { 203 // enemeytanks[i].bullet[i].drawBullet(); 204 //} 205 } 206 } 207 208 //画出静态的坦克 209 //注意要使用相对位置，即相对坦克的左上角的位置的变化，这样之后才能使坦克动起来 210 $(function () { 211 212 //先得到canvas对象和画笔对象 213 var canvas = document.getElementById("cantank"); 214 var ctx = canvas.getContext("2d"); 215 216 //新建自己的坦克 217 var X = 30; 218 var Y = 30; 219 tank = new MyTank(500,500,0,MyTankColor); 220 //新建敌人的坦克 221 var EnemeyTanks = new Array(); 222 for (var i = 0; i < 3; i++) 223 { 224 var enemeyTank = new EnemeyTank((i + 1) * 80, 80, 2, EnemeyTankColor); 225 EnemeyTanks[i] = enemeyTank; 226 } 227 //当页面加载完成的时候先画出坦克 228 Refresh(tank, EnemeyTanks); 229 230 $("body").keydown(function (event) { 231 var key = event.keyCode; 232 switch (key) { 233 case 87: tank.MoveUp(); break; 234 case 68: tank.MoveRight(); break; 235 case 83: tank.MoveDown();break; 236 case 65: tank.MoveLeft(); break; 237 } 238 239 ctx.clearRect(0, 0, 600, 600); 240 241 Refresh(tank, EnemeyTanks); 242 }); 243 244 245 //for (var i = 0; i < EnemeyTanks.length; i++) 246 //{ 247 // //定时产生新的子弹 248 // setInterval(function () { 249 // EnemeyTanks[i].bullet[EnemeyTanks[i].bullet.length] = new Bullet(EnemeyTanks[i].x, EnemeyTanks[i].y, EnemeyTanks[i].dir); 250 // Refresh(tank, EnemeyTanks); 251 // }, 500); 252 253 // //定时改变子弹的位置 254 // setInterval(function () { 255 // for (var i = 0; i < EnemeyTanks[i].bullet.length; i++) { 256 // EnemeyTanks[i].bullet[i].run(); 257 // ctx.clearRect(0, 0, 600, 600); 258 // Refresh(tank, EnemeyTanks); 259 // } 260 // }, 10); 261 //} 262 263 264 //定时产生新的子弹 265 setInterval(function () { 266 EnemeyTanks[0].bullet[EnemeyTanks[0].bullet.length] = new Bullet(EnemeyTanks[0].x, EnemeyTanks[0].y, EnemeyTanks[0].dir); 267 Refresh(tank, EnemeyTanks); 268 }, 500); 269 270 //定时改变子弹的位置 271 setInterval(function () { 272 for (var i = 0; i < EnemeyTanks[i].bullet.length; i++) { 273 EnemeyTanks[0].bullet[i].run(); 274 ctx.clearRect(0, 0, 600, 600); 275 Refresh(tank, EnemeyTanks); 276 } 277 }, 10); 278 279 280 281 282 283 //定时产生新的子弹 284 setInterval(function () { 285 tank.bullet[tank.bullet.length] = new Bullet(tank.x, tank.y, tank.dir); 286 Refresh(tank, EnemeyTanks); 287 }, 500); 288 289 //定时改变子弹的位置 290 setInterval(function () { 291 for (var i = 0; i < tank.bullet.length; i++) 292 { 293 tank.bullet[i].run(); 294 ctx.clearRect(0, 0, 600, 600); 295 Refresh(tank, EnemeyTanks); 296 } 297 }, 10); 298 299 300 301 //for (var i = 0; i < tank.bullet.length; i++) 302 //{ 303 // setInterval(function () { 304 // tank.bullet[0].run(); 305 // ctx.clearRect(0, 0, 600, 600); 306 // Refresh(tank, EnemeyTanks); 307 // }, 50); 308 //} 309 310 311 312 //setInterval(tank.bullet.drawBullet, 100); 313 }); 314 </script> 315 </head> 316 <body> 317 <canvas id="cantank" width="600" height="600" style="background-color:black"></canvas> 318 <span id="span1"></span> 319 </body> 320 </html>