今天闲来无事，于是就打算教一个初学java script的女童鞋写点东西，因此为了兼顾趣味性与简易程度，果断想到了微信的打飞机小游戏。。

本来想用html5做的，但是毕竟人家才初学，连jquery都还不会，所以最终还是决定用原生的java script。虽说相对于园内的高手们而言代码算不上优雅，效率算不上高，不过对于初学者来练手还是足以。。

三个文件，main.js(主函数)，entity.js(实体类与工厂类)，util.js(工具类)，基本原理就是把位置信息保存在对象里面，然后在setInterval里面统一对所有对象进行更新显示。程序所用到的飞机与子弹图片都是从微信上截屏得来的。

先上图:

再上代码:

index.html:

http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
http://www.w3.org/1999/xhtml">



<script type="text/java script" src="js/util.js">
<script type="text/java script" src="js/entity.js">
<script type="text/java script" src="js/main.js">
<script type="text/java script">

window.onload=function(){
Main.init();
Util.g("startBtn").onclick=function(){
Main.start();
this.style.display="none";
}
}

main.js:

// java script 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 &&enemy.y+enemy.e.height>selfPlane.y+selfPlane.e.height/2
&&enemy.y 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 &&bullet.y 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;