<!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. STM32F4编程手册学习2_内存模型

    STM32F4编程手册学习2_内存模型 1. 内存映射 MCU将资源映射到一段固定的4GB可寻址内存上,如下图所示. 内存映射将内存分为几块区域,每一块区域都有一个定义的内存类型,一些区域还有一些附加 ...

  2. 2018java开发一些面经

    算法系列:https://www.cnblogs.com/yanmk/p/9232908.html 2018Java开发面经(持续更新) 不要给自己挖坑!!!不要给自己挖坑!!!不要给自己挖坑!!!如 ...

  3. SpringBoot在IDEA下使用JPA

    1依赖 使用IDEA构建基于JPA的项目需要引用JPA.MYSQL依赖 2配置文件修改 2.1连接库 spring.datasource.url=jdbc:mysql://localhost:3306 ...

  4. mybatis 枚举类型使用

    一.首先定义接口,提供获取数据库存取的值得方法,如下: public interface BaseEnum { int getCode(); } 二.定义mybatis的typeHandler扩展类, ...

  5. [leetcode-744-Find Smallest Letter Greater Than Target]

    Given a list of sorted characters letters containing only lowercase letters, and given a target lett ...

  6. HDU 3264/POJ 3831 Open-air shopping malls（计算几何+二分）（2009 Asia Ningbo Regional）

    Description The city of M is a famous shopping city and its open-air shopping malls are extremely at ...

  7. Zen Coding && Emmet-Sublime 安装

    Sublime Text 插件之:Emmet,旧版称:ex-Zen Coding 更名之后增加了CSS3和HTML5许多新特性.项目地址也从 code.google 移 github. 安装: Pac ...

  8. “Hello World!”团队第二次会议

    今天是我们团队“hello world!”团队召开的第二次会议.博客内容: 一.会议时间 二.会议地点 三.会议成员 四.会议内容 五.todo list 六.会议照片 七.燃尽图 一.会议时间 20 ...

  9. Thinkphp5的使用phpmailer实现发邮件功能（163邮箱）

    Thinkphp5本身并没有实现发邮件的功能,至少据我所知. 本文利用网易邮箱作为发邮件的邮箱.作为发送邮件的前提是需要开启SMTP服务,打开网易邮件,点击设置按钮,如下图所示 勾选smtp服务 保存 ...

  10. 第四章 持续集成jenkins工具使用之项目配置

    1.1   创建项目 点击“新建”,输入项目名称,选择“构建一个自由风格的软件项目”,点击ok,项目创建完成. 1.2   配置项目 点击步骤1创建的项目,进入项目页面,如图: 点击“配置”,进入配置 ...