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="https://www.f2er.com/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="https://www.f2er.com/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="https://www.f2er.com/tag/tupian/" target="_blank" class="keywords">图片</a> function <a href="https://www.f2er.com/tag/score/" target="_blank" class="keywords">score</a>up(<a href="https://www.f2er.com/tag/score/" target="_blank" class="keywords">score</a>){ var imgs = document.getElementsByClassName('<a href="https://www.f2er.com/tag/score/" target="_blank" class="keywords">score</a>'); var imgsnum=<a href="https://www.f2er.com/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="https://www.f2er.com/tag/score/" target="_blank" class="keywords">score</a>++; <a href="https://www.f2er.com/tag/score/" target="_blank" class="keywords">score</a>up(<a href="https://www.f2er.com/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); }

}

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

相关文章

事件冒泡和事件捕获 起因:今天在封装一个bind函数的时候,发现el.addEventListener函数支持第三个参数...
js小数运算会出现精度问题 js number类型 JS 数字类型只有number类型,number类型相当于其他强类型语言...
什么是跨域 跨域 : 广义的跨域包含一下内容 : 1.资源跳转(链接跳转,重定向跳转,表单提交) 2.资源...
@ &quot;TOC&quot; 常见对base64的认知(不完全正确) 首先对base64常见的认知,也是须知的必须有...
搞懂:MVVM模式和Vue中的MVVM模式 MVVM MVVM : 的缩写,说都能直接说出来 :模型, :视图, :视图模...
首先我们需要一个html代码的框架如下: 我们的目的是实现ul中的内容进行横向的一点一点滚动。ul中的内容...