首页 > 代码库 > 原生js打飞机小游戏

原生js打飞机小游戏

最近为了巩固一下原生的知识,然后拿了一个js小游戏来入手。主要也是为了学习和练手。

js代码如下:

  1 window.onload = function(){  2     var oBtn = document.getElementById(‘gameBtn‘);  3     oBtn.onclick = function(){  4         this.style.display = ‘none‘;  5         Game.init(‘div1‘);//把父级传进去  6     };  7 };  8 //创建Game单体  9  10 var Game  = { 11     life:1,//生命值 12     score:0,//获得分数 13     direction:[1,1,1,1],//方向控制 -> 对应顺序是: 上 右 下 左 -> 1:表示开关打开 14     autoShoot:1,//是否自动发射 -> 1:表示自动发射 0:表示空格键发射     15     oEnemy:{ //敌人的信息 16         1:{style:‘enemy1‘, blood:1, score:1}, 17         2:{style:‘enemy2‘, blood:2, score:2}, 18         3:{style:‘enemy3‘, blood:3, score:3} 19     }, 20     air:{    //创建飞机 21         style:‘air1‘,//飞机 22         bulletStyle:‘bullet‘//子弹 23     }, 24     gk:{    //敌机矩阵 和 移动速度 时间 25         colNum:20, 26         iSpeedY:10, 27         time:2000 28     }, 29     init:function(id){    //启动函数 30         this.oParent = document.getElementById(id); 31         this.createScore(); 32         this.createAir();//创建飞机 33         this.createField();//创建阵地 34     }, 35     createScore : function(){  //创建积分 36         var oS = document.createElement(‘div‘); 37         oS.id = ‘score‘; 38         oS.innerHTML = ‘分数:<span>0</span>分‘; 39         this.oParent.appendChild(oS); 40         this.oSNum = oS.getElementsByTagName(‘span‘)[0]; 41     },     42     createAir:function(){ 43         var oAir = document.createElement(‘div‘); 44         oAir.className = this.air.style; 45         this.oAir = oAir;//全局 46         this.oParent.appendChild( oAir ); 47         oAir.style.left = (this.oParent.offsetWidth - oAir.offsetWidth) / 2 + ‘px‘; 48         oAir.style.top = this.oParent.offsetHeight - oAir.offsetHeight + ‘px‘; 49         this.bindEventAir();//给飞机绑定操作事件,增加一个开关控制是否可以上下  50     }, 51     bindEventAir:function(){ 52         var This    = this, 53             timer    = null, 54             iNum    = 0; 55         function show(dir,flag){ //方向 , 标志 56             var leftPos     = flag[3], 57                 upPos        = flag[0], 58                 rightPos    = flag[1], 59                 downPos        = flag[2];  60             if(dir == 1 && leftPos){ 61                 This.oAir.style.left = (This.oAir.offsetLeft - 10) <= 0 ? ‘0‘ + ‘px‘ :  (This.oAir.offsetLeft - 10) + ‘px‘; 62             } else if( dir == 3 && rightPos){ 63                 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‘; 64             } else if( dir == 2 && upPos){ 65                 This.oAir.style.top = (This.oAir.offsetTop -10) <= 0 ? ‘0‘ + ‘px‘: (This.oAir.offsetTop - 10) + ‘px‘; 66             } else if( dir == 4 && downPos){ 67                 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‘; 68             } 69             if(Game.autoShoot && iNum != 0){//假如是自动发射的话 就边移动边发射 而且排除其他键的干扰 70                 This.createBullet(); 71             } 72         } 73         function getDirection(keycode){ 74             switch (keycode){ 75                 case 37:// 76                     iNum = 1; 77                     break; 78                 case 38:// 79                     iNum = 2; 80                     break; 81                 case 39:// 82                     iNum = 3; 83                     break; 84                 case 40:// 85                     iNum = 4; 86                     break 87                 default: 88                     iNum = 0; 89             } 90             return iNum; 91         } 92         document.onkeydown = function(ev){ 93             var ev = ev || window.event; 94             var code = ev.keyCode; 95             if(!timer){ 96                 clearInterval(timer); 97                 timer = setInterval(function(){ 98                     show(getDirection(code),Game.direction) 99                 },30);100             }101         };102         document.onkeyup = function(ev){103             var ev = ev || window.event;104             clearInterval(timer);105             timer = null;106             iNum = 0;107             if(ev.keyCode == 32 && Game.life){//空格键 手动发射子弹108                 if(Game.autoShoot) return false; //假如自动发射 就return 掉109                 This.createBullet();//创建子弹110             }111         };112     },113     createBullet:function(){114         var oB = document.createElement(‘div‘);115         oB.className = this.air.bulletStyle;116         this.oParent.appendChild( oB );117         oB.style.left = this.oAir.offsetLeft + this.oAir.offsetWidth/2 + ‘px‘;118         oB.style.top = this.oAir.offsetTop - 10 + ‘px‘;119         this.runBullet( oB );//发射子弹120     },121     runBullet:function( oB ){122         var This = this;123         oB.timer = setInterval(function(){124             var T = oB.offsetTop - 10;125             if( T < -10 ){126                 clearInterval( oB.timer );127                 This.oParent.removeChild( oB );128             } else {129                 oB.style.top = T + ‘px‘;130             }131             for(var i=0;i<This.aLi.length;i++){132                 if( This.pz(oB,This.aLi[i]) ){133                     if(This.aLi[i].blood == 1){                134                         This.oSNum.innerHTML = parseInt(This.oSNum.innerHTML) + This.aLi[i].score;135                         This.oUl.removeChild( This.aLi[i] );136                     }137                     else{138                         This.aLi[i].blood--;139                     }140                     This.oParent.removeChild(oB);141                     clearInterval(oB.timer);142                 }143             }144             if( This.aLi.length <= 3 ){145                 This.randomEnemy(document.getElementById(‘bee‘));146             }            147         },30);148     },149     createField:function(){150         if( this.oUl ){//创建ul节点,然后方便插入敌机151             this.oParent.removeChild( this.oUl );152             clearInterval(this.oUl.timer);153         }154         var oUl = document.createElement(‘ul‘);155         this.oUl = oUl;156         oUl.id = ‘bee‘;157         this.oParent.appendChild(oUl);158         oUl.style.width = this.gk.colNum * 40 + ‘px‘;        159         oUl.style.left = (this.oParent.offsetWidth - oUl.offsetWidth)/2 + ‘px‘;160         this.randomEnemy(oUl);//创建敌机161         this.timeToCreateEnemy = setInterval(function(){162             Game.randomEnemy(oUl);163         }, 50000);164     },165     randomEnemy:function(oUl){166         var This = this;167         this.aLi = null;168         var random = 35;169         var nowLi = [];        170         function _randomEnemy(i){//随机生成敌机171             i = (i % 3) + 1;172             return This.oEnemy[i];173         }174         nowLi.length = Math.floor(Math.random()* random) + 1;//随机产生这么多敌机175         var op = this.oParent.getElementsByTagName("li");176         if(op){177             This.oUl.innerHTML = ‘‘;178         }179         for( var i =0; i< nowLi.length; i++){180             var oLi = document.createElement(‘li‘);181             var enemy = _randomEnemy(i);182             oLi.className = enemy.style;183             oLi.blood = enemy.blood;184             oLi.speed = enemy.speed;185             oLi.score = enemy.score;186             oUl.appendChild(oLi);187         }188         items = oUl.getElementsByTagName(‘li‘);189         this.aLi = items;190         for(var i=0; i<items.length;i++){191             items[i].style.left = 40*(Math.floor(20*Math.random())) + ‘px‘;192             items[i].style.top = 28*(Math.floor(10*Math.random())) + ‘px‘;193         }194         this.runEnemy();//向前移动195     },196     runEnemy:function(){197         var This = this;198         if(This.timeRunEnemy){//每次都是先停止定时器再启动199             clearInterval(This.timeRunEnemy);200         }201         var maxTop = This.oParent.offsetHeight - 28;202         This.timeRunEnemy = setInterval(function(){203             for(var i=0; i<This.aLi.length;i++){204                 if(This.aLi[i].offsetTop < maxTop){205                     This.aLi[i].style.top = This.aLi[i].offsetTop + Game.gk.iSpeedY + ‘px‘;206                     if( This.pz( This.oAir , This.aLi[i])){207                         alert(‘游戏结束‘);208                         This.life --;//生命值减一209                         clearInterval(This.timeRunEnemy);//清楚敌机跑的定时器210                         clearInterval(This.timeToCreateEnemy);//清楚随机产生敌机的定时器211                         This.direction = [0,0,0,0];//锁定方向键212                         This.autoShoot = 0;//禁止发射213                     }214                 } else {215                     This.oUl.removeChild( This.aLi[i] );//超出边界的就移除节点216                     if( This.aLi.length <= 10){217                         Game.randomEnemy(This.oUl);218                     }219                 }220             }            221         }, 500)222     },223     pz : function(obj1,obj2){  //碰撞检测224         var L1 = obj1.offsetLeft;225         var R1 = obj1.offsetLeft + obj1.offsetWidth;226         var T1 = obj1.offsetTop;227         var B1 = obj1.offsetTop + obj1.offsetHeight;228         var L2 = obj2.offsetLeft+obj2.parentNode.offsetLeft;229         var R2 = obj2.offsetLeft + obj2.offsetWidth + obj2.parentNode.offsetLeft;230         var T2 = obj2.offsetTop + obj2.parentNode.offsetTop;;231         var B2 = obj2.offsetTop + obj2.offsetHeight + obj2.parentNode.offsetTop;232         if( R1<L2 || L1>R2 || T1>B2 || B1<T2 ){233             return false;234         }235         else{236             return true;237         }238     }    239 };

源码下载