《HTML5经典坦克大战》游戏（代码）

　　前几天粗略地学了HTML5，然后就用它写了一个《经典坦克大战》游戏。

　　现在想分享一下我写的代码，写得不好请大家多多指教。

　　给大家推荐一个网站，这个网站是为大学生而做，为方便学习编程的同学而做的。（淘课学院）http://www.taokeschool.com/

《经典坦克大战》游戏截图

 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     <meta charset="utf-8" />
 6     <title>HTML5经典坦克大战</title>
 7     <script src="jquery-1.10.2.min.js"></script>
 8     <style type="text/css">
 9         body {
10             margin: 0px 0px;
11             padding: 0px 0px;
12         }
13         .con {
14             margin-left: auto;
15             margin-right: auto;
16             width: 650px;
17         }
18     </style>
19 </head>
20 <body onkeydown="getCommand()">
21     <div class="con">
22         <h1>HTML5——经典坦克大战</h1>
23 
24         <canvas id="tankmap" width="600" height="500" style="background-color:#000;"></canvas>
25         <div style="margin-top:20px;font-weight:bolder;font-size:20px;color:red;">
26             W、S、A、D分别控制：上、下、左、右；J是发子弹。暂时不支持Firefox浏览器。
27         </div>
28     </div>
29 
30     <script type="text/javascript">
31         var gameover = false;
32         var verygood = false;
33         var canH = document.getElementById("tankmap");
34         var cxt = canH.getContext("2d");
35 
36         var bomb3 = new Image();
37         bomb3.src = "images/bomb_3.gif";
38         var bomb2 = new Image();
39         bomb2.src = "images/bomb_2.gif";
40         var bomb1 = new Image();
41         bomb1.src = "images/bomb_1.gif";
42 
43         var born1 = new Image();
44         born1.src = "images/born1.gif";
45         var born2 = new Image();
46         born2.src = "images/born2.gif";
47         var born3 = new Image();
48         born3.src = "images/born3.gif";
49         var born4 = new Image();
50         born4.src = "images/born4.gif";
51 
52         var buBoImg = new Image();
53         buBoImg.src = "images/blast1.gif";
54 
55         var base1 = new Image();
56         base1.src = "images/symbol.gif";
57         var base2 = new Image();
58         base2.src = "images/destory.gif";
59 
60     </script>
61     <script src="Draw.js"></script>
62     <script src="opera_js.js"></script>
63 </body>
64 </html>
65 
66 HTML页

