<!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. JVM之G1收集器

    Garbage-First,面向服务端的垃圾收集器. 并行与并发:充分利用多核环境减少停顿时间, 分代收集:不需要配合其它收集器 空间整合:整体上看属于标记整理算法,局部(region之间)数据复制算 ...

  2. informix如何查询第一条记录

    1.select first 1 * from shop; 正序查询第一条数据 2.select first 1 * from shop order by create_time desc; 按创建时 ...

  3. 【机器学习】多项式回归python实现

    [机器学习]多项式回归原理介绍 [机器学习]多项式回归python实现 [机器学习]多项式回归sklearn实现 使用python实现多项式回归,没有使用sklearn等机器学习框架,目的是帮助理解算 ...

  4. 线性代数之——微分方程和 exp(At)

    本节的核心是将常系数微分方程转化为线性代数问题. \[\frac{du}{dt}=\lambda u \quad 的解为 \quad u(t) = Ce^{\lambda t}\] 代入 \(t=0\ ...

  5. PHP 5.6.32 增加pdo_dblib.so拓展

    首先说明,php增加pdo_dblib.so拓展不需要重新编译php源文件,只需要增加dblib源包即可. 1.下载安装所需包 1.#下载 wget http://mirrors.ibiblio.or ...

  6. 《剑指Offer》题四十一~题五十

    四十一.数据流中的中位数 题目:如何得到一个数据流中的中位数?如果从数据流中读出奇数个数值,那么中位数就是所有数值排序之后位于中间的数值.如果从数据流中读出偶数个数值,那么中位数就是所有数值排序之后中 ...

  7. string && 字符数组

    一.string 1. 使用字符串字面值初始化string对象 如:string s1 = "hiya"; string s2("hiya"); 该字面值的最后 ...

  8. eg_3

    3. 编写一个程序,返回一个 double 类型的二维数组,数组中的元素通过解析字符串参数获得,如字符串参数:“1,2;3,4,5;6,7,8”,则对应的数组为: d[0][0]=1.0, d[0][ ...

  9. winform 删除，清空指定文件夹上的所有文件或文件夹

    //递归删除文件夹及子文件C#代码: public void DeleteFolder(string dir) { if (Directory.Exists(dir)) //如果存在这个文件夹删除之 ...

  10. 我爱C语言

    各位同志们好,我是来自计算机系的谢畅,我是一个平时看起来高冷其实很逗比的人,我的爱好有很多但只是会一些基础比如游泳,篮球,听听音乐什么的.我的特长是弹吉他虽然弹得不是很溜,我还喜欢朗诵.刚开始我并不是 ...