<!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打飞机游戏特效代码的更多相关文章

  1. 18款js和jquery文字特效代码分享

    18款js和jquery文字特效代码分享 jQCloud标签云插件_热门城市文字标签云代码 js 3d标签云特效关键词文字球状标签云代码 原生JS鼠标悬停文字球状放大显示效果代码 原生js文字动画圆形 ...

  2. JS日历控件特效代码layDate

    https://www.js-css.cn/a/jscode/date/2015/0405/1461.html

  3. 原生js写的贪吃蛇网页版游戏特效

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <bo ...

  4. 一个标准的，兼容性很好的div仿框架的基础模型！

    <!DOCTYPE html> <html > <head> <meta http-equiv="Content-Type" conten ...

  5. 性能追击：万字长文30+图揭秘8大主流服务器程序线程模型 | Node.js,Apache,Nginx,Netty,Redis,Tomcat,MySQL,Zuul

    本文为<高性能网络编程游记>的第六篇"性能追击:万字长文30+图揭秘8大主流服务器程序线程模型". 最近拍的照片比较少,不知道配什么图好,于是自己画了一个,凑合着用,让 ...

  6. linux下bus、devices和platform的基础模型

    转自:http://blog.chinaunix.net/uid-20672257-id-3147337.html 一.kobject的定义:kobject是Linux2.6引入的设备管理机制,在内核 ...

  7. ThinkPHP 学习笔记 ( 三 ) 数据库操作之数据表模型和基础模型 ( Model )

    //TP 恶补ing... 一.定义数据表模型 1.模型映射 要测试数据库是否正常连接,最直接的办法就是在当前控制器中实例化数据表,然后使用 dump 函数输出,查看数据库的链接状态.代码: publ ...

  8. ThinkPHP 数据库操作之数据表模型和基础模型 ( Model )

    一.定义数据表模型 1.模型映射 要测试数据库是否正常连接,最直接的办法就是在当前控制器中实例化数据表,然后使用 dump 函数输出,查看数据库的链接状态.代码: public function te ...

  9. [您有新的未分配科技点]博弈论进阶：似乎不那么恐惧了…… （SJ定理，简单的基础模型）

    这次,我们来继续学习博弈论的知识.今天我们会学习更多的基础模型,以及SJ定理的应用. 首先,我们来看博弈论在DAG上的应用.首先来看一个小例子:在一个有向无环图中,有一个棋子从某一个点开始一直向它的出 ...

随机推荐

  1. Java开发工程师(Web方向) - 01.Java Web开发入门 - 第5章.Git

    第5章--Git 版本控制简介 VCS (version control system) 版本控制系统:记录若干文件的修订记录的系统,帮助查阅/回到某个历史版本 LVCS本地 CVCS集中式(Cent ...

  2. python中为什么 if/while/def/class语句需要冒号？

    python中冒号主要用于增强可读性(ABC语言实验的结果之一).考虑一下这个: if a == b print(a) 与 if a == b: print(a) 注意第二种方法稍微容易一些.请进一步 ...

  3. bson文件的切分

    描述 最近遇到问题需要将较大的bson文件(MongoDB导出的二进制json文件)按文档(记录)进行切分,网上这方面的资料实在太少,弄了一天多终于达到了基本要求(还不知道有没有BUG) 代码 pac ...

  4. 1.linux环境配置

    首先说一下,这里是虚拟机环境. 1.用vbox安装centos6.8-mini 注意不要使用复制的方式安装,复制的虚拟机网络不通 安装如下: 主机 ip 角色 内存 hadoop1 192.168.0 ...

  5. canvas学习（四）：高级属性

    一:阴影 示例:绘制一个带有阴影的正方形 var canvas = document.getElementById("myCanvas") var ctx = canvas.get ...

  6. js经典试题之闭包

    js经典试题之闭包 1:以下代码输出的结果是? function Foo(){ var i=0; return function(){ document.write(i++); } } var f1= ...

  7. 自测之Lesson11：消息和消息队列

    题目:key及ftok函数的作用. 解答: key是用来创建消息队列的一个参数,当两个key相同时,创建消息队列会引起“误会”(除非有意为之).所以我们可以通过ftok函数来获得一个“不易重复”的ke ...

  8. C++基础和STL，Effective C++笔记

    这个作者总结的c++基础,特别好. 可以看看. http://blog.csdn.net/tham_/article/details/51169792

  9. java通过控制鼠标实现屏幕广播

    在java实现屏幕共享的小程序中提到截取屏幕时是没鼠标,为了看到教师端界面上的鼠标,可以在截取屏幕的时候,把鼠标绘制到每一张截图上去,但是由于截图的时候是一张张截取的,所以看到的鼠标难免会有点卡,之前 ...

  10. 搭建独立域名博客 -- 独立域名博客上线了 www.hanshuliang.com

    博客是安装在阿里云的服务器上. 小结 : -- 进入数据库命令 :mysql -uroot -p123456 ; -- 检查nginx配置语法 :.../nginx/sbin/nginx -t; -- ...