一款基础模型的JS打飞机游戏特效代码

<!DOCTYPE html>
<html lang="en">
<head>
<title>一款基础模型的JS打飞机游戏特效代码</title>

<style type="text/css">
#show{
 margin:auto;
 width:300px;
 height:500px;
 background: black;
 position: relative;
}
#fly{
 width:10px;
 height:10px;
 position:absolute;
 bottom:0;
 left:140px;
 background: #0044ff;
}
#sco{
 z-index:1;
 color:white;
}
.arrow{
 width:6px;
 height:6px;
 background: #ddd;
 margin-left: 2px;
 margin-top:-10px;
}
.huiji{
 width:10px;
 height:10px;
 background: #eee;
 position:absolute;
 top:0;
 left:0;
}
</style>
</head>
<body>
 <div id="show" style="width: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>
一款基础模型的JS打飞机游戏特效代码

推荐阅读
