JavaScript学习之仿微信打飞机游戏

学习一些小游戏的编写还是很有意思的,对于游戏的编写,我的理解就是一张张图片的刷新,比如游戏中控制一个物体移动,那需要做的就是一张一张刷新新的图片并清除掉前一张图片,便可以实现物体的移动了。为了模仿微信中的打飞机游戏,首先需要做的是抠图,这样才能实现效果接近一致。

从面向对象的角度来考虑,可以从游戏中抽象出三个对象:自己的飞机,子弹,敌方飞机。那在编程过程中也需要从这三个对象的角度出发来分析、编码,分别抽象出这三个对象的各个属性和涉及的方法,将其实现。随后再辅助写功能函数来控制游戏和丰满游戏性,便可以将该游戏实现。

html代码如下:

 

[html][/html] view plaincopy

  1. <!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
  2. <html xmlns=”http://www.w3.org/1999/xhtml”>
  3. <head>
  4. <meta http-equiv=”Content-Type” content=”text/html; charset=gb2312″ />
  5. <title>无标题文档</title>
  6. </head>
  7. <body>
  8. <style>
  9. #myCanvas
  10. {
  11.     position:absolute;
  12.     left:600px;
  13.     top:50px;
  14.     border:1px solid #c3c3c3;
  15.     margin:auto;
  16.     background-image:url(images/background.jpg);
  17. }
  18. img
  19. {
  20.     display:none;
  21. }
  22. </style>
  23. <img src=”images/plane.jpg” id=”planeImg”>
  24. <img src=”images/enemyL.jpg” id=”enemyLImg”>
  25. <img src=”images/enemyM.jpg” id=”enemyMImg”>
  26. <img src=”images/enemyS.jpg” id=”enemySImg”>
  27. <img src=”images/bullet.jpg” id=”bulletImg”>
  28. <img src=”images/explode.jpg” id=”explodeImg”>
  29. <canvas id=”myCanvas” width=”500″ height=”700″>
  30. Your browser does not support the canvas element.
  31. </canvas>
  32. <script type=”text/javascript” src=”PlaneGame.js”></script>
  33. </body>
  34. </html>

js代码如下:

 

 

