<!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方向) - 03.数据库开发 - 第3章.SQL注入与防范

    第3章--SQL注入与防范 SQL注入与防范 经常遇到的问题:数据安全问题,尤其是sql注入导致的数据库的安全漏洞 国内著名漏洞曝光平台:WooYun.org 数据库泄露的风险:用户信息.交易信息的泄 ...

  2. CsvHelper文档-1前言

    CsvHelper文档-1前言 英文文档链接地址:CsvHelper Document 开源项目地址:CsvHelper 翻译于2018-1-5,原本可能会随时更新: 每一段代码都是经过我实际测试的, ...

  3. OpenMPI源码剖析4：rte.h 头文件的说明信息

    上一篇文章中说道,我们在 rte.h 中发现了有价值的说明: 我们一块一块来分析,首先看到第一块,关于 Process name Object: * (a) Process name objects ...

  4. 购物单：Excel的应用

    题目描述: 小明刚刚找到工作,老板人很好,只是老板夫人很爱购物.老板忙的时候经常让小明帮忙到商场代为购物.小明很厌烦,但又不好推辞. 这不,XX大促销又来了!老板夫人开出了长长的购物单,都是有打折优惠 ...

  5. android课程第一节(TextView控件使用)

    TextView控件使用 一.TextView基本使用(创建方式) 1.在程序中创建TextView对象 如下代码: @Override protected void onCreate(Bundle ...

  6. canvas学习（三）：文字渲染

    一.绘制基本的文字: var canvas = document.getElementById("myCanvas") var ctx = canvas.getContext('2 ...

  7. js经典试题之ES6

    js经典试题之ES6 1:在ECMAScript6 中,Promise的状态 答案:pending  resolved(fulfilled) rejected 解析: Promise对象只有三种状态: ...

  8. Kafka Streams演示程序

    本文从以下六个方面详细介绍Kafka Streams的演示程序: Step 1: 下载代码 Step 2: 启动kafka服务 Step 3: 准备输入topic并启动Kafka生产者 Step 4: ...

  9. C# 泛型和委托

    using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.T ...

  10. touchSwipe 上下左右滑动，二指缩放 效果不好。

    $(function(){ var _showImgW; var _showImgH; var _showImgMT; var _showImgML; $("#imgDiv").s ...