原生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 = '分数:0分';
 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){
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){
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){
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( R1R2 || T1>B2 || B1<T2 ){
233             return false;
234         }
235         else{
236             return true;
237         }
238     }    
239 };

源码下载

转载于:https://www.cnblogs.com/violinxliu/p/3830488.html