[javascript][/javascript] view plaincopy

  1. // JavaScript Document
  2. //获取canvas以及被隐藏的image对象
  3. var c = document.getElementById(“myCanvas”);
  4. var cxt = c.getContext(“2d”);
  5. var planeImg = document.getElementById(“planeImg”);
  6. var enemyLImg = document.getElementById(“enemyLImg”);
  7. var enemyMImg = document.getElementById(“enemyMImg”);
  8. var enemySImg = document.getElementById(“enemySImg”);
  9. var bulletImg = document.getElementById(“bulletImg”);
  10. var explodeImg = document.getElementById(“explodeImg”);
  11. var canWidth = c.width;
  12. var canHeight = c.height;
  13. //定义子弹、敌机对象数组
  14. var bulletList = new Array();
  15. var enemyList = new Array();
  16. var plane = new Plane(245,650);
  17. plane.showPlane();
  18. //监听键盘按键,WASD控制左右上下
  19. window.addEventListener(“keypress”, function(e)
  20. {
  21.     var keyCode = e.keyCode;
  22.     var direction = “”;
  23.     switch (keyCode)
  24.     {
  25.         case 119:
  26.         direction = “up”;
  27.         break;
  28.         case 115:
  29.         direction = “down”;
  30.         break;
  31.         case 97:
  32.         direction = “left”;
  33.         break;
  34.         case 100:
  35.         direction = “right”;
  36.         break;
  37.     }
  38.     plane.movePlane(direction);
  39. });
  40. //定时控制子弹移动
  41. window.setInterval(function()
  42.                             {
  43.                                 plane.fire();
  44.                                 for (var i = 0; i < bulletList.length; i++)
  45.                                 {
  46.                                     var b = bulletList[i];
  47.                                     if ((b.y – b.step) >= 50)
  48.                                     {
  49.                                         b.moveBullet();
  50.                                     }
  51.                                     else
  52.                                     {
  53.                                         b.clcBullet();
  54.                                         bulletList.splice(i, 1);
  55.                                 //      i -= 1;
  56.                                     }
  57.                                 }
  58.                                 CheckCollision();
  59.                                 CheckLife();
  60.                             },30);
  61. //随机产生敌机阵容
  62. function CreateEnemy()
  63. {
  64.     var temp = Math.random()*251;
  65.     var type = “”;
  66.     var x = Math.random()*(canWidth-enemyLImg.width);
  67.     if (temp >= 0 && temp <= 30)
  68.     {
  69.         type = “large”;
  70.     }
  71.     else if (temp > 30 && temp <= 150)
  72.     {
  73.         type = “medium”;
  74.     }
  75.     else if(temp > 150 && temp <= 251)
  76.     {
  77.         type = “small”;
  78.     }
  79.     var enemy = new Enemy(type, x, 0)
  80.     enemyList.push(enemy);
  81.     enemy.showEnemy();
  82. }
  83. //定时控制敌机产生
  84. window.setInterval(function()
  85.                             {
  86.                                 CreateEnemy();
  87.                             },2000);
  88. //定时控制敌机移动
  89. window.setInterval(function()
  90.                             {
  91.                                 for (var i = 0; i < enemyList.length; i++)
  92.                                 {
  93.                                     var e = enemyList[i];
  94.                                     if ((e.y + e.step) < canHeight)
  95.                                     {
  96.                                         e.moveEnemy();
  97.                                     }
  98.                                     else
  99.                                     {
  100.                                         e.clcEnemy();
  101.                                         enemyList.splice(i, 1);
  102.                                 //      i -= 1;
  103.                                     }
  104.                                 }
  105.                             },100);
  106. //检查敌机是否被子弹击中
  107. function CheckCollision()
  108. {
  109.     for (var i = 0; i < enemyList.length; i++)
  110.     {
  111.         var e = enemyList[i];
  112.         for (var j = 0; j < bulletList.length; j++)
  113.         {
  114.             var b = bulletList[j];
  115.             if ( (b.y<=(e.y+e.height) && b.y>=e.y) && ((e.x-b.width)<=b.x && b.x<=(e.x+e.width)) )
  116.             {
  117.                 b.clcBullet();
  118.                 bulletList.splice(j, 1);
  119. //              j -= 1;
  120.                 e.life -= 1;
  121.                 if (e.life <= 0)
  122.                 {
  123.                 cxt.drawImage(explodeImg, e.x, e.y);
  124.                 cxt.clearRect(e.x, e.y, explodeImg.width, explodeImg.height);
  125.                 e.clcEnemy();
  126.                 enemyList.splice(i, 1);
  127.     //          i -= 1;
  128.                 }
  129.             }
  130.         }
  131.     }
  132. }
  133. //检查飞机是否被碰撞击毁
  134. function CheckLife()
  135. {
  136.     for (var i = 0; i < enemyList.length; i++)
  137.     {
  138.         var e = enemyList[i];
  139.         if (((e.y+e.height)>=plane.y) && (e.y<=(plane.y+plane.height)) && (e.x+e.width)>=plane.x && e.x<=(plane.x+plane.width))
  140.         {
  141.             plane.clcPlane();
  142.             alert(“game over”);
  143.             window.location.href = “http://www.baidu.com”;
  144.         }
  145.     }
  146. }
  147. //定义飞机对象
  148. function Plane(x, y)
  149. {
  150.     this.x = x;
  151.     this.y = y;
  152.     this.planeObj = planeImg;
  153.     this.width = planeImg.width;
  154.     this.height = planeImg.height;
  155.     this.life = 1;
  156.     this.step = 20;
  157.     this.showPlane = function()
  158.     {
  159.         cxt.drawImage(this.planeObj, this.x, this.y);
  160.     }
  161.     this.movePlane = function(direction)
  162.     {
  163.         this.clcPlane();
  164.         switch(direction)
  165.         {
  166.             case “up”:
  167.             if ((this.y-this.step) >=0)
  168.             {
  169.                 this.y -= this.step;
  170.             }
  171.             break;
  172.             case “down”:
  173.             if ((this.y + this.step) <= (canHeight – this.height))
  174.             {
  175.                 this.y += this.step;
  176.             }
  177.             break;
  178.             case “left”:
  179.             if ((this.x – this.step) >= 0)
  180.             {
  181.                 this.x -= this.step;
  182.             }
  183.             break;
  184.             case “right”:
  185.             if ((this.x + this.step) <= (canWidth – this.width))
  186.             {
  187.                 this.x += this.step;
  188.             }
  189.             break;
  190.         }
  191.         this.showPlane();
  192.     }
  193.     this.clcPlane = function()
  194.     {
  195.         cxt.clearRect(this.x, this.y, this.width, this.height);
  196.     }
  197.     this.fire = function()
  198.     {
  199.         var bullet = new Bullet(this.x+this.width/2-2, this.y-11);
  200.         bullet.showBullet();
  201.         bulletList.push(bullet);
  202.     }
  203. }
  204. //定义子弹对象
  205. function Bullet(x, y)
  206. {
  207.     this.bulletObj = bulletImg;
  208.     this.x = x;
  209.     this.y = y;
  210.     this.width = bulletImg.width;
  211.     this.height = bulletImg.height;
  212.     this.step = 20;
  213.     this.showBullet = function()
  214.     {
  215.         cxt.drawImage(this.bulletObj, this.x, this.y);
  216.     }
  217.     this.clcBullet = function()
  218.     {
  219.         cxt.clearRect(this.x, this.y, this.width, this.height);
  220.     }
  221.     this.moveBullet = function()
  222.     {
  223.         this.clcBullet();
  224.         this.y -= this.step;
  225.         this.showBullet();
  226.     }
  227. }
  228. //定义敌机对象
  229. function Enemy(type,x,y)
  230. {
  231.     this.type = type;
  232.     if (this.type == “large”)
  233.     {
  234.         this.enemyObj = enemyLImg;
  235.         this.width = enemyLImg.width;
  236.         this.height = enemyLImg.height;
  237.         this.life = 10;
  238.     }
  239.     else if (this.type == “medium”)
  240.     {
  241.         this.enemyObj = enemyMImg;
  242.         this.width = enemyMImg.width;
  243.         this.height = enemyMImg.height;
  244.         this.life = 6;
  245.     }
  246.     else if (this.type == “small”)
  247.     {
  248.         this.enemyObj = enemySImg;
  249.         this.width = enemySImg.width;
  250.         this.height = enemySImg.height;
  251.         this.life = 1;
  252.     }
  253.     this.x = x;
  254.     this.y = y;
  255.     //this.width = this.enemyObj.width;
  256.     //this.height = this.enemyObj.height;
  257.     this.step = 5;
  258.     this.showEnemy = function()
  259.     {
  260.         cxt.drawImage(this.enemyObj, this.x, this.y);
  261.     }
  262.     this.clcEnemy = function()
  263.     {
  264.         cxt.clearRect(this.x, this.y, this.width, this.height);
  265.     }
  266.     this.moveEnemy = function()
  267.     {
  268.         this.clcEnemy();
  269.         this.y += this.step;
  270.         this.showEnemy();
  271.     }
  272. }

标签