在這個版本里面有三個更新:
1. 玩家飛機，子彈和背景用了微信打飛機裏面的圖片。無奈摳圖水平差。子彈過大。
2.玩家飛機不允許出界面
3.子彈飛機界面外就移除
HTML代碼和JS代碼如下：(建議用Chrome瀏覽器運行，其他瀏覽器沒測試過。)
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>微信 全民 打飛機</title>
<!--
郵件: [email protected]
-->
<!--
在這個小demo裏面，我沒有用jQuery.
是的，jQuery可以做很多事，但他畢竟是JavaScript庫，基礎的是JavaScript.
搞笑的是,許多剛入門JavaScript的同事，居然問我先學jQuery,而且老把jQuery和JavaScript概念搞反。
我也是這樣，先學的jQuery,後來才發現JavaScript同樣可以很簡單的處理很多事情，許多場合jQuery反而把事情搞複雜。
-->
<!--
在這個版本里，你可以用"A","S","D","W"來移動你的飛機，並且飛機持續發現子彈。
-->
<style type="text/css">
canvas#mycanvas {
/*讓canvas顯示在瀏覽器正中央 */
position: absolute;
margin: auto auto;
top: 5px;
left: 5px;
right: 5px;
bottom: 5px;
background: url(image/bg.jpg);
border: 1px solid #d3d3d3;
}
img{
display:none;
}
</style>
</head>
<body>
<!-- 提供兩個隱藏的IMG，用來畫飛機和子彈 -->
<img src="image/flyer.jpg" id="playerImg" />
<img src="image/bullet.jpg" id="bulletImg" />
<!--
你需要指定canvas的width，而不是在style裏面聲明。後者無效
-->
<canvas id="mycanvas" width="400" height="600">
</canvas>
<script src="hitFlyer3.js" ></script>
</body>
</html>//涉及到移除數組某個元素，擴展下Array
Array.prototype.remove=function(obj){
var index=this.indexOf(obj);
if(index==-1){
return this;
}
delete obj;
this.splice(index,1);
return this;
}
/**
* 我把JS放在body的最後面，不然的話你要在window.onload事件後執行js. 代碼可能像這個樣子。 <code>
* window.addEventListener("load",function(){
* //todo put your code
* });
*
*</code>
*/
var mycanvas = document.getElementById("mycanvas");
var ctx = mycanvas.getContext("2d");
var playerImg = document.getElementById("playerImg");
var bulletImg = document.getElementById("bulletImg");
var canWidth = mycanvas.width;
var canHeight = mycanvas.height;
// 子彈容器
var bulletList = new Array();
/*
* 因爲玩家飛機只有一個實例，所以我們直接創造這個player對象，而不是創造一個Player類。
*/
var player = {
// 玩家飛機對象
imgObj : playerImg,
width : playerImg.width,
height : playerImg.height,
step : 5,// 當按住移動鍵（A,S,D,W）玩家飛機每次移動的距離。
position : {
x : 0,
y : 0
}
};
/*
* 飛機顯示方法，將移到(x,y)處
*/
player.display = function(x, y) {
this.position.x = x;
this.position.y = y;
// 畫玩家飛機圖片
ctx.drawImage(this.imgObj, x, y);
}
// 飛機移動方法
player.move = function(dir) {
switch (dir) {
case "up":
// 保證玩家飛機移動不出界
if (this.position.y <= 0)
return;
this.position.y -= this.step;
break;
case "down":
if (this.position.y >= canHeight-this.height)
return;
this.position.y += this.step;
break;
case "left":
if (this.position.x <= 0)
return;
this.position.x -= this.step;
break;
case "right":
if (this.position.x >= canWidth-this.width)
return;
this.position.x += this.step;
break;
}
// 先移走先前的圖片，再重畫
this.miss();
this.display(this.position.x, this.position.y);
}
// 移除玩家飛機對象
player.miss = function() {
// 不介意擴大Rectangle擦除
ctx.clearRect(this.position.x-5, this.position.y-5, this.width+10, this.height+10);
}
// 子彈會生成很多，所以聲明子彈類
function Bullet(ctx) {
this.imgObj = bulletImg;
this.width = this.imgObj.width;
this.height = this.imgObj.height;
this.ctx = ctx;
// 每個子彈實例有自己的位置
this.x = 0;
this.y = 0;
// 子彈每次移動距離
this.step = 40;
}
/*
* 每隻子彈實例有它們自己的屬性，但是共享方法。用prototype聲明方法將共享
*/
// 顯示子彈
Bullet.prototype.display = function(x, y) {
this.x = x;
this.y = y;
ctx.drawImage(bulletImg, this.x, this.y);
}
// 移除子彈
Bullet.prototype.miss = function() {
this.ctx.clearRect(this.x, this.y, this.width, this.height);
}
Bullet.prototype.move = function() {
// 如果子彈飛出界，移走，當然不顯示了。
if(this.y<=0){
bulletList.remove(this);
return;
}
// 首先移走行前的子彈，再按新位置顯示，子彈就移動了。
this.miss();
this.display(this.x, this.y - this.step);
}
// 玩家飛機發射子彈.
player.fire = function() {
var b = new Bullet(ctx);
// 從玩家飛機的中上方發出子彈
b.display(this.position.x + this.width / 2 - b.width / 2 + 1,
this.position.y - b.height);
bulletList.push(b);
}
// 在界面上底中部顯示玩家飛機
player.display((canWidth - player.width) / 2, canHeight - player.height);
// 增加按鍵(A,S,D,W)時，玩家飛機移動事件
// keypress 事件會每隔33秒觸發一次。我不知道其他瀏覽器和Java Swing裏面是不是也是這樣的。
window.addEventListener("keypress", function(e) {
var keyCode = e.keyCode;
var dir = "";
if (keyCode === 119) {
// w
dir = "up";
} else if (keyCode === 100) {
// d
dir = "right";
} else if (keyCode === 115) {
// s
dir = "down";
} else if (keyCode === 97) {
// a
dir = "left";
}
// 把方向傳到player.move方法裏
player.move(dir);
});
// 玩家飛機會一直髮射子彈。
window.setInterval(function() {
// 玩家飛機發射
player.fire();
// 子彈移動
for ( var i = 0; i < bulletList.length; i++) {
bulletList[i].move();
console.log(bulletList.length);
}
}, 60);
運行界面：