HTML页

   1 ///玩家坦克颜色（机身颜色，盖子颜色）
   2 var heroColor1 = new Array("#ba9658", "#fef26e");
   3 var heroColor2 = new Array("#00a2b5", "#00fefe");
   4 
   5 ///敌人坦克颜色（机身颜色，盖子颜色）
   6 var enemyColor1 = new Array("#006f43", "#43b387");
   7 var enemyColor2 = new Array("#f00", "#e34444");
   8 var enemyColor3 = new Array("#fa02e6", "#d45bca");
   9 var enemyColor4 = new Array("#0600fd", "#3531c4");
  10 
  11 
  12 ///敌人子弹数组
  13 var enemyBullets = new Array(null, null, null, null, null, null, null, null, null, null,
  14                              null, null, null, null, null, null, null, null, null, null);
  15 ///敌人子弹爆炸数组
  16 var enemyBulletBombs = new Array(null, null, null, null, null, null, null, null, null, null,
  17                              null, null, null, null, null, null, null, null, null, null);
  18 ///定义玩家子弹数组
  19 var hero1bullet = null;
  20 var hero1bulletBomb = null;
  21 
  22 ////出身效果
  23 function Born(x, y) {
  24     this.x = x;
  25     this.y = y;
  26     this.time = 0;
  27     this.born = true;
  28 
  29 
  30     this.drawBorn = function drawBorn() {
  31         if (this.time <= 1) {
  32             cxt.drawImage(born1, this.x, this.y, 50, 50);
  33         }
  34         if (this.time > 1 && this.time <= 3) {
  35             cxt.drawImage(born2, this.x, this.y, 50, 50);
  36         }
  37         if (this.time >= 4 && this.time <= 5) {
  38             cxt.drawImage(born3, this.x, this.y, 50, 50);
  39         }
  40         if (this.time >= 6 && this.time <= 7) {
  41             cxt.drawImage(born4, this.x, this.y, 50, 50);
  42         }
  43         if (this.time >= 8 && this.time <= 9) {
  44             cxt.drawImage(born2, this.x, this.y, 50, 50);
  45         }
  46         if (this.time >= 10 && this.time <= 11) {
  47             cxt.drawImage(born3, this.x, this.y, 50, 50);
  48         }
  49         if (this.time >= 12 && this.time <= 13) {
  50             cxt.drawImage(born4, this.x, this.y, 50, 50);
  51         }
  52 
  53         this.time++;
  54         if (this.time >= 13) {
  55             this.born = false;
  56             this.time = 0;
  57         }
  58     }
  59 }
  60 
  61 ////坦克类
  62 function Tank(x, y, speed, direct, tankcolor, islive)
  63 {
  64     this.x = x;
  65     this.y = y;
  66     this.speed = speed;
  67     this.direct = direct;
  68     this.tankcolor = tankcolor;
  69     this.islive = islive;
  70 
  71     this.moveUp = function ()
  72     {
  73         this.y = this.y - this.speed;
  74         if (this.y <= 0)
  75         {
  76             this.y = 0;
  77         }
  78         this.direct = 0;
  79     }
  80     this.moveDown = function ()
  81     {
  82         this.y = this.y + this.speed;
  83         if (this.y >= 450)
  84         {
  85             this.y = 450;
  86         }
  87         this.direct = 2;
  88     }
  89     this.moveLeft = function ()
  90     {
  91         this.x = this.x - this.speed;
  92         if (this.x <= 0)
  93         {
  94             this.x = 0;
  95         }
  96         this.direct = 3;
  97     }
  98     this.moveRight = function ()
  99     {
 100         this.x = this.x + this.speed;
 101         if (this.x >= 550)
 102         {
 103             this.x = 550;
 104         }
 105         this.direct = 1;
 106     }
 107 }
 108 
 109 ///玩家坦克类，继承于坦克类（Tank）
 110 function Hero(x, y, speed, direct, tankcolor, islive)
 111 {
 112     this.tank = Tank;
 113     this.tank(x, y, speed, direct, tankcolor, islive);
 114 
 115 
 116 
 117     this.attackEnemy = function ()
 118     {
 119         if (hero1bullet != null)
 120         {
 121             return;
 122         }
 123         switch (this.direct)
 124         {
 125             case 0:
 126                 hero1bullet = new Bullet(this.x + 24, this.y, 4, 0);
 127                 break;
 128             case 1:
 129                 hero1bullet = new Bullet(this.x + 50, this.y + 24, 4, 1);
 130                 break;
 131             case 2:
 132                 hero1bullet = new Bullet(this.x + 24, this.y + 50, 4, 2);
 133                 break;
 134             case 3:
 135                 hero1bullet = new Bullet(this.x, this.y + 24, 4, 3);
 136                 break;
 137         }
 138         hero1bullet.time = window.setInterval("hero1bullet.run('h')", 20);
 139     }
 140 }
 141 ///敌人坦克类，继承坦克类（Tank）
 142 function Enemy(x, y, speed, direct, tankcolor, islive)
 143 {
 144     this.tank = Tank;
 145     this.tank(x, y, speed, direct, tankcolor, islive);
 146     ///敌人移动
 147     this.run = function ()
 148     {
 149         if (this.islive == 0)
 150         {
 151             return;
 152         }
 153         this.changeDir();
 154         switch (this.direct)
 155         {
 156             case 0:
 157                 if (this.y <= 0)
 158                 {
 159                     this.beyondChange();
 160                 }
 161                 if (!this.enemyTankCollision(this)) {
 162                     this.moveUp();
 163                 }
 164                 break;
 165             case 1:
 166                 if (this.x >= 550)
 167                 {
 168                     this.beyondChange();
 169                 }
 170                 if (!this.enemyTankCollision(this))
 171                 {
 172                     this.moveRight();
 173                 }
 174                 break;
 175             case 2:
 176                 if (this.y >= 450)
 177                 {
 178                     this.beyondChange();
 179                 }
 180                 if (!this.enemyTankCollision(this)) {
 181                     this.moveDown();
 182                 }
 183                 break;
 184             case 3:
 185                 if (this.x <= 0)
 186                 {
 187                     this.beyondChange();
 188                 }
 189                 if (!this.enemyTankCollision(this)) {
 190                     this.moveLeft();
 191                 }
 192                 break;
 193         }
 194     }
 195     this.changeDir = function ()
 196     {
 197         var dri_num = Math.round(Math.random() * 99);
 198         if (dri_num < 4) {
 199             this.direct = Math.round(Math.random() * 3);
 200         }
 201     }
 202     this.beyondChange = function () {
 203         this.direct = Math.round(Math.random() * 3);
 204     }
 205 
 206     ///敌人攻击
 207     this.attackEnemy = function (en)
 208     {
 209         if (enemyBullets[en] != null)
 210         {
 211             return;
 212         }
 213         if ((Math.round(Math.random() * 99)) < 4)
 214         {
 215             switch (this.direct) {
 216                 case 0:
 217                     enemyBullets[en] = new Bullet(this.x + 24, this.y, 4, 0);
 218                     break;
 219                 case 1:
 220                     enemyBullets[en] = new Bullet(this.x + 50, this.y + 24, 4, 1);
 221                     break;
 222                 case 2:
 223                     enemyBullets[en] = new Bullet(this.x + 24, this.y + 50, 4, 2);
 224                     break;
 225                 case 3:
 226                     enemyBullets[en] = new Bullet(this.x, this.y + 24, 4, 3);
 227                     break;
 228             }
 229 
 230             enemyBullets[en].time = window.setInterval("enemyBullets[" + en + "].run(" + en + ")", 20);
 231         }
 232     }
 233     ///敌人坦克碰撞
 234     this.enemyTankCollision = function (enemy1)
 235     {
 236 
 237         var enemy2 = null;
 238         {
 239             for (var en2 = 0; en2 < enemys.length; en2++)
 240             {
 241                 enemy2 = enemys[en2];
 242                 if (enemy2 != null && enemy2.islive != 0)
 243                 {
 244                     switch (enemy1.direct) {
 245                         case 0:
 246                             if ((hero1 != null && hero1.islive != 0) && (enemy1.x > hero1.x - 50) && (enemy1.x < hero1.x + 50) &&
 247                                 ((enemy1.y == hero1.y + 47) || (enemy1.y == hero1.y + 50) || (enemy1.y == hero1.y + 49) || (enemy1.y == hero1.y + 48))) {
 248                                 return true;
 249                             }
 250                             if ((enemy1.x > enemy2.x - 50) && (enemy1.x < enemy2.x + 50) &&
 251                                 ((enemy1.y == enemy2.y + 47) || (enemy1.y == enemy2.y + 50) || (enemy1.y == enemy2.y + 49) || (enemy1.y == enemy2.y + 48))) {
 252                                 return true;
 253                             }
 254 
 255                             break;
 256                         case 1:
 257                             if ((hero1 != null && hero1.islive != 0) && (enemy1.y > hero1.y - 50) && (enemy1.y < hero1.y + 50) &&
 258                                 ((enemy1.x + 47 == hero1.x) || (enemy1.x + 50 == hero1.x) || (enemy1.x + 49 == hero1.x) || (enemy1.x + 48 == hero1.x))) {
 259                                 return true;
 260                             }
 261                             if ((enemy1.y > enemy2.y - 50) && (enemy1.y < enemy2.y + 50) &&
 262                                 ((enemy1.x + 47 == enemy2.x) || (enemy1.x + 50 == enemy2.x) || (enemy1.x + 49 == enemy2.x) || (enemy1.x + 48 == enemy2.x))) {
 263                                 return true;
 264                             }
 265                             break;
 266                         case 2:
 267                             if ((hero1 != null && hero1.islive != 0) && (enemy1.x > hero1.x - 50) && (enemy1.x < hero1.x + 50) &&
 268                                 ((enemy1.y == hero1.y - 47) || (enemy1.y == hero1.y - 50) || (enemy1.y == hero1.y - 49) || (enemy1.y == hero1.y - 48))) {
 269                                 return true;
 270                             }
 271                             if ((enemy1.x > enemy2.x - 50) && (enemy1.x < enemy2.x + 50) &&
 272                                 ((enemy1.y == enemy2.y - 47) || (enemy1.y == enemy2.y - 50) || (enemy1.y == enemy2.y - 49) || (enemy1.y == enemy2.y - 48))) {
 273                                 return true;
 274                             }
 275                             break;
 276                         case 3:
 277                             if ((hero1 != null && hero1.islive != 0) && (enemy1.y > hero1.y - 50) && (enemy1.y < hero1.y + 50) &&
 278                                 ((enemy1.x - 47 == hero1.x) || (enemy1.x - 50 == hero1.x) || (enemy1.x - 49 == hero1.x) || (enemy1.x - 48 == hero1.x))) {
 279                                 return true;
 280                             }
 281                             if ((enemy1.y > enemy2.y - 50) && (enemy1.y < enemy2.y + 50) &&
 282                                 ((enemy1.x - 47 == enemy2.x) || (enemy1.x - 50 == enemy2.x) || (enemy1.x - 49 == enemy2.x) || (enemy1.x - 48 == enemy2.x))) {
 283                                 return true;
 284                             }
 285                             break;
 286                     }
 287                 }
 288             }
 289         }
 290 
 291         ///敌人坦克与阻碍物之间碰撞
 292         var hamper = null;
 293         for (var ha = 0; ha < hampers.length; ha++)
 294         {
 295             hamper = hampers[ha];
 296             if (hamper != null)
 297             {
 298                 switch (hampers[ha].style) {
 299                     case 1:
 300                         switch (enemy1.direct) {
 301                             case 0:
 302                                 if ((enemy1.x >= hamper.x - 50) && (enemy1.x <= hamper.x + 17) &&
 303                                     ((enemy1.y == hamper.y + 7) || (enemy1.y == hamper.y + 8) || (enemy1.y == hamper.y + 9) || (enemy1.y == hamper.y + 10))) {
 304                                     return true;
 305                                 }
 306                                 break;
 307                             case 1:
 308                                 if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
 309                                     ((enemy1.x + 50 == hamper.x) || (enemy1.x + 49 == hamper.x) || (enemy1.x + 48 == hamper.x) || (enemy1.x + 47 == hamper.x))) {
 310                                     return true;
 311                                 }
 312                                 break;
 313                             case 2:
 314                                 if ((enemy1.x > hamper.x - 50) && (enemy1.x < hamper.x + 17) &&
 315                                     ((enemy1.y + 50 == hamper.y) || (enemy1.y + 49 == hamper.y) || (enemy1.y + 48 == hamper.y) || (enemy1.y + 47 == hamper.y))) {
 316                                     return true;
 317                                 }
 318                                 break;
 319                             case 3:
 320                                 if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
 321                                     ((enemy1.x == hamper.x + 17) || (enemy1.x == hamper.x + 16) || (enemy1.x == hamper.x + 15) || (enemy1.x == hamper.x + 14))) {
 322                                     return true;
 323                                 }
 324                                 break;
 325                         }
 326                         break;
 327                     case 2:
 328                         switch (enemy1.direct) {
 329                             case 0:
 330                                 if ((enemy1.x >= hamper.x - 50) && (enemy1.x <= hamper.x + 17) &&
 331                                     ((enemy1.y == hamper.y + 14) || (enemy1.y == hamper.y + 15) || (enemy1.y == hamper.y + 16) || (enemy1.y == hamper.y + 17))) {
 332                                     return true;
 333                                 }
 334                                 break;
 335                             case 1:
 336                                 if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
 337                                     ((enemy1.x + 50 == hamper.x) || (enemy1.x + 49 == hamper.x) || (enemy1.x + 48 == hamper.x) || (enemy1.x + 47 == hamper.x))) {
 338                                     return true;
 339                                 }
 340                                 break;
 341                             case 2:
 342                                 if ((enemy1.x > hamper.x - 50) && (enemy1.x < hamper.x + 17) &&
 343                                     ((enemy1.y + 50 == hamper.y) || (enemy1.y + 49 == hamper.y) || (enemy1.y + 48 == hamper.y) || (enemy1.y + 47 == hamper.y))) {
 344                                     return true;
 345                                 }
 346                                 break;
 347                             case 3:
 348                                 if ((enemy1.y > hamper.y - 50) && (enemy1.y < hamper.y + 10) &&
 349                                     ((enemy1.x == hamper.x + 17) || (enemy1.x == hamper.x + 16) || (enemy1.x == hamper.x + 15) || (enemy1.x == hamper.x + 14))) {
 350                                     return true;
 351                                 }
 352                                 break;
 353                         }
 354                         break;
 355                     case 3:
 356                         break;
 357                     case 4:
 358                         break;
 359                 }
 360             }
 361         }
 362 
 363     }
 364 
 365 }
 366 
 367 ///子弹类
 368 function Bullet(x, y, speed, direct)
 369 {
 370     this.x = x;
 371     this.y = y;
 372     this.speed = speed;
 373     this.direct = direct;
 374     this.time = null;
 375     this.islive = true;
 376     this.run = function run(whotank)
 377     {
 378         //$("#tx").html(heroBullets[0].x);
 379         //$("#ty").html(heroBullets[0].y);
 380 
 381         if ((this.x >= 600 || this.x <= 0 || this.y >= 500 || this.y <= 0) && this.islive) {
 382             window.clearInterval(this.time);
 383             this.islive = false;
 384             if (whotank == "h") {
 385                 hero1bullet = null;
 386                 switch (this.direct) {
 387                     case 0:
 388                         hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 50);
 389                         break;
 390                     case 1:
 391                         hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 54);
 392                         break;
 393                     case 2:
 394                         hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 54);
 395                         break;
 396                     case 3:
 397                         hero1bulletBomb = new bulletBomb(this.x - 68, this.y - 52);
 398                         break;
 399                 }
 400                 //alert("00");
 401             }
 402             else {
 403                 enemyBullets[whotank] = null;
 404                 switch (this.direct)
 405                 {
 406                     case 0:
 407                         enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 50);
 408                         break;
 409                     case 1:
 410                         enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 54);
 411                         break;
 412                     case 2:
 413                         enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 54);
 414                         break;
 415                     case 3:
 416                         enemyBulletBombs[whotank] = new bulletBomb(this.x - 68, this.y - 52);
 417                         break;
 418                 }
 419                 
 420             }
 421 
 422         }
 423         else {
 424             switch (this.direct) {
 425                 case 0:
 426                     this.y = this.y - this.speed;
 427                     break;
 428                 case 1:
 429                     this.x = this.x + this.speed;
 430                     break;
 431                 case 2:
 432                     this.y = this.y + this.speed;
 433                     break;
 434                 case 3:
 435                     this.x = this.x - this.speed;
 436                     break;
 437             }
 438         }
 439 
 440     }
 441 }
 442 
 443 ////画坦克函数
 444 function DrawTank(tank)
 445 {
 446     switch (tank.direct)
 447     {
 448         case 0:
 449         case 2:
 450             ///画玩家坦克，坦克尺寸为50*50
 451             cxt.beginPath();
 452             cxt.fillStyle = tank.tankcolor[0];
 453             cxt.fillRect(tank.x, tank.y, 11, 50);                     //画玩家坦克轮子
 454             cxt.fillRect(tank.x + 12, tank.y + 10, 26, 30);           //中间部分
 455             cxt.fillRect(tank.x + 39, tank.y, 11, 50);              //画玩家坦克轮子
 456             ///画坦克盖子
 457             cxt.fillStyle = tank.tankcolor[1];
 458             cxt.arc(tank.x + 25, tank.y + 25, 10, 360, 0, true);
 459             cxt.fill();
 460             cxt.closePath();
 461             ////画炮口（炮口2px）
 462             cxt.beginPath();                                    //开始一条新的路径，或重置当前的路径。
 463             cxt.strokeStyle = tank.tankcolor[1];                        //线条的颜色
 464             cxt.lineWidth = 2;                                  //线条的宽度（炮口2px）
 465             cxt.moveTo(tank.x + 25, tank.y + 25);                 //炮口开始位置
 466             if (tank.direct == 0) {
 467                 cxt.lineTo(tank.x + 25, tank.y + 0);                  //炮口结束位置
 468             }
 469             else if (tank.direct == 2) {
 470                 cxt.lineTo(tank.x + 25, tank.y + 50);                  //炮口结束位置
 471             }
 472 
 473             cxt.closePath();                                    //创建从当前点到开始点的路径。
 474             cxt.stroke();                                       //画线
 475             break;
 476         case 1:
 477         case 3:
 478             ///画玩家坦克，坦克尺寸为50*50
 479             cxt.beginPath();
 480             cxt.fillStyle = tank.tankcolor[0];
 481             cxt.fillRect(tank.x, tank.y, 50, 11);                     //画玩家坦克轮子
 482             cxt.fillRect(tank.x + 10, tank.y + 12, 30, 26);           //中间部分
 483             cxt.fillRect(tank.x, tank.y + 39, 50, 11);              //画玩家坦克轮子
 484             ///画坦克盖子
 485             cxt.fillStyle = tank.tankcolor[1];
 486             cxt.arc(tank.x + 25, tank.y + 25, 10, 360, 0, true);
 487             cxt.fill();
 488             cxt.closePath();
 489             ////画炮口（炮口2px）
 490             cxt.beginPath();                                    //开始一条新的路径，或重置当前的路径。
 491             cxt.strokeStyle = tank.tankcolor[1];                        //线条的颜色
 492             cxt.lineWidth = 2;                                  //线条的宽度（炮口2px）
 493             cxt.moveTo(tank.x + 25, tank.y + 25);                 //炮口开始位置
 494             if (tank.direct == 1) {
 495                 cxt.lineTo(tank.x + 50, tank.y + 25);                  //炮口结束位置
 496             }
 497             else if (tank.direct == 3) {
 498                 cxt.lineTo(tank.x, tank.y + 25);                  //炮口结束位置
 499             }
 500             cxt.closePath();                                    //创建从当前点到开始点的路径。
 501             cxt.stroke();                                       //画线
 502             break;
 503     }
 504 }
 505 ///画出阻碍物（地图）、（style有4个值，1表示砖头、2表示钢铁、3表示草地、4表示河流）
 506 function Hamper(x, y, style)
 507 {
 508     this.x = x;
 509     this.y = y;
 510     this.style = style;
 511     //this.islive = true;
 512     this.Draw = function ()
 513     {
 514         switch (this.style)
 515         {
 516             case 1:
 517                 cxt.fillStyle = "#bc5018";
 518                 cxt.fillRect(this.x, this.y, 17, 10);
 519                 break;
 520             case 2:
 521                 cxt.fillStyle = "#ffffff";
 522                 cxt.fillRect(this.x, this.y, 17, 17);
 523                 break;
 524             case 3:
 525                 break;
 526             case 4:
 527                 break;
 528         }
 529     }
 530 }
 531 
 532 ///画出子弹
 533 function DrawBullet()
 534 {
 535     var enemyBullet = null;
 536     cxt.fillStyle = "#ba9658";
 537     for (var en = 0; en < enemyBullets.length; en++) {
 538         enemyBullet = enemyBullets[en];
 539         if (enemyBullet != null && enemyBullet.islive) {
 540             switch (enemyBullet.direct) {
 541                 case 0:
 542                 case 2:
 543                     cxt.fillRect(enemyBullet.x, enemyBullet.y, 2, 3);
 544                     break;
 545                 case 1:
 546                 case 3:
 547                     cxt.fillRect(enemyBullet.x, enemyBullet.y, 3, 2);
 548                     break;
 549             }
 550         }
 551     }
 552     if (hero1bullet != null && hero1bullet.islive) {
 553         switch (hero1bullet.direct) {
 554             case 0:
 555             case 2:
 556                 cxt.fillRect(hero1bullet.x, hero1bullet.y, 2, 3);
 557                 break;
 558             case 1:
 559             case 3:
 560                 cxt.fillRect(hero1bullet.x, hero1bullet.y, 3, 2);
 561                 break;
 562         }
 563     }
 564 
 565 }
 566 
 567 ////画出基地
 568 function DrawSymbol()
 569 {
 570     cxt.beginPath();
 571     if (gameover) {
 572         cxt.drawImage(base2, 280, 450, 50, 50);
 573     }
 574     else {
 575         cxt.drawImage(base1, 280, 450, 50, 50);
 576     }
 577     cxt.closePath();
 578 }
 579 
 580 ////判断子弹是否打中坦克
 581 function hitTank()
 582 {
 583     ////敌人子弹是否打中玩家坦克
 584     for (var eb = 0; eb < enemyBullets.length; eb++)
 585     {
 586         if (hero1 != null && hero1.islive != 0 && enemyBullets[eb] != null) {
 587             switch (enemyBullets[eb].direct) {
 588                 case 0:
 589                     if ((enemyBullets[eb].x + 2 >= hero1.x) && (enemyBullets[eb].x + 2 <= hero1.x + 50) && (enemyBullets[eb].y + 3 <= hero1.y + 50) && (enemyBullets[eb].y + 3 >= hero1.y)) {
 590                         enemyBullets[eb].islive = false;
 591                         window.clearInterval(enemyBullets[eb].time);
 592                         enemyBullets[eb] = null;
 593                         hero1.islive--;
 594                     }
 595                     break;
 596                 case 1:
 597                     if ((enemyBullets[eb].x + 3 >= hero1.x) && (enemyBullets[eb].x + 3 <= hero1.x + 50) && (enemyBullets[eb].y + 2 >= hero1.y) && (enemyBullets[eb].y + 2 <= hero1.y + 50)) {
 598                         enemyBullets[eb].islive = false;
 599                         window.clearInterval(enemyBullets[eb].time);
 600                         enemyBullets[eb] = null;
 601                         hero1.islive--;
 602                     }
 603                     break;
 604                 case 2:
 605                     if ((enemyBullets[eb].x + 2 >= hero1.x) && (enemyBullets[eb].x + 2 <= hero1.x + 50) && (enemyBullets[eb].y + 3 <= hero1.y + 50) && (enemyBullets[eb].y + 3 >= hero1.y)) {
 606                         enemyBullets[eb].islive = false;
 607                         window.clearInterval(enemyBullets[eb].time);
 608                         enemyBullets[eb] = null;
 609                         hero1.islive--;
 610                     }
 611                     break;
 612                 case 3:
 613                     if ((enemyBullets[eb].x <= hero1.x + 50) && (enemyBullets[eb].x >= hero1.x) && (enemyBullets[eb].y + 2 >= hero1.y) && (enemyBullets[eb].y + 2 <= hero1.y + 50)) {
 614                         enemyBullets[eb].islive = false;
 615                         window.clearInterval(enemyBullets[eb].time);
 616                         enemyBullets[eb] = null;
 617                         hero1.islive--;
 618                     }
 619                     break;
 620             }
 621             if (hero1.islive == 0) {
 622                 var tankbomb = new TankBomb(hero1.x, hero1.y);
 623                 tankbombs.push(tankbomb);
 624                 hero1 = null;
 625                 if (hero1 == null) {
 626                     gameover = true;
 627                 }
 628             }
 629         }
 630     }
 631     ////敌人子弹是否打中阻碍物
 632     var enemybullet = null;
 633     var hamper = null;
 634     for (var eb = 0; eb < enemyBullets.length; eb++)
 635     {
 636         enemybullet = enemyBullets[eb];
 637         if (enemybullet != null)
 638         {
 639             for (var ha = 0; ha < hampers.length; ha++) {
 640                 hamper = hampers[ha];
 641                 if (hamper != null && enemybullet != null) {
 642                     switch (enemybullet.direct) {
 643                         case 0:
 644                             switch (hamper.style) {
 645                                 case 1:
 646                                     if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
 647                                         (enemybullet.y <= hamper.y + 10) && (enemybullet.y >= hamper.y)) {
 648                                         enemyBullets[eb].islive = false;
 649                                         window.clearInterval(enemyBullets[eb].time);
 650                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 651                                         enemyBullets[eb] = null;
 652                                         hampers[ha] = null;
 653                                     }
 654                                     break;
 655                                 case 2:
 656                                     if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
 657                                         (enemybullet.y <= hamper.y + 20) && (enemybullet.y >= hamper.y)) {
 658                                         enemyBullets[eb].islive = false;
 659                                         window.clearInterval(enemyBullets[eb].time);
 660                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 661                                         enemyBullets[eb] = null;
 662                                     }
 663                                     break;
 664 
 665                             }
 666 
 667                             break;
 668                         case 1:
 669                             switch (hamper.style) {
 670                                 case 1:
 671                                     if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
 672                                         (enemybullet.y <= hamper.y + 10) && (enemybullet.y >= hamper.y - 1)) {
 673                                         enemyBullets[eb].islive = false;
 674                                         window.clearInterval(enemyBullets[eb].time);
 675                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 676                                         enemyBullets[eb] = null;
 677                                         hampers[ha] = null;
 678                                     }
 679                                     break;
 680                                 case 2:
 681                                     if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
 682                                         (enemybullet.y <= hamper.y + 17) && (enemybullet.y >= hamper.y - 1)) {
 683                                         enemyBullets[eb].islive = false;
 684                                         window.clearInterval(enemyBullets[eb].time);
 685                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 686                                         enemyBullets[eb] = null;
 687                                     }
 688                                     break;
 689 
 690                             }
 691                             break;
 692                         case 2:
 693                             switch (hamper.style) {
 694                                 case 1:
 695                                     if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
 696                                         (enemybullet.y + 2 <= hamper.y + 10) && (enemybullet.y + 2 >= hamper.y)) {
 697                                         enemyBullets[eb].islive = false;
 698                                         window.clearInterval(enemyBullets[eb].time);
 699                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 700                                         enemyBullets[eb] = null;
 701                                         hampers[ha] = null;
 702                                     }
 703                                     break;
 704                                 case 2:
 705                                     if ((enemybullet.x >= hamper.x - 1) && (enemybullet.x <= hamper.x + 17) &&
 706                                         (enemybullet.y + 2 <= hamper.y + 17) && (enemybullet.y + 2 >= hamper.y)) {
 707                                         enemyBullets[eb].islive = false;
 708                                         window.clearInterval(enemyBullets[eb].time);
 709                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 710                                         enemyBullets[eb] = null;
 711                                     }
 712                                     break;
 713                             }
 714                             break;
 715                         case 3:
 716                             switch (hamper.style) {
 717                                 case 1:
 718                                     if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
 719                                         (enemybullet.y + 1 <= hamper.y + 10) && (enemybullet.y + 1 >= hamper.y)) {
 720                                         enemyBullets[eb].islive = false;
 721                                         window.clearInterval(enemyBullets[eb].time);
 722                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 723                                         enemyBullets[eb] = null;
 724                                         hampers[ha] = null;
 725                                     }
 726                                     break;
 727                                 case 2:
 728                                     if ((enemybullet.x >= hamper.x) && (enemybullet.x <= hamper.x + 17) &&
 729                                         (enemybullet.y + 1 <= hamper.y + 20) && (enemybullet.y + 1 >= hamper.y)) {
 730                                         enemyBullets[eb].islive = false;
 731                                         window.clearInterval(enemyBullets[eb].time);
 732                                         enemyBulletBombs[eb] = new bulletBomb(enemybullet.x - 68, enemybullet.y - 50);
 733                                         enemyBullets[eb] = null;
 734                                     }
 735                                     break;
 736 
 737                             }
 738                             break;
 739                     }
 740                 }
 741             }
 742 
 743         }
 744     }
 745     ////玩家子弹是否打中敌人坦克
 746     ////是否打中阻碍物
 747     if (hero1bullet != null)
 748     {
 749         for (var en = 0; en < enemys.length; en++) {
 750             if (enemys[en] != null && enemys[en].islive != 0 && hero1bullet != null) {
 751                 switch (hero1bullet.direct) {
 752                     case 0:
 753                         if ((hero1bullet.x + 2 >= enemys[en].x) && (hero1bullet.x + 2 <= enemys[en].x + 50) && (hero1bullet.y + 3 <= enemys[en].y + 50) && (hero1bullet.y + 3 >= enemys[en].y)) {
 754                             hero1bullet.islive = false;
 755                             window.clearInterval(hero1bullet.time);
 756                             hero1bullet = null;
 757                             enemys[en].islive--;
 758                         }
 759                         break;
 760                     case 1:
 761                         if ((hero1bullet.x + 3 >= enemys[en].x) && (hero1bullet.x + 3 <= enemys[en].x + 50) && (hero1bullet.y + 2 >= enemys[en].y) && (hero1bullet.y + 2 <= enemys[en].y + 50)) {
 762                             hero1bullet.islive = false;
 763                             window.clearInterval(hero1bullet.time);
 764                             hero1bullet = null;
 765                             enemys[en].islive--;
 766                         }
 767                         break;
 768                     case 2:
 769                         if ((hero1bullet.x + 2 >= enemys[en].x) && (hero1bullet.x + 2 <= enemys[en].x + 50) && (hero1bullet.y + 3 <= enemys[en].y + 50) && (hero1bullet.y + 3 >= enemys[en].y)) {
 770                             hero1bullet.islive = false;
 771                             window.clearInterval(hero1bullet.time);
 772                             hero1bullet = null;
 773                             enemys[en].islive--;
 774                         }
 775                         break;
 776                     case 3:
 777                         if ((hero1bullet.x <= enemys[en].x + 50) && (hero1bullet.x >= enemys[en].x) && (hero1bullet.y + 2 >= enemys[en].y) && (hero1bullet.y + 2 <= enemys[en].y + 50)) {
 778                             hero1bullet.islive = false;
 779                             window.clearInterval(hero1bullet.time);
 780                             hero1bullet = null;
 781                             enemys[en].islive--;
 782                         }
 783                         break;
 784                 }
 785                 if (enemys[en].islive == 0) {
 786                     var tankbomb = new TankBomb(enemys[en].x, enemys[en].y);
 787                     tankbombs.push(tankbomb);
 788                     enemys[en] = null;
 789                 }
 790             }
 791         }
 792         var hamper = null;
 793         for (var ha = 0; ha < hampers.length; ha++)
 794         {
 795             hamper = hampers[ha];
 796             if (hamper != null && hero1bullet!=null)
 797             {
 798                 switch (hero1bullet.direct) {
 799                     case 0:
 800                         switch (hamper.style)
 801                         {
 802                             case 1:
 803                                 if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
 804                                     (hero1bullet.y <= hamper.y + 10) && (hero1bullet.y >= hamper.y)) {
 805                                     hero1bullet.islive = false;
 806                                     window.clearInterval(hero1bullet.time);
 807                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 808                                     hero1bullet = null;
 809                                     hampers[ha] = null;
 810                                 }
 811                                 break;
 812                             case 2:
 813                                 if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
 814                                     (hero1bullet.y <= hamper.y + 20) && (hero1bullet.y >= hamper.y)) {
 815                                     hero1bullet.islive = false;
 816                                     window.clearInterval(hero1bullet.time);
 817                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 818                                     hero1bullet = null;
 819                                 }
 820                                 break;
 821 
 822                         }
 823                         
 824                         break;
 825                     case 1:
 826                         switch (hamper.style) {
 827                             case 1:
 828                                 if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
 829                                     (hero1bullet.y <= hamper.y + 10) && (hero1bullet.y >= hamper.y-1)) {
 830                                     hero1bullet.islive = false;
 831                                     window.clearInterval(hero1bullet.time);
 832                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 833                                     hero1bullet = null;
 834                                     hampers[ha] = null;
 835                                 }
 836                                 break;
 837                             case 2:
 838                                 if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
 839                                     (hero1bullet.y <= hamper.y + 17) && (hero1bullet.y >= hamper.y-1)) {
 840                                     hero1bullet.islive = false;
 841                                     window.clearInterval(hero1bullet.time);
 842                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 843                                     hero1bullet = null;
 844                                 }
 845                                 break;
 846 
 847                         }
 848                         break;
 849                     case 2:
 850                         switch (hamper.style) {
 851                             case 1:
 852                                 if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
 853                                     (hero1bullet.y + 2 <= hamper.y + 10) && (hero1bullet.y + 2 >= hamper.y)) {
 854                                     hero1bullet.islive = false;
 855                                     window.clearInterval(hero1bullet.time);
 856                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 857                                     hero1bullet = null;
 858                                     hampers[ha] = null;
 859                                 }
 860                                 break;
 861                             case 2:
 862                                 if ((hero1bullet.x >= hamper.x - 1) && (hero1bullet.x <= hamper.x + 17) &&
 863                                     (hero1bullet.y+2 <= hamper.y + 17) && (hero1bullet.y+2 >= hamper.y)) {
 864                                     hero1bullet.islive = false;
 865                                     window.clearInterval(hero1bullet.time);
 866                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 867                                     hero1bullet = null;
 868                                 }
 869                                 break;
 870                         }
 871                         break;
 872                     case 3:
 873                         switch (hamper.style) {
 874                             case 1:
 875                                 if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
 876                                     (hero1bullet.y+1 <= hamper.y + 10) && (hero1bullet.y+1 >= hamper.y)) {
 877                                     hero1bullet.islive = false;
 878                                     window.clearInterval(hero1bullet.time);
 879                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 880                                     hero1bullet = null;
 881                                     hampers[ha] = null;
 882                                 }
 883                                 break;
 884                             case 2:
 885                                 if ((hero1bullet.x >= hamper.x) && (hero1bullet.x <= hamper.x + 17) &&
 886                                     (hero1bullet.y+1 <= hamper.y + 20) && (hero1bullet.y+1 >= hamper.y)) {
 887                                     hero1bullet.islive = false;
 888                                     window.clearInterval(hero1bullet.time);
 889                                     hero1bulletBomb = new bulletBomb(hero1bullet.x - 68, hero1bullet.y - 50);
 890                                     hero1bullet = null;
 891                                 }
 892                                 break;
 893 
 894                         }
 895                         break;
 896                 }
 897             }
 898         }
 899 
 900     }
 901 }
 902 
 903 ///坦克爆炸类
 904 function TankBomb(x, y) {
 905     this.x = x;
 906     this.y = y;
 907     this.time = 0;
 908     this.imgsrc = "";
 909     this.isLive = true;
 910     
 911 
 912     this.drawBomb = function drawBomb() {
 913         if (this.time <= 2) {
 914             cxt.drawImage(bomb3, this.x, this.y, 50, 50);
 915         }
 916         if (this.time > 2 && this.time <= 5) {
 917             cxt.drawImage(bomb2, this.x, this.y, 50, 50);
 918         }
 919         if (this.time >= 6 && this.time <= 9) {
 920             cxt.drawImage(bomb1, this.x, this.y, 50, 50);
 921         }
 922         if (this.time >= 10 && this.time <= 12)
 923         {
 924             cxt.drawImage(bomb2, this.x, this.y, 50, 50);
 925         }
 926         if (this.time >= 13 && this.time <= 15)
 927         {
 928             cxt.drawImage(bomb3, this.x, this.y, 50, 50);
 929         }
 930         this.time++;
 931         if (this.time >= 15) {
 932             this.isLive = false;
 933             this.time = 0;
 934         }
 935     };
 936 }
 937 ///子弹爆炸类
 938 function bulletBomb(x, y)
 939 {
 940     this.x = x;
 941     this.y = y;
 942 
 943     this.drawBomb = function ()
 944     {
 945         cxt.drawImage(buBoImg, this.x, this.y);
 946         
 947     }
 948 }
 949 ///判断基地是否被打中
 950 function hitBase() {
 951     if (gameover) {
 952         return;
 953     }
 954     var enemybullet = null;
 955     for (var en = 0; en < enemyBullets.length; en++) {
 956         enemybullet = enemyBullets[en];
 957         if (enemybullet != null) {
 958             switch (enemybullet.direct) {
 959                 case 0:
 960                     break;
 961                 case 1:
 962                     if ((enemybullet.x >= 280) && (enemybullet.x <= 330) &&
 963                         (enemybullet.y + 1 >= 450) && (enemybullet.y <= 500)) {
 964                         gameover = true;
 965                         enemyBullets[en] = null;
 966                     }
 967                     break;
 968                 case 2:
 969                     if ((enemybullet.x + 1 >= 280) && (enemybullet.x <= 330) &&
 970                         (enemybullet.y + 2 >= 450) && (enemybullet.y + 2 <= 500)) {
 971                         gameover = true;
 972                         enemyBullets[en] = null;
 973                     }
 974                     break;
 975                 case 3:
 976                     if ((enemybullet.x >= 280) && (enemybullet.x <= 330) &&
 977                         (enemybullet.y + 1 >= 450) && (enemybullet.y <= 500)) {
 978                         gameover = true;
 979                         enemyBullets[en] = null;
 980                     }
 981                     break;
 982             }
 983         }
 984     }
 985     if (hero1bullet != null) {
 986         switch (hero1bullet.direct) {
 987             case 0:
 988                 break;
 989             case 1:
 990                 if ((hero1bullet.x >= 280) && (hero1bullet.x <= 330) &&
 991                     (hero1bullet.y + 1 >= 450) && (hero1bullet.y <= 500)) {
 992                     gameover = true;
 993                     window.clearInterval(hero1bullet.time);
 994                     hero1bullet = null;
 995                 }
 996                 break;
 997             case 2:
 998                 if ((hero1bullet.x + 1 >= 280) && (hero1bullet.x <= 330) &&
 999                     (hero1bullet.y + 2 >= 450) && (hero1bullet.y + 2 <= 500)) {
1000                     gameover = true;
1001                     window.clearInterval(hero1bullet.time);
1002                     hero1bullet = null;
1003                 }
1004                 break;
1005             case 3:
1006                 if ((hero1bullet.x >= 280) && (hero1bullet.x <= 330) &&
1007                     (hero1bullet.y + 1 >= 450) && (hero1bullet.y <= 500)) {
1008                     gameover = true;
1009                     window.clearInterval(hero1bullet.time);
1010                     hero1bullet = null;
1011                 }
1012                 break;
1013         }
1014     }
1015 }
1016 
1017 ///画出GAMEOVER
1018 var gameY = 500;
1019 function GameOver()
1020 {
1021     if (gameY > 193) {
1022         gameY = gameY - 4;
1023     }
1024     if (verygood)
1025     {
1026         cxt.beginPath();
1027         cxt.fillStyle = "#CCCCCC";
1028         cxt.fillRect(190, gameY, 215, 115)
1029         cxt.closePath();
1030         cxt.beginPath();
1031         cxt.fillStyle = "#ff0000";
1032         cxt.font = "35px Engravers MT";
1033         cxt.fillText("V E R Y", 212, gameY + 57);
1034         cxt.fillText("G O O D", 212, gameY + 90);
1035         cxt.closePath();
1036         return;
1037     }
1038     if (gameover)
1039     {
1040         cxt.beginPath();
1041         cxt.fillStyle = "#CCCCCC";
1042         cxt.fillRect(190, gameY, 215, 115)
1043         cxt.closePath();
1044         cxt.beginPath();
1045         cxt.fillStyle = "#ff0000";
1046         cxt.font = "35px Engravers MT";
1047         cxt.fillText("G A M E", 212, gameY + 57);
1048         cxt.fillText("O V E  R", 212, gameY + 90);
1049         cxt.closePath();
1050     }
1051     
1052 }

