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

来源：互联网发布：网络课程加速器编辑：程序博客网时间：2024/06/05 14:13

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

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

html代码如下：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><meta http-equiv="Content-Type" content="text/html; charset=gb2312" /><title>无标题文档</title></head><body><style>#myCanvas{position:absolute;left:600px;top:50px;border:1px solid #c3c3c3;margin:auto;background-image:url(images/background.jpg);}img{display:none;}</style><img src="images/plane.jpg" id="planeImg"><img src="images/enemyL.jpg" id="enemyLImg"><img src="images/enemyM.jpg" id="enemyMImg"><img src="images/enemyS.jpg" id="enemySImg"><img src="images/bullet.jpg" id="bulletImg"><img src="images/explode.jpg" id="explodeImg"><canvas id="myCanvas" width="500" height="700">Your browser does not support the canvas element.</canvas><script type="text/javascript" src="PlaneGame.js"></script></body></html>

js代码如下：

// JavaScript Document//获取canvas以及被隐藏的image对象var c = document.getElementById("myCanvas");var cxt = c.getContext("2d");var planeImg = document.getElementById("planeImg");var enemyLImg = document.getElementById("enemyLImg");var enemyMImg = document.getElementById("enemyMImg");var enemySImg = document.getElementById("enemySImg");var bulletImg = document.getElementById("bulletImg");var explodeImg = document.getElementById("explodeImg");var canWidth = c.width;var canHeight = c.height;//定义子弹、敌机对象数组var bulletList = new Array();var enemyList = new Array();var plane = new Plane(245,650);plane.showPlane();//监听键盘按键，WASD控制左右上下window.addEventListener("keypress", function(e){var keyCode = e.keyCode;var direction = "";switch (keyCode){case 119:direction = "up";break;case 115:direction = "down";break;case 97:direction = "left";break;case 100:direction = "right";break;}plane.movePlane(direction);});//定时控制子弹移动window.setInterval(function(){plane.fire();for (var i = 0; i < bulletList.length; i++){var b = bulletList[i];if ((b.y - b.step) >= 50){b.moveBullet();}else {b.clcBullet();bulletList.splice(i, 1);//i -= 1;}}CheckCollision();CheckLife();},30);//随机产生敌机阵容function CreateEnemy(){var temp = Math.random()*251;var type = "";var x = Math.random()*(canWidth-enemyLImg.width);if (temp >= 0 && temp <= 30){type = "large";}else if (temp > 30 && temp <= 150){type = "medium";}else if(temp > 150 && temp <= 251){type = "small";}var enemy = new Enemy(type, x, 0)enemyList.push(enemy);enemy.showEnemy();}//定时控制敌机产生window.setInterval(function(){CreateEnemy();},2000);//定时控制敌机移动window.setInterval(function(){for (var i = 0; i < enemyList.length; i++){var e = enemyList[i];if ((e.y + e.step) < canHeight){e.moveEnemy();}else{e.clcEnemy();enemyList.splice(i, 1);//i -= 1;}}},100);//检查敌机是否被子弹击中function CheckCollision(){for (var i = 0; i < enemyList.length; i++){var e = enemyList[i];for (var j = 0; j < bulletList.length; j++){var b = bulletList[j];if ( (b.y<=(e.y+e.height) && b.y>=e.y) && ((e.x-b.width)<=b.x && b.x<=(e.x+e.width)) ){b.clcBullet();bulletList.splice(j, 1);//j -= 1;e.life -= 1;if (e.life <= 0){cxt.drawImage(explodeImg, e.x, e.y);cxt.clearRect(e.x, e.y, explodeImg.width, explodeImg.height);e.clcEnemy();enemyList.splice(i, 1);//i -= 1;}}}}}//检查飞机是否被碰撞击毁function CheckLife(){for (var i = 0; i < enemyList.length; i++){var e = enemyList[i];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)){plane.clcPlane();alert("game over");window.location.href = "http://www.baidu.com";}}}//定义飞机对象function Plane(x, y){this.x = x;this.y = y;this.planeObj = planeImg;this.width = planeImg.width;this.height = planeImg.height;this.life = 1;this.step = 20;this.showPlane = function(){cxt.drawImage(this.planeObj, this.x, this.y);}this.movePlane = function(direction){this.clcPlane();switch(direction){case "up":if ((this.y-this.step) >=0){this.y -= this.step;}break;case "down":if ((this.y + this.step) <= (canHeight - this.height)){this.y += this.step;}break;case "left":if ((this.x - this.step) >= 0){this.x -= this.step;}break;case "right":if ((this.x + this.step) <= (canWidth - this.width)){this.x += this.step;}break;}this.showPlane();}this.clcPlane = function(){cxt.clearRect(this.x, this.y, this.width, this.height);}this.fire = function(){var bullet = new Bullet(this.x+this.width/2-2, this.y-11);bullet.showBullet();bulletList.push(bullet);}}//定义子弹对象function Bullet(x, y){this.bulletObj = bulletImg;this.x = x;this.y = y;this.width = bulletImg.width;this.height = bulletImg.height;this.step = 20;this.showBullet = function(){cxt.drawImage(this.bulletObj, this.x, this.y);}this.clcBullet = function(){cxt.clearRect(this.x, this.y, this.width, this.height);}this.moveBullet = function(){this.clcBullet();this.y -= this.step;this.showBullet();}}//定义敌机对象function Enemy(type,x,y){this.type = type;if (this.type == "large"){this.enemyObj = enemyLImg;this.width = enemyLImg.width;this.height = enemyLImg.height;this.life = 10;}else if (this.type == "medium"){this.enemyObj = enemyMImg;this.width = enemyMImg.width;this.height = enemyMImg.height;this.life = 6;}else if (this.type == "small"){this.enemyObj = enemySImg;this.width = enemySImg.width;this.height = enemySImg.height;this.life = 1;}this.x = x;this.y = y;//this.width = this.enemyObj.width;//this.height = this.enemyObj.height;this.step = 5;this.showEnemy = function(){cxt.drawImage(this.enemyObj, this.x, this.y);}this.clcEnemy = function(){cxt.clearRect(this.x, this.y, this.width, this.height);}this.moveEnemy = function(){this.clcEnemy();this.y += this.step;this.showEnemy();}}