首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现飞机大战小游戏

Posted in Javascript onJune 09, 2021

本文实例为大家分享了JS实现飞机大战小游戏的具体代码，供大家参考，具体内容如下

<html>
 <head>
  <title> 飞机大战 </title>
  <style type="text/css"> 
 *{margin:0;padding:0;font-family:"Microsoft yahei"}
  body{overflow:hidden;;}
  </style>
 </head>

 <body>


  <script>
 window.onload = function(){
  Game.exe();
 };
 var Game = {
  //启动程序
  exe :function(){
   document.body.style.background = '#fff';
   var oDiv = document.createElement('div');
    oDiv.id = 'GameBox';
    oDiv.style.cssText = 'width:600px;height:500px;border:10px solid #999;margin:50px auto;font-family:"Microsoft yahei";text-align:center;position:relative;overflow:hidden;background:#fff';
   document.body.appendChild(oDiv);
   this.init();
  },

  score : 0 ,
  ifEnd : false,
  //初始化
  init: function(){
   
   var This = this;
   var oDiv = document.getElementById('GameBox');
   oDiv.innerHTML = '';
   Game.score = 0;
   Game.ifEnd = false;
   var oH = document.createElement('h1');
    oH.innerHTML = '飞机大战 v1.0';
    oH.style.cssText = 'color:#555555;font-size:30px;padding-top:50px;';
    oDiv.appendChild( oH );
   for (var i=0;i<4 ;i++ )
   {
    var oP = document.createElement('p');
     oP.index = i;
     oP.style.cssText = 'font-size:18px;color:white;width:180px;height:50px;margin:40px auto;text-align:center;background:#999;line-height:40px;font-family:"Microsoft yahei";font-weight:bold;cursor:pointer;'
    var html = '';
    oP.onmouseenter = function(){
     this.style.background = '#ff9933';
     this.style.color = '##ff6600'
    };
    oP.onmouseleave = function(){
     this.style.background = '#999';
     this.style.color = 'white'
    };
    oP.onclick = function( e ){
     e = e || window.event;
     This.start( this.index , oDiv , e );
    };
    switch( i ){
     case 0:
      html = '简单难度';
      break;
     case 1:
      html = '中等难度';
      break;
     case 2:
      html = '困难难度';
      break;
     case 3:
      html = '小天才附体';
      break;
    }
    oP.innerHTML = html;
    oDiv.appendChild(oP);

   };
  },
  //游戏开始
  start : function( index , oGameBox , e  ){
   oGameBox.innerHTML = '';

   var oS = document.createElement('span');
    oS.innerHTML = this.score;
    oS.style.cssText = 'position:absolute;left:20px;top:20px;font-size:14px;color:black;';
   oGameBox.appendChild( oS );
   this.plane( oGameBox , e ,index );
   this.enemy( oGameBox ,oS ,index );
  },
  //关于飞机
  plane : function( oGameBox , e ,index ){
   var x = e.pageX;
    y = e.pageY;
   var oPlane = new Image();
    oPlane.src = 'images/plane.png';
    oPlane.width = 60;
    oPlane.height = 36;
    oPlane.id = 'plane';
   var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2;
   var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   window.onresize = function(){
    lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   };
   var top = y- tY;
   var left = x- lX;
    oPlane.style.cssText = 'display:block;position:absolute;top:'+top+'px;left:'+left+'px;';
   oGameBox.appendChild( oPlane );
   
   var leftMin = - oPlane.width/2;
   var leftMax = oGameBox.clientWidth - oPlane.width/2;
   var topMin = 0;
   var topMax = oGameBox.clientHeight - oPlane.height;

   document.onmousemove = function(e){
    if( !Game.ifEnd )
    {

     e = e || window.event;
     var top = e.pageY -tY;
     var left = e.pageX -lX;

     top = Math.min( top , topMax );//取参数里最小的if( top > topMax )top = topMax;
     top = Math.max( top ,topMin );//取参数里最大的
     left = Math.min( left , leftMax );//取参数里最小的if( top > topMax )top = topMax;
     left = Math.max( left ,leftMin );

     oPlane.style.left = left + 'px';
     oPlane.style.top = top + 'px';
    }
   };
   this.biu( oPlane , oGameBox ,index );
  },

  biu : function( oPlane , oGameBox ,index ){
   var speed ;
   switch ( index )
   {
    case 0:
     speed = 30;
     break;
    case 1:
     speed = 40;
     break;
    case 2:
     speed = 50;
     break;
    case 3:
     speed = 10;
     break;
   
   }
   this.BiuTimer = setInterval(function(){
    var oBiu = new Image();
     oBiu.src = 'images/bullet.png';
     oBiu.width = 6;
     oBiu.height = 22;
     oBiu.className = 'bullet';
    var top = oPlane.offsetTop - oBiu.height +3 ;
    var left = oPlane.offsetLeft + oPlane.width/2 -oBiu.width/2;
     oBiu.style.cssText = 'position:absolute;top:'+top+'px;left:'+left+'px;';
    oGameBox.appendChild( oBiu );

    oBiu.timer = setInterval( function(){
     if( !oBiu.parentNode){
      clearInterval( oBiu.timer );
     }
     oBiu.style.top = oBiu.offsetTop - 10 + 'px';
     if( oBiu.offsetTop < -oBiu.height ){
      clearInterval( oBiu.timer );
      oBiu.parentNode.removeChild( oBiu );
     }
    }, 13 );
   } ,speed );
  },
  enemy : function( oGameBox ,oS , index ){
   var a , x;
   switch ( index )
   {
    case 0:
     a = 1;
     x = 500;
     break;
    case 1:
     a = 2;
     x = 300;
     break;
    case 2:
     a = 3;
     x = 200;
     break;
    case 3:
     a = 5;
     x = 100;
     break;
   
   }
   
   this.EnemyTimer = setInterval( function(){
    var oEnemy = new Image();
     oEnemy.src = 'images/enemy.png';
     oEnemy.width = 23;
     oEnemy.height = 30;
    var lMin = 0;
    var lMax = oGameBox.clientWidth - oEnemy.width;
    var left = Math.random()*(lMax-lMin) + lMin;
    oEnemy.style.cssText = 'position:absolute;top: -'+(-oEnemy.height)+'px; left:'+left+'px;';
    oGameBox.appendChild( oEnemy );

    var b = Math.random() * a + 1  ;
    oEnemy.timer = setInterval(function(){ 
     oEnemy.style.top = oEnemy.offsetTop + b + 'px';//敌军的下落速度
     if( oEnemy.offsetTop >= oGameBox.clientHeight ){
      clearInterval( oEnemy.timer );
      oEnemy.parentNode.removeChild( oEnemy );
     }
    },13);

    //和子弹的碰撞监测
    var allBiu = Game.getClass('bullet');
    oEnemy.pzBiu = setInterval(function(){
     
     for(var i = 0;i < allBiu.length;i++)
     {
      if( Game.boom( oEnemy ,allBiu[i]))
      {
       Game.score ++;
       oS.innerHTML = Game.score;
       oEnemy.src = 'images/boom.png';
       clearInterval( oEnemy.pzBiu );
       clearInterval( oEnemy.pzPlane );
       allBiu[i].parentNode.removeChild( allBiu[i] );
       setTimeout(function(){
        if( oEnemy.parentNode ){
         oEnemy.parentNode.removeChild( oEnemy );
        };
       },300);
       break;
      }
     }
    },50);
    //和战机的碰撞监测

    var oPlane = document.getElementById('plane');
    oEnemy.pzPlane = setInterval(function(){
     if( Game.ifEnd ){
      clearInterval( oEnemy.pzPlane);
     }

     if( Game.boom( oEnemy , oPlane))
     {
      Game.ifEnd = true;
      clearInterval( oEnemy.pzPlane);
      clearInterval( Game.BiuTimer);
      clearInterval( Game.EnemyTimer);
      oEnemy.src = 'images/boom.png';
      oPlane.src = 'images/boom2.png';
      setTimeout(function(){
       Game.over( oGameBox );
      },300);
     }
    },50);
   } , x );//敌军生成速度
  },
  //碰撞监测
  boom : function( obj1 , obj2 ){
   var T1 = obj1.offsetTop;
   var B1 = T1 + obj1.clientHeight;
   var L1 = obj1.offsetLeft;
   var R1 = L1 + obj1.clientWidth;

   var T2 = obj2.offsetTop;
   var B2 = T2 + obj2.clientHeight;
   var L2 = obj2.offsetLeft;
   var R2 = L2 + obj2.clientWidth;

   if ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 )
   {
    return false; // 没撞上
   }
   else
   {
    return true; // 撞上了
   }
  },
   //游戏结束
   over : function( oGameBox ){
    oGameBox.innerHTML = '';
    var oDiv = document.createElement('div');
     oDiv.style.cssText = 'width:300px;height:200px;margin:100px auto;background:#e0e0e0;border:5px solid #858585';
    var oT = document.createElement('h3');
     oT.innerHTML = 'Game Over';
     oT.style.cssText = 'padding-top:50px;font-size:25px;';

    var oP1 = document.createElement('p');
     oP1.innerHTML = '您的得分是：' + '<span style="color:#ffffff;font-weight:bold;">' + this.score + '</span>';
     oP1.style.cssText = 'font-size:16px;color:#fff;';

    var oRestart = document.createElement('div');
     oRestart.style.cssText = 'width:100px;height:40px;font-size:14px;text-align:center;line-height:40px;color:white;background:#999;margin:20px auto;cursor:pointer;';
     oRestart.innerHTML = '重新开始';
     oRestart.onclick = function(){
      Game.init();
     };

    oDiv.appendChild( oT );
    oDiv.appendChild( oP1 );
    oDiv.appendChild( oRestart );
    oGameBox.appendChild( oDiv );
   },

   //getclass 方法
   getClass : function( cName , parent ){
    parent = parent || document;
    if( document.getElementsByClassName ){
     return parent.getElementsByClassName(cName);
    }
    else
    {
     var all = parent.getElementsByTagName('*');
     var arr = [];
     for( var i = 0;i<all.length;i++ )
     {
      var arrClass = all.className.split(' ');
      for( var j = 0; j < arrClass.length;j++ ){
       if( arrClass[j] == cName )
       {
        arr.push( all[i]);
        break;
       }
      }
     }
     return arr;
   }
  },
 };
  </script>
 </body>
