航空機戦争ゲームを実装するためのネイティブJS

この記事の例では、参考のために航空機戦争ゲームを実装するためのJSの具体的なコードを共有しています。具体的な内容は次のとおりです。

<html>
 <ヘッド>
  <title> 航空機戦争</title>
  <スタイル タイプ="text/css"> 
 *{margin:0;padding:0;font-family:"マイクロソフト ヤヘイ"}
  本文{オーバーフロー:hidden;;}
  </スタイル>
 </head>

 <本文>


  <スクリプト>
 window.onload = 関数(){
  ゲーム.exe();
 };
 var ゲーム = {
  //プログラムを起動します exe: function(){
   document.body.style.background = '#fff';
   var oDiv = document.createElement('div');
    oDiv.id = 'ゲームボックス';
    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);
   これを初期化します。
  },

  スコア: 0,
  ifEnd: false、
  //初期化 init: function(){
   
   var これ = これ;
   var oDiv = document.getElementById('GameBox');
   oDiv.innerHTML = '';
   ゲームスコア = 0;
   Game.ifEnd = false;
   var oH = document.createElement('h1');
    oH.innerHTML = '航空機戦争 v1.0';
    oH.style.cssText = 'color:#555555;フォントサイズ:30px;パディングトップ:50px;';
    oDiv.appendChild(oH);
   (var i=0;i<4;i++) の場合
   {
    var oP = document.createElement('p');
     oP.インデックス = 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 = 関数(){
     this.style.background = '#ff9933';
     this.style.color = '##ff6600'
    };
    oP.onmouseleave = 関数(){
     this.style.background = '#999';
     this.style.color = '白'
    };
    oP.onclick = 関数(e){
     e = e || ウィンドウイベント;
     this.start( this.index 、 oDiv 、 e );
    };
    スイッチ(i){
     ケース0:
      html = '難易度簡単';
      壊す;
     ケース1:
      html = '中程度の難易度';
      壊す;
     ケース2:
      html = '難易度';
      壊す;
     ケース3:
      html = '小さな天才に取り憑かれた';
      壊す;
    }
    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 = '位置:絶対;左:20px;上:20px;フォントサイズ:14px;色:黒;';
   oGameBox.appendChild(oS);
   this.plane( oGameBox , e ,index );
   this.enemy( oGameBox ,oS ,インデックス );
  },
  //平面について plane: function(oGameBox, e, index){
   var x = e.pageX;
    y = e.pageY;
   var oPlane = 新しい Image();
    oPlane.src = 'images/plane.png';
    平面の幅 = 60;
    oPlane.高さ = 36;
    oPlane.id = '飛行機';
   var tY = oGameBox.offsetTop+parseInt(oGameBox.style.borderWidth)+oPlane.height/2;
   var lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   window.onresize = 関数(){
    lX = oGameBox.offsetLeft+parseInt(oGameBox.style.borderWidth)+oPlane.width/2;
   };
   var top = y- tY;
   var 左 = 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 || ウィンドウイベント;
     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;
     左 = Math.max( 左 、 左最小 );

     oPlane.style.left = 左 + 'px';
     oPlane.style.top = top + 'px';
    }
   };
   this.biu( oPlane 、 oGameBox 、インデックス );
  },

  biu: 関数(oPlane,oGameBox,インデックス){
   変数速度;
   スイッチ ( インデックス )
   {
    ケース0:
     速度 = 30;
     壊す;
    ケース1:
     速度 = 40;
     壊す;
    ケース2:
     速度 = 50;
     壊す;
    ケース3:
     速度 = 10;
     壊す;
   
   }
   this.BiuTimer = setInterval(function(){
    var oBiu = 新しいイメージ();
     oBiu.src = 'images/bullet.png';
     oBiu.幅 = 6;
     oBiu.高さ = 22;
     oBiu.className = '弾丸';
    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( 関数(){
     if( !oBiu.parentNode){
      クリア間隔(oBiu.timer);
     }
     oBiu.style.top = oBiu.offsetTop - 10 + 'px';
     if(oBiu.offsetTop < -oBiu.height){
      クリア間隔(oBiu.timer);
      oBiu.parentNode.removeChild(oBiu);
     }
    }, 13 );
   } 、スピード ）;
  },
  敵: 関数(oGameBox,oS,インデックス){
   var a, x;
   スイッチ ( インデックス )
   {
    ケース0:
     1 = 1;
     500;
     壊す;
    ケース1:
     a = 2;
     300 です
     壊す;
    ケース2:
     a = 3;
     x = 200;
     壊す;
    ケース3:
     a = 5;
     100 です
     壊す;
   
   }
   
   this.EnemyTimer = setInterval( 関数(){
    var oEnemy = 新しい Image();
     oEnemy.src = 'images/enemy.png';
     敵の幅 = 23;
     敵の高さ = 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(){
     
     (var i = 0;i < allBiu.length;i++) の場合
     {
      if(Game.boom(oEnemy,allBiu[i]))
      {
       ゲームスコア++;
       oS.innerHTML = Game.score;
       oEnemy.src = 'images/boom.png';
       クリア間隔(oEnemy.pzBiu);
       クリア間隔(oEnemy.pzPlane);
       allBiu[i].parentNode.removeChild( allBiu[i] );
       setTimeout(関数(){
        if( oEnemy.parentNode ){
         oEnemy.parentNode.removeChild(oEnemy);
        };
       },300);
       壊す;
      }
     }
    },50);
    //戦闘機との衝突監視 var oPlane = document.getElementById('plane');
    oEnemy.pzPlane = setInterval(function(){
     if(Game.ifEnd){
      クリア間隔(oEnemy.pzPlane);
     }

     if( Game.boom( oEnemy , oPlane ))
     {
      ゲーム終了時にtrueを返します。
      クリア間隔(oEnemy.pzPlane);
      間隔をクリアします( Game.BiuTimer);
      間隔をクリアします( Game.EnemyTimer );
      oEnemy.src = 'images/boom.png';
      oPlane.src = 'images/boom2.png';
      setTimeout(関数(){
       ゲームオーバー(oGameBox);
      },300);
     }
    },50);
   }, x); //敵生成速度},
  //衝突検出ブーム: 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;

   ( R2 < L1 || L2 > R1 || B2 < T1 || T2 > B1 ) の場合
   {
    falseを返します; // 衝突なし}
   それ以外
   {
    true を返す; // ヒット }
  },
   //ゲームオーバー: function (oGameBox) {
    oGameBox.innerHTML = '';
    var oDiv = document.createElement('div');
     oDiv.style.cssText = '幅:300px;高さ:200px;余白:100px 自動;背景:#e0e0e0;境界線:5px 実線 #858585';
    var oT = document.createElement('h3');
     oT.innerHTML = 'ゲームオーバー';
     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 = 'フォントサイズ:16px;色:#fff;';

    var oRestart = document.createElement('div');
     oRestart.style.cssText = '幅:100px;高さ:40px;フォントサイズ:14px;テキスト配置:center;行の高さ:40px;色:白;背景:#999;余白:20px auto;カーソル:ポインター;';
     oRestart.innerHTML = '再起動';
     oRestart.onclick = 関数(){
      ゲームを初期化します。
     };

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

   //getclass メソッド getClass : function( cName , parent ) {
    親 = 親 || ドキュメント;
    if(ドキュメント.getElementsByClassName){
     親を返します。getElementsByClassName(cName);
    }
    それ以外
    {
     var all = parent.getElementsByTagName('*');
     var arr = [];
     ( var i = 0; i<all.length; i++ ) の場合
     {
      var arrClass = all.className.split(' ');
      for( var j = 0; j < arrClass.length; j++ ){
       もしarrClass[j]がcNameならば
       {
        arr.push(すべて[i]);
        壊す;
       }
      }
     }
     arr を返します。
   }
  },
 };
  </スクリプト>
 </本文>
</html>

レンダリング