JS制作的俄罗斯方块打飞机网页版小游戏特效代码分享

稿源：互联网 2018-09-14 00:38:33 点击： 11739 撤稿纠错

可以通过键盘上的左右方向键控制子弹射击，最基础的JS打飞机模型代码，提供感兴趣的朋友继续完善！

以下讨论的是和打飞机游戏俄罗斯方块小游戏相关的JS制作的俄罗斯方块打飞机网页版小游戏特效代码分享教程文章，内容是本站精心挑选整理的教程，希望对广大的网友给到帮助,下面是详细内容：

脚本代码(For Alixixi.com)如下:

<!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制作的俄罗斯方块打飞机网页版小游戏特效代码分享的内容写到这里就结束啦，您可以收藏本页网址https://js.alixixi.com/a/2018091490907.shtml方便下次再访问哦。

·上一篇： 教您用简单的CSS代码实现浮动的二级导航菜单显示
·下一篇： JS实现的无刷新分页代码，带CSS3绘制箭头的特效代码

JS制作的俄罗斯方块打飞机网页版小游戏特效代码分享

文章分类LIST >>返回首页

最新游戏

最新新闻