</html>

效果图

原生JS实现飞机大战小游戏

原生JS实现飞机大战小游戏

原生JS实现飞机大战小游戏

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持三水点靠木。

原生JS实现飞机大战小游戏

- Author -

三宝鸭

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
使用firebug进行调试javascript的示例
Dec 16 Javascript
表格奇偶行设置不同颜色的核心JS代码
Dec 24 Javascript
jQuery实现仿新浪微博浮动的消息提示框(可智能定位)
Oct 10 Javascript
判断数组是否包含某个元素的js函数实现方法
May 19 Javascript
bootstrap table复杂操作代码
Nov 01 Javascript
Ionic3 UI组件之Gallery Modal详解
Jun 07 Javascript
JS实现textarea通过换行或者回车把多行数字分割成数组并且去掉数组中空的值
Oct 29 Javascript
判断js数据类型的函数实例详解
May 23 Javascript
JavaScript实现联动菜单特效
Jan 07 Javascript
Vue是怎么渲染template内的标签内容的
Jun 05 Javascript
JavaScript缺少insertAfter解决方案
Jul 03 Javascript
通过高德地图API获得某条道路上的所有坐标用于描绘道路的方法
Aug 24 Javascript
解决Vue+SpringBoot+Shiro跨域问题
Jun 09 #Vue.js
JavaScript如何优化逻辑判断代码详解
Jun 08 #Javascript
浅谈react useEffect闭包的坑
Vue中插槽slot的使用方法与应用场景详析
vue+elementui 实现新增和修改共用一个弹框的完整代码
解决vue $http的get和post请求跨域问题
vue Element-ui表格实现树形结构表格
Jun 07 #Vue.js
Android Gradle(1) Navicat(1) 内置函数(1) V Rising(1) procedure(1) Tablespace(1) 记事本(1) maven(2) Spring Security(2) 自定义函数(1)
You might like
提示Trying to clone an uncloneable object of class Imagic的解决
2011/10/27 PHP
php删除与复制文件夹及其文件夹下所有文件的实现代码
2013/01/23 PHP
解析php利用正则表达式解决采集内容排版的问题
2013/06/20 PHP
PHP中的gzcompress、gzdeflate、gzencode函数详解
2014/07/29 PHP
PHP实现的比较完善的购物车类
2014/12/02 PHP
javascript dom 基本操作小结
2010/04/11 Javascript
原生JS实现图片翻书效果
2017/02/16 Javascript
Vue.js实现网格列表布局转换方法
2017/08/25 Javascript
浅析JavaScript中的特殊数据类型
2017/12/15 Javascript
Vue2 监听属性改变watch的实例代码
2018/08/27 Javascript
vue.js中使用echarts实现数据动态刷新功能
2019/04/16 Javascript
layui操作列按钮个数和文字颜色的判断实例
2019/09/11 Javascript
从表单校验看JavaScript策略模式的使用详解
2020/10/17 Javascript
python如何把嵌套列表转变成普通列表
2018/03/20 Python
Django项目使用ckeditor详解(不使用admin)
2019/12/17 Python
pandas-resample按时间聚合实例
2019/12/27 Python
python实现tail -f 功能
2020/01/17 Python
新手学python应该下哪个版本
2020/06/11 Python
PyCharm 2020.2.2 x64 下载并安装的详细教程
2020/10/15 Python
OpenCV实现机器人对物体进行移动跟随的方法实例
2020/11/09 Python
Python 使用SFTP和FTP实现对服务器的文件下载功能
2020/12/17 Python
10 套华丽的CSS3 按钮小结
2012/10/03 HTML / CSS
Html5饼图绘制实现统计图的方法
2020/08/05 HTML / CSS
Notino瑞典：购买香水和美容产品
2019/07/26 全球购物
可以在一个PHP文件里面include另外一个PHP文件两次吗
2015/05/22 面试题
二年级数学教学反思
2014/01/21 职场文书
《囚绿记》教学反思
2014/03/01 职场文书
和谐家庭演讲稿
2014/05/24 职场文书
2014年终工作总结范本
2014/12/15 职场文书
初中作文评语集锦
2014/12/25 职场文书
2015秋季幼儿园开学寄语
2015/03/25 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
会计入职心得体会
2016/01/22 职场文书
Python如何利用正则表达式爬取网页信息及图片
2021/04/17 Python
如何使用Tkinter进行窗口的管理与设置
2021/06/30 Python
nginx搭建NFS网络文件系统
2022/04/14 Servers