JavaScript用200行代码制作打飞机小游戏实例

前端之家收集整理的这篇文章主要介绍了JavaScript用200行代码制作打飞机小游戏实例前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。

我去,我的图片分数被这个录屏软件的水印盖上了,扎心。

这个程序的文件以及代码全部上传到了github

程序下载链接传送门

这是自己第一次通过js写的小游戏,那个时候对象的原理跟结构体的概念不是特别的清晰,所以没用对象来写,所以直接导致后期我对这个程序进行修改的时候出现问题,太过于复杂了,我终于了解什么叫做牵一发动全身了。所以这个程序教会我一定一定要用对象的思想处理以后的问题,尤其是这种带属性明显的东西。

当然你要问我图片怎么来的我只能说都是我自己画的所以这可是原创的原创。

代码部分我是通过一个大的函数直接进行所有的封装,当然写这个的时候的我完完全全对jquery么有一丁点认识,所以自己写了渐隐渐现的函数。所以开始的代码很简单。

}

}

这就是开始接入的函数。渐隐渐现的函数是这个。

this.fadeshow = function (name){ var i = 0; var odiv = document.getElementById(name); function show(){ odiv.style.opacity = i; i+=0.1; if(i>1){clearInterval(t);} } var t = setInterval(show,100); return this; }

剩下的代码,懒得解释了,里面有注释。

//获取按键 document.onkeydown = function(evt){ var ev = evt||event; //left keyCode is 39 //right keyCode is 37 switch(ev.keyCode){ case 39: flag=(flag+1)%5; break; case 37: if(flag==0){ flag=Math.abs(flag-4); }else if(flag>0){ flag=(flag-1)%5; } break; } //移动飞机 function movePlain (){ var plain = document.getElementById('player'); switch(flag){ case 0:player.style.left='0px';break; case 1: player.style.left='100px';break; case 2: player.style.left='200px';break; case 3: player.style.left='300px';break; case 4:player.style.left='400px';break; } } movePlain(); } function createBulltes(){ //<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>敌人 var newenemy = document.createElement('img'); newenemy.src = 'img/enemy.png'; newenemy.style.position='absolute'; newenemy.style.zIndex='5'; var enemyTop=0; var sign=0; var randomNum = Math.random()*5; sign=Math.floor(randomNum); newenemy.style.top='0px'; switch(sign){ case 0:newenemy.style.left='0px';break; case 1: newenemy.style.left='100px';break; case 2: newenemy.style.left='200px';break; case 3: newenemy.style.left='300px';break; case 4:newenemy.style.left='400px';break; }way[0].appendChild(newenemy); arr.unshift(newenemy); //<a href="/tag/shengcheng/" target="_blank" class="keywords">生成</a>子弹 var bullet = document.getElementById('bullet'); var newbullet = document.createElement('img'); var plain = document.getElementById('player'); newbullet.className='bullet'; newbullet.style.position='absolute'; newbullet.style.top='560px'; newbullet.src='img/bullet.png'; newbullet.style.zIndex='4'; var bulletTop=0; switch(flag){ case 0: newbullet.style.left='45px';player.style.left='0px';;break; case 1: newbullet.style.left='145px';player.style.left='100px';;break; case 2: newbullet.style.left='245px';player.style.left='200px';break; case 3: newbullet.style.left='345px';player.style.left='300px';break; case 4: newbullet.style.left='445px';player.style.left='400px';break; }way[2].appendChild(newbullet); bulletNum.unshift(newbullet); //分数<a href="/tag/tupian/" target="_blank" class="keywords">图片</a> function <a href="/tag/score/" target="_blank" class="keywords">score</a>up(<a href="/tag/score/" target="_blank" class="keywords">score</a>){ var imgs = document.getElementsByClassName('<a href="/tag/score/" target="_blank" class="keywords">score</a>'); var imgsnum=<a href="/tag/score/" target="_blank" class="keywords">score</a>.toString().split(''); for(var i=0; i<imgsnum.length; i++){ imgs[4-i].src='img/'+imgsnum[i]+'.png'; } } //判定触碰 function decide(){ for(var i = 0;i<arr.length; i++){ for(var j=0; j<bulletNum.length; j++) if(arr[i].offsetLeft==(bulletNum[j].offsetLeft-45)&&((arr[i].offsetTop+98)>bulletNum[j].offsetTop-10&&(arr[i].offsetTop+98)<bulletNum[j].offsetTop+10)){ <a href="/tag/score/" target="_blank" class="keywords">score</a>++; <a href="/tag/score/" target="_blank" class="keywords">score</a>up(<a href="/tag/score/" target="_blank" class="keywords">score</a>); arr[i].parentNode.removeChild(arr[i]); bulletNum[j].parentNode.removeChild(bulletNum[j]); } } var player=document.getElementById('player'); for(var i=0; arr.length; i++){ if(arr[i].offsetLeft==player.offsetLeft&&(arr[i].offsetTop+70)==player.offsetTop){ alert('game over');location.reload(); } } } //放在一起的移动 function bulletmove (){ bulletTop=newbullet.offsetTop; enemyTop=newenemy.offsetTop; // alert('buller:'+newbullet.offsetLeft); // alert(newenemy.offsetLeft); function move (){ bulletTop-=6; enemyTop+=1; newbullet.style.top=bulletTop+'px'; newenemy.style.top=enemyTop+'px'; decide(); if(bulletTop==0&&enemyTop==560){ newbullet.style.opacity='0'; newenemy.style.opacity='0'; clearInterval(t); }else if(bulletTop==0){ newbullet.parentNode.removeChild(newbullet); bulletNum.pop(); }else if(enemyTop==560){ newenemy.parentNode.removeChild(newenemy);arr.pop(); } } var t = setInterval(move,20); } bulletmove(); } var s=setInterval(createBulltes,3000); }

}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

猜你在找的JavaScript相关文章