<!DOCTYPE html> <html lang="en"> <head> <title>一款基础模型的JS打飞机游戏特效代码</title> <style type="text/css"> #show{ margin:auto; 300px; height:500px; background: black; position: relative; } #fly{ 10px; height:10px; position:absolute; bottom:0; left:140px; background: #0044ff; } #sco{ z-index:1; color:white; } .arrow{ 6px; height:6px; background: #ddd; margin-left: 2px; margin-top:-10px; } .huiji{ 10px; height:10px; background: #eee; position:absolute; top:0; left:0; } </style> </head> <body> <div id="show" style="300px;height:500px"> <div id="fly"> <div class="arrow" style="margin-top:-10px;"> </div> </div> </div> </body> </html> <script> function $(id){//获得id return document.getElementById(id); } function keydown(e) {//判断键盘事件 var currKey=0,e=e||event; currKey=e.keyCode||e.which||e.charCode; return currKey; } function getClass(obj,attr){//getElementsByClass var aArray=[]; var i=0; var aAll = obj.getElementsByTagName('*'); for(i=0;i<aAll.length;i++){ if(aAll[i].className == attr){ aArray.push(aAll[i]); } } return aArray; } function fly(){ this.begin=0; this.arrowSpeed=5; this.huijiSpeed=7; this.showArea=$('show'); this.showWidth=this.showArea.style.width; this.showHeight=this.showArea.style.height; this.offsetleft='140px'; this.arrow=getClass(document,'arrow'); this.huiji=getClass(document,'huiji'); this.flying=$('fly'); this.scores=0; } fly.prototype={ constructor:fly, version:1.0, start:function(){ this.begin=1; }, end:function(){ this.begin=0; }, leftSet:function(width){ this.flying.style.left=width; return this.flying.style.left; }, process:function(){ var that=this; if(that.begin==0){ return false; }else if(that.begin==1){ that.leftSet(that.offsetleft); document.addEventListener('keydown',function(){//判断边界 if(parseInt(that.leftSet())>0&&parseInt(that.leftSet())<(parseInt(that.showWidth)-10)){ if(keydown()==37){ that.leftSet(parseInt(that.flying.style.left)-5+'px'); }else if(keydown()==39){ that.leftSet(parseInt(that.flying.style.left)+5+'px'); } }else if(parseInt(that.leftSet())==0){ if(keydown()==39){ that.leftSet(parseInt(that.flying.style.left)+5+'px'); } }else if(parseInt(that.leftSet())==(parseInt(that.showWidth)-10)){ if(keydown()==37){ that.leftSet(parseInt(that.flying.style.left)-5+'px'); } } }); setInterval(function(){//子弹 for(var i=0;i<that.arrow.length;i++){ if(Math.abs(parseInt(that.arrow[i].style.marginTop))<parseInt(that.showHeight)-10){ that.arrow[i].style.marginTop=parseInt(that.arrow[i].style.marginTop)-10+'px'; }else if(Math.abs(parseInt(that.arrow[i].style.marginTop))==parseInt(that.showHeight)-10){ that.arrow[i].style.marginTop='-20px'; } } },that.arrowSpeed); } }, huijiInit:function(){ var that=this, left=Math.random()*290, textnode=document.createElement('div'); that.showArea.appendChild(textnode).setAttribute('class','huiji'); textnode.style.left=0; textnode.style.top=0; textnode.style.left=left+'px'; setInterval(function(){ if(Math.abs(parseInt(textnode.style.top))<parseInt(that.showHeight)+10){ textnode.style.top=parseInt(textnode.style.top)+1+'px'; for(var i=0;i<that.arrow.length;i++){ if(Math.abs(parseInt(that.arrow[i].style.marginTop))<=Math.abs(parseInt(textnode.style.top))&&Math.abs(parseInt(that.arrow[i].style.marginTop))>=Math.abs(parseInt(textnode.style.top))-20&&parseInt(that.leftSet())>left&&parseInt(that.leftSet())<left+20){ textnode.remove(); that.scores+=1; } } }else if(Math.abs(parseInt(textnode.style.top))==parseInt(that.showHeight)+10){ textnode.remove(); } },that.huijiSpeed); }, score:function(){ var textnode=document.createElement('div'); if(!document.getElementById('sco')){ this.showArea.insertBefore(textnode).setAttribute('id','sco').innerHTML=this.scores; }else{ document.getElementById('sco').innerHTML=this.scores; } }, init:function(){ var that=this; this.start(); this.process(); setInterval(function(){that.huijiInit();that.score();},1000); } } var fl=new fly(); fl.init() </script>