您好，欢迎来到源码搜藏！分享精神，快乐你我！提示：担心找不到本站？在百度搜索“源码搜藏”，网址永远不丢失！

[加入VIP] 设为首页 | 收藏本站 | 网站地图 | Sitemap | TAG标签

当前位置：首页 > 网页特效 > 游戏特效 >

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

时间：2013-09-24 08:54 来源：互联网作者：源码搜藏浏览：次收藏挑错推荐打印

<!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>

运行代码保存代码复制代码提示：您可以先修改部分代码再运行，保存代码功能在Firefox下无效。

最基础的JS打飞机模型代码，提供感兴趣的朋友继续完善！一款基础模型的JS打飞机游戏特效代码由源码搜藏网整理,转载请注明出处http://www.codesocang.com/texiao/youxitexiao/6188.html

标签：网站源码

上一篇：JS写的网页抽奖小游戏

下一篇：真正的网抽奖-JavaScript HTML5代码

[游戏特效] 用HTML5雷电写的-打飞机游戏

[游戏特效] JavaScript与html5写的贪吃蛇

[游戏特效] html5网页版三国杀版连连看代码

[游戏特效] JS写的网页抽奖小游戏

[游戏特效] 真正的网抽奖-JavaScript HTML5

[游戏特效] HTML5游戏：生命游戏+代码

[游戏特效] JS挖箱子小游戏，网页游戏代码

[游戏特效] jQuery仿腾讯视频列表分页效果

[游戏特效] 反应能力测试游戏，你能坚持多久

[游戏特效] JavaScript五子棋

[游戏特效] HTML5坦克大战-网页小游戏

[游戏特效] HTML5实现跑动的超级玛丽

相关内容推荐

中国网站排名

专题页面字体

音频播放器

ASP.NET教程全集p

SVG指针时钟

超级英雄PNG图标

随机显示特效

新闻贴图社区

ecshop二次开发

新闻贴图优点

新站百度不收录

关于我们 | 版权声明 | 广告服务 | 联系我们 | 常见问题 | 网站地图 | 网友投稿 | 在线留言

分享精神，快乐你我！联系QQ:498277184

本站资源是从网络整理所得,如果无意侵犯了贵司版权，请与源码搜藏网联系，我们会及时处理和回复，谢谢!

鲁ICP备13013982号-1