您的位置：首页 > 编程学习 > > 正文

javascript写游戏脚本（原生JS实现飞机大战小游戏）

更多时间：2022-01-21 00:11:29 类别：编程学习浏览量：1625

javascript写游戏脚本

原生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 oli = document.createElement('li');
    oli.id = 'GameBox';
    oli.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(oli);
   this.init();
  },

  score : 0 ,
  ifEnd : false,
  //初始化
  init: function(){
   
   var This = this;
   var oli = document.getElementById('GameBox');
   oli.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;';
    oli.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 , oli , e );
    };
    switch( i ){
     case 0:
      html = '简单难度';
      break;
     case 1:
      html = '中等难度';
      break;
     case 2:
      html = '困难难度';
      break;
     case 3:
      html = '小天才附体';
      break;
    }
    oP.innerHTML = html;
    oli.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.jpg" alt="javascript写游戏脚本（原生JS实现飞机大战小游戏）" border="0" />

效果图

javascript写游戏脚本（原生JS实现飞机大战小游戏）

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持开心学习网。

标签：js 飞机大战

上一篇：sql如何把重复数据记录删除（sql分组后二次汇总处理表重复记录查询和删除的实现方法）

下一篇：phpstudy如何部署在linux上（phpstudy linux面板CC防护功能使用教程）

您可能感兴趣

javascript写游戏脚本（原生JS实现飞机大战小游戏）

javascript写游戏脚本

热门推荐

排行榜