原生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实现飞机大战小游戏

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

Javascript 相关文章推荐
基于Jquery的动态添加控件并取值的实现代码
Sep 24 Javascript
JavaScript高级程序设计 阅读笔记(十二) js内置对象Math
Aug 14 Javascript
20条学习javascript的编程规范的建议
Nov 28 Javascript
jquery实现选中单选按钮下拉伸缩效果
Aug 06 Javascript
JavaScript实现的伸展收缩型菜单代码
Oct 14 Javascript
JavaScript实现字符串与日期的互相转换及日期的格式化
Mar 07 Javascript
Js遍历键值对形式对象或Map形式的方法
Aug 08 Javascript
浅谈移动端之js touch事件 手势滑动事件
Nov 07 Javascript
vue中使用localstorage来存储页面信息
Nov 04 Javascript
js判断数组是否包含某个字符串变量的实例
Nov 24 Javascript
小程序api实现promise封装过程解析
Nov 21 Javascript
Vue Router 实现动态路由和常见问题及解决方法
Mar 06 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
You might like
一些星际专用术语解释
2020/03/04 星际争霸
php二分法在IP地址查询中的应用
2008/08/12 PHP
PHP自定义图片缩放函数实现等比例不失真缩放的方法
2016/08/19 PHP
PHP实现的下载远程文件类定义与用法示例
2017/07/05 PHP
PHP+redis实现微博的拉模型案例详解
2019/07/10 PHP
php和nginx交互实例讲解
2019/09/24 PHP
激活 ActiveX 控件
2006/10/09 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
Js动态添加复选框Checkbox的实例方法
2013/04/08 Javascript
javascript学习笔记(四)function函数部分
2014/09/30 Javascript
jquery.fastLiveFilter.js实现输入自动过滤的方法
2015/08/11 Javascript
JS实现新浪微博效果带遮罩层的弹出框代码
2015/10/12 Javascript
jQuery EasyUI datagrid在翻页以后仍能记录被选中行的实现代码
2016/08/15 Javascript
Node.js 使用AngularJS的方法示例
2018/05/11 Javascript
angular4自定义组件非input元素实现ngModel双向数据绑定的方法
2018/12/28 Javascript
vue中的inject学习教程
2019/04/24 Javascript
vuex存值与取值的实例
2019/11/06 Javascript
微信小程序实现星级评价
2019/11/20 Javascript
js实现轮播图效果 z-index实现轮播图
2020/01/17 Javascript
深入理解 ES6中的 Reflect用法
2020/07/18 Javascript
python错误:AttributeError: 'module' object has no attribute 'setdefaultencoding'问题的解决方法
2014/08/22 Python
Python处理RSS、ATOM模块FEEDPARSER介绍
2015/02/18 Python
Python进行数据提取的方法总结
2016/08/22 Python
基于python实现生成指定大小txt文档
2020/07/20 Python
Django路由层URLconf作用及原理解析
2020/09/24 Python
绝对令人的惊叹的CSS3折叠效果(3D效果)整理
2012/12/30 HTML / CSS
英格兰橄榄球商店:England Rugby Store
2016/12/17 全球购物
对象的序列化(serialization)类是面向流的,应如何将对象写入到随机存取文件中
2015/06/22 面试题
花店创业计划书范文
2014/02/07 职场文书
残疾人小组计划书
2014/04/27 职场文书
理财学专业自荐书
2014/06/28 职场文书
2015年医德医风工作总结
2015/04/02 职场文书
怎样写家长意见
2015/06/04 职场文书
主婚人致辞精选
2015/07/28 职场文书
从np.random.normal()到正态分布的拟合操作
2021/06/02 Python
MySQL Shell import_table数据导入的实现
2021/08/07 MySQL