学习一些小游戏的编写还是很有意思的,对于游戏的编写,我的理解就是一张张图片的刷新,比如游戏中控制一个物体移动,那需要做的就是一张一张刷新新的图片并清除掉前一张图片,便可以实现物体的移动了。为了模仿微信中的打飞机游戏,首先需要做的是抠图,这样才能实现效果接近一致。
从面向对象的角度来考虑,可以从游戏中抽象出三个对象:自己的飞机,子弹,敌方飞机。那在编程过程中也需要从这三个对象的角度出发来分析、编码,分别抽象出这三个对象的各个属性和涉及的方法,将其实现。随后再辅助写功能函数来控制游戏和丰满游戏性,便可以将该游戏实现。
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();
}
}