原生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 };