首页 > 代码库 > 原生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 };
源码下载
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。