Draw.js

  1 ////阻碍物 Hamper类参数：x,y,style
  2 var hampers = new Array();
  3 ///画出保存基地的墙（一个20块砖头）
  4 var basehamX = 260;
  5 var basehamY = 490;
  6 for (var ham = 0; ham < 20; ham++) {
  7     if (ham < 7) {
  8         hampers[ham] = new Hamper(basehamX, basehamY - ham * 11, 1);
  9     }
 10     if (ham >= 7 && ham < 10) {
 11         hampers[ham] = new Hamper(basehamX + (ham - 6) * 18, basehamY - 5 * 11, 1);
 12     }
 13     if (ham >= 10 && ham < 13) {
 14         hampers[ham] = new Hamper(basehamX + (ham - 9) * 18, basehamY - 6 * 11, 1);
 15     }
 16     if (ham >= 13) {
 17         hampers[ham] = new Hamper(basehamX + 4 * 18, basehamY - (ham - 13) * 11, 1)
 18     }
 19 }
 20 $.getScript("script/js/map1.js");
 21 
 22 ///定义玩家1坦克
 23 var hero1born = new Born(180, 450);
 24 var hero1 = null;
 25 
 26 //敌人坦克出生数组
 27 var enemyborns = new Array();
 28 
 29 enemyborns[0] = new Born(0, 0);
 30 enemyborns[1] = new Born(275, 0);
 31 enemyborns[2] = new Born(550, 0);
 32 
 33 ///定义敌人数组
 34 var enemys = new Array();
 35 
 36 ///判断屏幕是否有5个敌人坦克，如果少于5个，则生产一个
 37 var enemy_loca = 1;
 38 function enemyBorn() {
 39     var enemynum = 0;
 40     for (var en = 0; en < enemys.length; en++) {
 41         if (enemys[en] != null) {
 42             enemynum++;
 43         }
 44     }
 45     if (enemynum < 5 && enemys.length < 20) {
 46         var enemyborn = null;
 47         switch (enemy_loca) {
 48             case 1:
 49                 enemyborn = new Born(0, 0);
 50                 enemy_loca = 2;
 51                 break;
 52             case 2:
 53                 enemyborn = new Born(275, 0);
 54                 enemy_loca = 3;
 55                 break;
 56             case 3:
 57                 enemyborn = new Born(550, 0);
 58                 enemy_loca = 1;
 59                 break;
 60             default:
 61                 enemyborn = new Born(0, 0);
 62                 break;
 63         }
 64 
 65         enemyborns.push(enemyborn);
 66     }
 67     if (enemynum <= 0 && enemys.length >= 20) {
 68         verygood = true;
 69     }
 70 
 71 }
 72 window.setInterval("enemyBorn()", 3000);
 73 
 74 ////爆炸
 75 var tankbombs = new Array();
 76 
 77 ///敌人坦克移动
 78 function moveEnemyTank() {
 79     for (var e = 0; e < enemys.length; e++) {
 80         if (enemys[e] != null && enemys[e].islive != 0) {
 81             enemys[e].run();
 82             enemys[e].attackEnemy(e);
 83         }
 84     }
 85 }
 86 window.setInterval("moveEnemyTank()", 100);
 87 
 88 function flashTankMap() {
 89     cxt.clearRect(0, 0, 600, 500);
 90     ///画出阻碍物
 91     for (var ha = 0; ha < hampers.length; ha++) {
 92         if (hampers[ha] != null) {
 93             hampers[ha].Draw();
 94         }
 95     }
 96     ///
 97 
 98     //画出玩家坦克
 99     if (hero1born != null) {
100         if (hero1born.born) {
101             hero1born.drawBorn();
102         }
103         else {
104             hero1 = new Hero(hero1born.x, hero1born.y, 2, 0, heroColor1, 4);
105             hero1born = null;
106         }
107     }
108     if (hero1 != null && hero1.islive != 0) {
109         DrawTank(hero1);
110     }
111     ///画出子弹
112     DrawBullet();
113     ///判断子弹是否打中坦克
114     ///画出敌人坦克
115     for (var bo = 0; bo < enemyborns.length; bo++) {
116         if (enemyborns[bo] != null) {
117             if (enemyborns[bo].born) {
118                 enemyborns[bo].drawBorn();
119             }
120             else {
121                 var enemy = null;
122                 switch (Math.round(Math.random() * 3)) {
123                     case 0:
124                         enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor1, 1);
125                         break;
126                     case 1:
127                         enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor2, 1);
128                         break;
129                     case 2:
130                         enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor3, 1);
131                         break;
132                     case 3:
133                         enemy = new Enemy(enemyborns[bo].x, enemyborns[bo].y, 3, 2, enemyColor4, 1);
134                         break;
135                 }
136                 if (enemy != null) {
137                     enemys.push(enemy);
138                 }
139                 enemyborns[bo] = null;
140             }
141         }
142     }
143     for (var e = 0; e < enemys.length; e++) {
144         if (enemys[e] != null && enemys[e].islive != 0) {
145             DrawTank(enemys[e]);
146         }
147     }
148     ///画出爆炸效果
149     for (var bo = 0; bo < tankbombs.length; bo++) {
150         if (tankbombs[bo].isLive) {
151             tankbombs[bo].drawBomb();
152         }
153     }
154     ////子弹爆炸
155     for (var bubo = 0; bubo < enemyBulletBombs.length; bubo++) {
156         if (enemyBulletBombs[bubo] != null) {
157             enemyBulletBombs[bubo].drawBomb();
158         }
159         enemyBulletBombs[bubo] = null;
160     }
161     if (hero1bulletBomb != null) {
162         hero1bulletBomb.drawBomb();
163         hero1bulletBomb = null;
164     }
165     ///画出基地
166     DrawSymbol();
167     ///调用判断基地是否被打中的函数
168     hitBase();
169     ///
170     GameOver();
171 }
172 flashTankMap();
173 
174 ///判断按键
175 var lastcode = 87;
176 function getCommand() {
177     if (hero1 == null || hero1.islive == 0 || gameover) {
178         return;
179     }
180     var keycode = event.keyCode;
181     switch (keycode) {
182         case 87:///上
183             if (lastcode == 87) {
184                 if (!heroTankCollision()) {
185                     hero1.moveUp();
186                 }
187             }
188             else {
189                 lastcode = 87;
190                 hero1.direct = 0;
191             }
192             break;
193         case 68:///右
194             if (lastcode == 68) {
195                 if (!heroTankCollision()) {
196                     hero1.moveRight();
197                 }
198             }
199             else {
200                 lastcode = 68;
201                 hero1.direct = 1;
202             }
203             break;
204         case 83:////下
205             if (lastcode == 83) {
206                 if (!heroTankCollision()) {
207                     hero1.moveDown();
208                 }
209             }
210             else {
211                 lastcode = 83;
212                 hero1.direct = 2;
213             }
214             break;
215         case 65:///左
216             if (lastcode == 65) {
217                 if (!heroTankCollision()) {
218                     hero1.moveLeft();
219                 }
220             }
221             else {
222                 lastcode = 65;
223                 hero1.direct = 3;
224             }
225             break;
226         case 74:////开炮
227             //hero1.tankbullet = "1";
228             hero1.attackEnemy();
229             break;
230         case 66:
231             break;
232         default:
233             break;
234     }
235     flashTankMap();
236 }
237 window.setInterval("flashTankMap()", 100);
238 window.setInterval("hitTank()", 20);
239 //玩家坦克与敌人坦克、阻碍物之间的碰撞
240 function heroTankCollision() {
241     //玩家坦克与敌人坦克之间的碰撞
242     var enemy = null;
243     for (var en = 0; en < enemys.length; en++) {
244         enemy = enemys[en];
245         if (enemy != null && enemy.islive != 0) {
246             switch (hero1.direct) {
247                 case 0:
248                     if ((hero1.x > enemy.x - 50) && (hero1.x < enemy.x + 50) &&
249                         ((hero1.y == enemy.y + 47) || (hero1.y == enemy.y + 48) || (hero1.y == enemy.y + 49) || (hero1.y == enemy.y + 50))) {
250                         return true;
251                     }
252                     //else {
253                     //    return false;
254                     //}
255                     break;
256                 case 1:
257                     if ((hero1.y > enemy.y - 50) && (hero1.y < enemy.y + 50) &&
258                         ((hero1.x + 47 == enemy.x) || (hero1.x + 50 == enemy.x) || (hero1.x + 49 == enemy.x) || (hero1.x + 48 == enemy.x))) {
259                         return true;
260                     }
261 
262                     break;
263                 case 2:
264                     if ((hero1.x > enemy.x - 50) && (hero1.x < enemy.x + 50) &&
265                         ((hero1.y + 47 == enemy.y) || (hero1.y + 50 == enemy.y) || (hero1.y + 49 == enemy.y) || (hero1.y + 48 == enemy.y))) {
266                         return true;
267                     }
268 
269                     break;
270                 case 3:
271                     if ((hero1.y > enemy.y - 50) && (hero1.y < enemy.y + 50) &&
272                         ((hero1.x == enemy.x + 47) || (hero1.x == enemy.x + 50) || (hero1.x == enemy.x + 49) || (hero1.x == enemy.x + 48))) {
273                         return true;
274                     }
275 
276                     break;
277             }
278         }
279     }
280     //玩家坦克与阻碍物之间的碰撞
281     var hamper = null;
282     for (var ha = 0; ha < hampers.length; ha++) {
283         hamper = hampers[ha];
284         if (hamper != null) {
285             switch (hampers[ha].style) {
286                 case 1:
287                     switch (hero1.direct) {
288                         case 0:
289                             if ((hero1.x > hamper.x - 50) && (hero1.x < hamper.x + 17) &&
290                                 ((hero1.y == hamper.y + 7) || (hero1.y == hamper.y + 8) || (hero1.y == hamper.y + 9) || (hero1.y == hamper.y + 10))) {
291                                 return true;
292                             }
293                             break;
294                         case 1:
295                             if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
296                                 ((hero1.x + 50 == hamper.x) || (hero1.x + 49 == hamper.x) || (hero1.x + 48 == hamper.x) || (hero1.x + 47 == hamper.x))) {
297                                 return true;
298                             }
299                             break;
300                         case 2:
301                             if ((hero1.x > hamper.x - 50) && (hero1.x < hamper.x + 17) &&
302                                 ((hero1.y + 50 == hamper.y) || (hero1.y + 49 == hamper.y) || (hero1.y + 48 == hamper.y) || (hero1.y + 47 == hamper.y))) {
303                                 return true;
304                             }
305                             break;
306                         case 3:
307                             if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
308                                 ((hero1.x == hamper.x + 17) || (hero1.x == hamper.x + 16) || (hero1.x == hamper.x + 15) || (hero1.x == hamper.x + 14))) {
309                                 return true;
310                             }
311                             break;
312                     }
313                     break;
314                 case 2:
315                     switch (hero1.direct) {
316                         case 0:
317                             if ((hero1.x >= hamper.x - 50) && (hero1.x <= hamper.x + 17) &&
318                                 ((hero1.y == hamper.y + 14) || (hero1.y == hamper.y + 15) || (hero1.y == hamper.y + 16) || (hero1.y == hamper.y + 17))) {
319                                 return true;
320                             }
321                             break;
322                         case 1:
323                             if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
324                                 ((hero1.x + 50 == hamper.x) || (hero1.x + 49 == hamper.x) || (hero1.x + 48 == hamper.x) || (hero1.x + 47 == hamper.x))) {
325                                 return true;
326                             }
327                             break;
328                         case 2:
329                             if ((hero1.x > hamper.x - 50) && (hero1.x < hamper.x + 17) &&
330                                 ((hero1.y + 50 == hamper.y) || (hero1.y + 49 == hamper.y) || (hero1.y + 48 == hamper.y) || (hero1.y + 47 == hamper.y))) {
331                                 return true;
332                             }
333                             break;
334                         case 3:
335                             if ((hero1.y > hamper.y - 50) && (hero1.y < hamper.y + 10) &&
336                                 ((hero1.x == hamper.x + 17) || (hero1.x == hamper.x + 16) || (hero1.x == hamper.x + 15) || (hero1.x == hamper.x + 14))) {
337                                 return true;
338                             }
339                             break;
340                     }
341                     break;
342                 case 3:
343                     break;
344                 case 4:
345                     break;
346             }
347         }
348     }
349 
350 }

opera_js.js

　　还有地图……
　　需要代码的可以联系我，我的邮箱是：YJZhen@live.com

　　如需更多教程，请到淘课学院 http://www.taokeschool.com/ 下载。

（欢迎关注“角速度”微信：jiaosud）

相关阅读:
第 4 章 MySQL 安全管理
 第 3 章 MySQL 存储引擎简介
 第 2 章 MySQL 架构组成
 道教的【五行】学说
 【matlab】MTATLAB解线性方程组
 RPolar项目进度记录
 numpy和TensorFlow的函数
 卷积
 腾讯QQ空间超分辨率技术TSR
混元桩
原文地址：https://www.cnblogs.com/yjzhen/p/3514639.html