學習一些小遊戲的編寫還是很有意思的，對於遊戲的編寫，我的理解就是一張張圖片的刷新，比如遊戲中控制一個物體移動，那需要做的就是一張一張刷新新的圖片並清除掉前一張圖片，便可以實現物體的移動了。爲了模仿微信中的打飛機遊戲，首先需要做的是摳圖，這樣才能實現效果接近一致。
從面向對象的角度來考慮，可以從遊戲中抽象出三個對象：自己的飛機，子彈，敵方飛機。那在編程過程中也需要從這三個對象的角度出發來分析、編碼，分別抽象出這三個對象的各個屬性和涉及的方法，將其實現。隨後再輔助寫功能函數來控制遊戲和豐滿遊戲性，便可以將該遊戲實現。
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();
}
}