今天閒來無事，於是就打算教一個初學JavaScript的女童鞋寫點東西，因此為了兼顧趣味性與簡易程度，果斷想到了微信的打飛機小游戲。。
本來想用html5做的，但是畢竟人家才初學，連jquery都還不會，所以最終還是決定用原生的javascript。雖說相對於園內的高手們而言代碼算不上優雅，效率算不上高，不過對於初學者來練手還是足以。。
三個文件，main.js(主函數)，entity.js(實體類與工廠類)，util.js(工具類)，基本原理就是把位置信息保存在對象裡面，然後在setInterval裡面統一對所有對象進行更新顯示。程序所用到的飛機與子彈圖片都是從微信上截屏得來的。
先上圖:
再上代碼:
index.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=utf-8" />
<title>打飛機</title>
<script type="text/javascript" src="js/util.js"></script>
<script type="text/javascript" src="js/entity.js"></script>
<script type="text/javascript" src="js/main.js"></script>
<script type="text/javascript">
window.onload=function(){
Main.init();
Util.g("startBtn").onclick=function(){
Main.start();
this.style.display="none";
}
}
</script>
</head>
<body>
<div id="parent" >
<div >積分:<span id="score">0</span></div>
<button
id="startBtn">
點擊開始
</button>
</div>
</body>
</html>
main.js:
// JavaScript Document
var Main={
init:function(){
Util.init();
},
_totalEnemies:8,
start:function(){
//初始化敵機
enemyPlaneFactory.creatEnemyPlane(this._totalEnemies);
//初始化自己
selfPlane.init();
//初始化子彈
bulletFactory.creatBullet(100);
//開始渲染畫面
this._render();
//開始射擊子彈
this._startShoot();
//初始化鍵盤事件響應
this._initEvent();
},
//渲染定時器
_render_t:null,
_render:function(){
this._render_t=setInterval(function(){
var enemys=enemyPlaneFactory.enemys;
for(var i in enemys){
var enemy=enemys[i];
enemy.move(0,enemy.speed);
if(enemy.x+enemy.e.width>selfPlane.x+10
&&enemy.x<selfPlane.x+selfPlane.e.width-10
&&enemy.y+enemy.e.height>selfPlane.y+selfPlane.e.height/2
&&enemy.y<selfPlane.y+selfPlane.e.height){
enemy.isDied=true;
clearInterval(Main._render_t);
clearInterval(Main._startShoot_t);
var b=window.confirm("對不起，您已經掛了，是否重玩?")
if(b){
window.location.reload();
}
}
if(enemy.y>Util.windowHeight||enemy.isDied){
enemy.restore();
}
}
var bullets=bulletFactory.bullets;
for(var i in bullets){
var bullet=bullets[i];
bullet.move(0,-bullet.speed);
for(var i in enemys){
var enemy=enemys[i];
//判斷子彈是否擊中敵機，如果擊中則隱藏子彈，殺死敵機,增加積分..
if(bullet.y>10
&&bullet.x>enemy.x
&&bullet.x<enemy.x+enemy.e.width
&&bullet.y<enemy.y+enemy.e.height){
enemy.isDied=true;
bullet.e.style.top=-bullet.e.height;
selfPlane.score+=50;
Util.scoreSpan.innerHTML=selfPlane.score+"";
}
}
}
},1000/15);
},
//射擊定時器
_startShoot_t:null,
_startShoot:function(){
var i=0;
var bullets=bulletFactory.bullets;
var bulletsCount=bullets.length;
this._startShoot_t=setInterval(function(){
if(i>=bulletsCount){
i=0;
}
var bullet=bullets[i];
bullet.moveTo(selfPlane.x+selfPlane.e.width/2-bullet.e.width/2,selfPlane.y-bullet.e.height-3);
i++;
},300);
},
keyMove:10,
_initEvent:function(){
window.onkeydown=function(e){
/*
37:左
38:上
39:右
40:下
*/
var keynum;
var left=37,up=38,right=39,down=40;
if(window.event){// IE
keynum = e.keyCode
}else if(e.which) {// Netscape/Firefox/Opera
keynum = e.which
}
switch(keynum){
case left:
selfPlane.move(-Main.keyMove,0);
break;
case up:
selfPlane.move(0,-Main.keyMove);
break;
case right:
selfPlane.move(Main.keyMove,0);
break;
case down:
selfPlane.move(0,Main.keyMove);
break;
default:
break;
}
//console.log(keynum);
}
}
}
entity.js:
//自身的對象
var selfPlane={
x:0,
y:0,
score:0,
e:null,
init:function(){
this.x=(Util.windowWidth-Util.selfPlaneElement.width)/2;//相對於父窗體的x偏移(css:left)
this.y=Util.windowHeight-Util.selfPlaneElement.height;//相對於父窗體的y偏移(css:top)
this.e=Util.selfPlaneElement;//對應的dom元素
Util.selfPlaneElement.style.left=this.x+"px";
Util.selfPlaneElement.style.top=this.y+"px";
Util.parentElement.appendChild(this.e);
},
move:function(moveX,moveY){
var x=this.x+moveX;
var y=this.y+moveY;
if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){
return ;
}
if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){
return ;
}
this.x=x;
this.y=y;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
},
moveTo:function(x,y){
if(x<0-this.e.width/2||x>Util.windowWidth-this.e.width/2){
return ;
}
if(y<0-this.e.height/2||y>Util.windowHeight-this.e.height/2){
return ;
}
this.x=x;
this.y=y;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
}
}
//敵機的類
var enemyPlane=function(x,y,speed){
this.x=x;
this.y=y;
this.e=Util.enemyPlaneElement.cloneNode(true);
this.e.style.left=x;
this.e.style.top=y;
this.e.style.display="none";
Util.parentElement.appendChild(this.e);
this.e.style.display="block";
this.speed=speed;
this.isDied=false;
}
//prototype:原型
enemyPlane.prototype.move=function(moveX,moveY){
this.x+=moveX;
this.y+=moveY;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
}
//敵人復活
enemyPlane.prototype.restore=function(){
this.x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);
this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;
this.speed=2+Math.random()*4;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
this.isDied=false;
}
//敵機工廠
var enemyPlaneFactory={
enemys:[],
creatEnemyPlane:function(n){
for(var i=0;i<n;i++){
//0~1 乘以窗口寬度，得到的就是從0~窗口寬度的一個隨機x值
var x=Math.random()*(Util.windowWidth-Util.enemyPlaneElement.width);
var y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;
var speed=2+Math.random()*4;
var ep=new enemyPlane(x,y,speed);
this.enemys.push(ep);
}
}
}
//子彈
var bullet=function(x,y,speed){
this.x=x;
this.y=y;
this.speed=speed;
this.e=Util.bulletElement.cloneNode(true);
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
Util.parentElement.appendChild(this.e);
this.iSUSEd=false;
}
bullet.prototype.move=function(moveX,moveY){
this.x+=moveX;
this.y+=moveY;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
}
bullet.prototype.moveTo=function(X,Y){
this.x=X;
this.y=Y;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
}
//子彈恢復
bullet.prototype.restore=function(){
this.x=Main.self
this.y=-Math.random()*Util.windowHeight-Util.enemyPlaneElement.height;
this.speed=2+Math.random()*4;
this.e.style.left=this.x+"px";
this.e.style.top=this.y+"px";
}
//子彈工廠
var bulletFactory={
bullets:[],
creatBullet:function(n){
for(var i=0;i<n;i++){
var b=new bullet(0,-Util.bulletElement.height,20);
this.bullets.push(b);
}
}
}
util.js:
// JavaScript Document
var Util={
windowWidth:350,
windowHeight:480,
selfPlaneElement:null,
enemyPlaneElement:null,
bulletElement:null,
parentElement:null,
scoreSpan:null,
g:function(id){
return document.getElementById(id);
},
init:function(){
this.parentElement=this.g("parent");
this.selfPlaneElement=this._loadImg("images/self.gif");
this.enemyPlaneElement=this._loadImg("images/boss.gif");
this.bulletElement=this._loadImg("images/bullet.jpg");
this.scoreSpan=this.g("score");
},
_loadImg:function(src){
var e=document.createElement("img");
e.style.position="absolute";
e.src=src;
return e;
}
}
原生JavaScript開發仿微信打飛機小游戲源碼下載地址：
免費下載地址在 http://linux.linuxidc.com/
用戶名與密碼都是www.linuxidc.com
具體下載目錄在 /2014年資料/2月/8日/原生JavaScript開發仿微信打飛機小游戲
下載方法見 http://www.linuxidc.com/Linux/2013-07/87684.htm