<!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. C 数数位 while循环

    #include <stdio.h> int main(int argc, char **argv) { //定义两个变量  x n 把n初始化 int x; int n=0; //输入x ...

  2. Centos7添加静态路由

    本文摘取自 Centos7系统配置上的变化(二)网络管理基础 一.ip route显示和设定路由 1.显示路由表 [root@centos7 ~]# ip route show default via ...

  3. 【转载】Android 内存溢出如何发生的。

    [转载]Android 内存溢出如何发生的. 且谈Android内存溢出 前言 关于android的内存溢出在创新文档库中也有不少,网络上也有很多这方面的资料.所以这遍文章不算是正真意义上的创新,仅仅 ...

  4. HDU 2487 Ugly Windows（暴力）（2008 Asia Regional Beijing）

    Description Sheryl works for a software company in the country of Brada. Her job is to develop a Win ...

  5. js单行写一个评级组件

    单行写一个评级组件:"★★★★★☆☆☆☆☆".slice(5 - rate, 10 - rate); -----------------------------------分隔符- ...

  6. Python中的slice操作

    Python中slice操作的完整语法: # i默认是0 # j默认是len(S) # k的步长,默认为+1 S[i:j:k] 其中i,j,k都可以是负数: 若i < 0或者k<0,等价于 ...

  7. Notes of the scrum meeting（12.12）

    meeting time:19:30~20:30p.m.,December 12th,2013 meeting place:3号公寓一层 attendees: 顾育豪                  ...

  8. sql查询 同一个字段下另一个字段个数

    select seriesid , count(reportid) from reportsystem group by seriesidhaving count(reportid) > 1

  9. 软件工程课堂作业（三）——Right-BICEP软件单元测试

    一.测试方法:Right-BICEP Right-结果是否正确?B-是否所有的边界条件都是正确的?I-能查一下反向关联吗?C-能用其他手段交叉检查一下结果吗?E-你是否可以强制错误条件发生?P-是否满 ...

  10. Android 开发 之 JNI入门 - NDK从入门到精通

    NDK项目源码地址 : -- 第一个JNI示例程序下载 : GitHub - https://github.com/han1202012/NDKHelloworld.git -- Java传递参数给C ...