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

js实现飞机大战小游戏

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

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

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

JS面向对象实现飞机大战

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

python pygame模块编写飞机大战

本文实例为大家分享了python pygame模块编写飞机大战的具体代码,供大家参考,具体内容如下 该程序没有使用精灵组,而是用列表存储对象来替代精灵组的动画效果.用矩形对象的重叠来判断相撞事件.该程序可以流畅运行,注释较为详细,希望可以帮助大家. import pygame from pygame.locals import * from sys import exit import time import random # 创建子弹类,把子弹的图片转化为图像对象,设定固定的移动速度 clas

pygame实现简易飞机大战

利用pygame实现了简易版飞机大战.源代码如下: # -*- coding:utf-8 -*- import pygame import sys from pygame.locals import * from pygame.font import * import time import random class Hero(object): #玩家 英雄类 def __init__(self, screen_temp): self.x = 210 self.y = 700 self.life

python版飞机大战代码分享

利用pygame实现了简易版飞机大战.源代码如下: # -*- coding:utf-8 -*- import pygame import sys from pygame.locals import * from pygame.font import * import time import random class Hero(object): #玩家 英雄类 def __init__(self, screen_temp): self.x = 210 self.y = 700 self.life

python飞机大战pygame游戏背景设计详解

本文实例讲述了python飞机大战pygame游戏背景设计.分享给大家供大家参考,具体如下: 目标 背景交替滚动的思路确定 显示游戏背景 01. 背景交替滚动的思路确定 运行 备课代码,观察 背景图像的显示效果: 游戏启动后,背景图像 会 连续不断地 向下方 移动 在 视觉上 产生英雄的飞机不断向上方飞行的 错觉 -- 在很多跑酷类游戏中常用的套路 游戏的背景 不断变化 游戏的主角 位置保持不变 1.1 实现思路分析 解决办法 创建两张背景图像精灵 第 1 张 完全和屏幕重合 第 2 张在 屏幕

用Python写飞机大战游戏之pygame入门(4):获取鼠标的位置及运动

目标是拷贝微信的飞机大战,当然拷贝完以后大家就具备自己添加不同内容的能力了. 首先是要拿到一些图片素材,熟悉使用图像处理软件和绘画的人可以自己制作,并没有这项技能的同学只能和我一样从网上下载相应的素材了. 网上可以找到相应的这样的图片,注意,所有的元件图片要是png类型的图片,那样可以有透明的背景,否则会有白色的边框露出来. 找到素材以后我们就要开始搭建我们的飞机大战了. 微信上的飞机大战是由手指控制的,在电脑上,我们就先用鼠标代替了. 按照之前我们在天空上移动云的那个程序,我们可以知道该怎么做

归纳下js面向对象的几种常见写法总结

//定义Circle类,拥有成员变量r,常量PI和计算面积的成员函数area() 1.工厂方式 var Circle = function() { var obj = new Object(); obj.PI = 3.14159; obj.area = function( r ) { return this.PI * r * r; } return obj; } var c = new Circle(); alert( c.area( 1.0 ) ); 2.比较正规的写法 function Ci