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

本文实例为大家分享了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>

效果图

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

时间: 2021-06-07

js实现飞机大战小游戏

本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.html代码 <html> <head> <title></title> <meta http-equiv="content" content="text/html" charset="utf-8"/> <link rel="stylesheet" type="text/

JS面向对象实现飞机大战

本文实例为大家分享了JS面向对象实现飞机大战的具体代码,供大家参考,具体内容如下 主页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Title</title> <style> .bg{ width: 530px; height: 600px; position: relative; ma

JavaScript原生编写《飞机大战坦克》游戏完整实例

先来看看开始的界面图 实现思路: 1.打开页面,背景开始走动: 2.点击开始,飞机开始不断发射子弹,敌人随机出现在上方: 3.当敌人碰到子弹,敌人消失: 4.当敌人和飞机相遇,飞机死亡,结束游戏: html页面 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>飞机大战</title> <link r

js实现飞机大战游戏

本文实例为大家分享了js实现飞机大战游戏的具体代码,供大家参考,具体内容如下 CSS部分的代码: <style> * { margin: 0px; padding: 0px; } canvas{ border: 1px solid #000; display: block; margin: auto; } </style> JavaScript代码: <!-- 先创建一个画布 --> <canvas id="canvas" width=&quo

python实现飞机大战游戏

飞机大战(Python)代码分为两个python文件,工具类和主类,需要安装pygame模块,能完美运行(网上好多不完整的,调试得心累.实现出来,成就感还是满满的),如图所示: 完整代码如下: 1.工具类plane_sprites.py import random import pygame # 屏幕大小的常量 SCREEN_RECT = pygame.Rect(0, 0, 480, 700) # 刷新的帧率 FRAME_PER_SEC = 60 # 创建敌机的定时器常量 CREATE_ENEM

500行代码使用python写个微信小游戏飞机大战游戏

这几天在重温微信小游戏的飞机大战,玩着玩着就在思考人生了,这飞机大战怎么就可以做的那么好,操作简单,简单上手. 帮助蹲厕族.YP族.饭圈女孩在无聊之余可以有一样东西让他们振作起来!让他们的左手 / 右手有节奏有韵律的朝着同一个方向来回移动起来! 这是史诗级的发明,是浓墨重彩的一笔,是-- 在一阵抽搐后,我结束了游戏,瞬时觉得一切都索然无味,正在我进入贤者模式时,突然想到,如果我可以让更多人已不同的方式体会到这种美轮美奂的感觉岂不美哉? 所以我打开电脑,创建了一个 plan_game.py-- 先

python实现飞机大战游戏(pygame版)

简介 使用python实现pygame版的飞机大战游戏: 环境:Windows系统+python3.8.0 游戏规则: 1.点击"PLAY"或者按键"P"开始游戏: 2.敌机根据设置频率从顶部随机位置生成,生成后向下移动: 3.飞船在底部中间生成,玩家使用上下左右键控制飞船移动,敲击空格键发射子弹: 4.子弹打到敌机,该敌机产生爆炸效果并累计分数到右上角: 5.消灭10只飞机后,等级升高,敌机生成频率变快,下落速度也变快: 6.当三条命都消失了,游戏结束. 游戏运行

js实现坦克大战游戏

本文实例为大家分享了js实现坦克大战游戏的具体代码,供大家参考,具体内容如下 <!DOCTYPE html> <html> <head> <title>tank</title> <style type="text/css"> body { margin: 0px; padding: 0px; border: 0px; } .map { position: absolute; top: 30px; width: 39

Python3实现飞机大战游戏

本文实例为大家分享了Python3实现飞机大战游戏的具体代码,供大家参考,具体内容如下 1.主程序:plane_main.py import pygame from plane_sprites import * class PlaneGame(object): #飞机大战主游戏类 def __init__(self): print("游戏初始化") #1.创建游戏的窗口 self.screen = pygame.display.set_mode(SCREEN_RECT.size) #2

Unity3D实现飞机大战游戏(2)

本文为大家分享了Unity3D飞机大战游戏第一部分的实现代码,供大家参考,具体内容如下 让飞机可以发射子弹 准备工作: 1.将子弹设置成预制体 2.在飞机下新建一个子物体Gun 3.调整好位置以后,将子弹设置成预制体 //发射子弹的速率 public float rate = 0.2f; public GameObject bullet;//子弹的类型 //发射子弹的方法 public void fire() { //初始化一个子弹预制体 GameObject.Instantiate(bulle

Unity3D实现飞机大战游戏(1)

本文为大家分享了Unity3D飞机大战游戏第一部分的实现代码,供大家参考,具体内容如下 实现背景轮播 1.首先找两个背景图片,让两张图片竖直摆放且没有间隔 2.两个图片的下降的播放速度应当同步 public float moveSpeed = 3f;//指的是在unity里的移动速度 // Update is called once per frame void Update() { this.transform.Translate(Vector3.down * moveSpeed *Time.

使用python实现飞机大战游戏

本文实例为大家分享了Python飞机大战项目,供大家参考,具体内容如下 import gc import random import pygame # 玩家飞机精灵类 import Constants class HeroPlane(pygame.sprite.Sprite): def __init__(self, screen): # 调用父类初始化方法 # pygame.sprite.Sprite.__init__(self) super().__init__() # 窗口 self.scr