原生js打飞机小游戏

window.onload = function(){
var oBtn = document.getElementById('gameBtn');
oBtn.onclick = function(){
this.style.display = 'none';
Game.init('div1');//把父级传进去
};
};
//创建Game单体

var Game  = {
life:1,//生命值
score:0,//获得分数
direction:[1,1,1,1],//方向控制 -> 对应顺序是： 上 右 下 左 -> 1:表示开关打开
autoShoot:1,//是否自动发射 -> 1:表示自动发射 0：表示空格键发射
oEnemy:{ //敌人的信息
1:{style:'enemy1', blood:1, score:1},
2:{style:'enemy2', blood:2, score:2},
3:{style:'enemy3', blood:3, score:3}
},
air:{    //创建飞机
style:'air1',//飞机
bulletStyle:'bullet'//子弹
},
gk:{    //敌机矩阵 和 移动速度 时间
colNum:20,
iSpeedY:10,
time:2000
},
init:function(id){    //启动函数
this.oParent = document.getElementById(id);
this.createScore();
this.createAir();//创建飞机
this.createField();//创建阵地
},
createScore : function(){  //创建积分
var oS = document.createElement('div');
oS.id = 'score';
oS.innerHTML = '分数:<span>0</span>分';
this.oParent.appendChild(oS);
this.oSNum = oS.getElementsByTagName('span')[0];
},
createAir:function(){
var oAir = document.createElement('div');
oAir.className = this.air.style;
this.oAir = oAir;//全局
this.oParent.appendChild( oAir );
oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth) / 2 + 'px';
oAir.style.top = this.oParent.offsetHeight - oAir.offsetHeight + 'px';
this.bindEventAir();//给飞机绑定操作事件,增加一个开关控制是否可以上下
},
bindEventAir:function(){
var This    = this,
timer    = null,
iNum    = 0;
function show(dir,flag){ //方向 ， 标志
var leftPos     = flag[3],
upPos        = flag[0],
rightPos    = flag[1],
downPos        = flag[2];
if(dir == 1 && leftPos){
This.oAir.style.left = (This.oAir.offsetLeft - 10) <= 0 ? '0' + 'px' :  (This.oAir.offsetLeft - 10) + 'px';
} else if( dir == 3 && rightPos){
This.oAir.style.left = ( (This.oAir.offsetLeft + 10) >= (This.oParent.offsetWidth - This.oAir.offsetWidth)) ? (This.oParent.offsetWidth - This.oAir.offsetWidth) +　'px' : (This.oAir.offsetLeft + 10) + 'px';
} else if( dir == 2 && upPos){
This.oAir.style.top = (This.oAir.offsetTop -10) <= 0 ? '0' + 'px': (This.oAir.offsetTop - 10) + 'px';
} else if( dir == 4 && downPos){
This.oAir.style.top = ( (This.oAir.offsetTop + 10) >= (This.oParent.offsetHeight - This.oAir.offsetHeight) ) ? (This.oParent.offsetHeight - This.oAir.offsetHeight) + 'px': (This.oAir.offsetTop + 10) + 'px';
}
if(Game.autoShoot && iNum != 0){//假如是自动发射的话 就边移动边发射 而且排除其他键的干扰
This.createBullet();
}
}
function getDirection(keycode){
switch (keycode){
case 37://左
iNum = 1;
break;
case 38://上
iNum = 2;
break;
case 39://右
iNum = 3;
break;
case 40://下
iNum = 4;
break
default:
iNum = 0;
}
return iNum;
}
document.onkeydown = function(ev){
var ev = ev || window.event;
var code = ev.keyCode;
if(!timer){
clearInterval(timer);
timer = setInterval(function(){
show(getDirection(code),Game.direction)
},30);
}
};
document.onkeyup = function(ev){
var ev = ev || window.event;
clearInterval(timer);
timer = null;
iNum = 0;
if(ev.keyCode == 32 && Game.life){//空格键 手动发射子弹
if(Game.autoShoot) return false; //假如自动发射 就return 掉
This.createBullet();//创建子弹
}
};
},
createBullet:function(){
var oB = document.createElement('div');
oB.className = this.air.bulletStyle;
this.oParent.appendChild( oB );
oB.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 + 'px';
oB.style.top = this.oAir.offsetTop - 10 + 'px';
this.runBullet( oB );//发射子弹
},
runBullet:function( oB ){
var This = this;
oB.timer = setInterval(function(){
var T = oB.offsetTop - 10;
if( T < -10 ){
clearInterval( oB.timer );
This.oParent.removeChild( oB );
} else {
oB.style.top = T + 'px';
}
for(var i=0;i<This.aLi.length;i++){
if( This.pz(oB,This.aLi[i]) ){
if(This.aLi[i].blood == 1){
This.oSNum.innerHTML = parseInt(This.oSNum.innerHTML) + This.aLi[i].score;
This.oUl.removeChild( This.aLi[i] );
}
else{
This.aLi[i].blood--;
}
This.oParent.removeChild(oB);
clearInterval(oB.timer);
}
}
if( This.aLi.length <= 3 ){
This.randomEnemy(document.getElementById('bee'));
}
},30);
},
createField:function(){
if( this.oUl ){//创建ul节点，然后方便插入敌机
this.oParent.removeChild( this.oUl );
clearInterval(this.oUl.timer);
}
var oUl = document.createElement('ul');
this.oUl = oUl;
oUl.id = 'bee';
this.oParent.appendChild(oUl);
oUl.style.width = this.gk.colNum * 40 + 'px';
oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 + 'px';
this.randomEnemy(oUl);//创建敌机
this.timeToCreateEnemy = setInterval(function(){
Game.randomEnemy(oUl);
}, 50000);
},
randomEnemy:function(oUl){
var This = this;
this.aLi = null;
var random = 35;
var nowLi = [];
function _randomEnemy(i){//随机生成敌机
i = (i % 3) + 1;
return This.oEnemy[i];
}
nowLi.length = Math.floor(Math.random()* random) + 1;//随机产生这么多敌机
var op = this.oParent.getElementsByTagName("li");
if(op){
This.oUl.innerHTML = '';
}
for( var i =0; i< nowLi.length; i++){
var oLi = document.createElement('li');
var enemy = _randomEnemy(i);
oLi.className = enemy.style;
oLi.blood = enemy.blood;
oLi.speed = enemy.speed;
oLi.score = enemy.score;
oUl.appendChild(oLi);
}
items = oUl.getElementsByTagName('li');
this.aLi = items;
for(var i=0; i<items.length;i++){
items[i].style.left = 40*(Math.floor(20*Math.random())) + 'px';
items[i].style.top = 28*(Math.floor(10*Math.random())) + 'px';
}
this.runEnemy();//向前移动
},
runEnemy:function(){
var This = this;
if(This.timeRunEnemy){//每次都是先停止定时器再启动
clearInterval(This.timeRunEnemy);
}
var maxTop = This.oParent.offsetHeight - 28;
This.timeRunEnemy = setInterval(function(){
for(var i=0; i<This.aLi.length;i++){
if(This.aLi[i].offsetTop < maxTop){
This.aLi[i].style.top = This.aLi[i].offsetTop + Game.gk.iSpeedY + 'px';
if( This.pz( This.oAir , This.aLi[i])){
alert('游戏结束');
This.life --;//生命值减一
clearInterval(This.timeRunEnemy);//清楚敌机跑的定时器
clearInterval(This.timeToCreateEnemy);//清楚随机产生敌机的定时器
This.direction = [0,0,0,0];//锁定方向键
This.autoShoot = 0;//禁止发射
}
} else {
This.oUl.removeChild( This.aLi[i] );//超出边界的就移除节点
if( This.aLi.length <= 10){
Game.randomEnemy(This.oUl);
}
}
}
}, 500)
},
pz : function(obj1,obj2){  //碰撞检测
var L1 = obj1.offsetLeft;
var R1 = obj1.offsetLeft + obj1.offsetWidth;
var T1 = obj1.offsetTop;
var B1 = obj1.offsetTop + obj1.offsetHeight;
var L2 = obj2.offsetLeft+obj2.parentNode.offsetLeft;
var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft;
var T2 = obj2.offsetTop + obj2.parentNode.offsetTop;;
var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop;
if( R1<L2 || L1>R2 || T1>B2 || B1<T2 ){
return false;
}
else{
return true;
}
}
};