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

航空機戦争ゲームを実装するためのネイティブ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>

レンダリング

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • js+ca​​nvasは航空機戦争を実現する
  • JavaScript でフロントエンドの航空機戦争ゲームを実装
  • 航空機戦闘を実装するJavaScript
  • 航空機戦争ゲームを実装するためのJavaScript
  • JS を使用して航空機戦争の小さなゲームを実装する
  • 航空機戦争ゲームを実現するためのjs
  • 航空機戦争のJSオブジェクト指向実装
  • 航空機戦争ゲームを実現するためのjs
  • JavaScript で「航空機対戦車」ゲームを記述する完全な例
  • 航空機戦争ゲームを実現するためのjs+css

<<:  プライベートイメージウェアハウスを構築するためのDockerレジストリの実装方法

>>:  CentOS7 インストール Zabbix 4.0 チュートリアル (イラストとテキスト)

推薦する

CSS3は小さな矢印のさまざまなグラフィック効果を実現します

CSS を使ってさまざまなグラフィックを実現できるのは素晴らしいことです。画像を切り取る必要はなく、...

Intellij IDEA による Docker イメージの展開方法の手順の迅速な実装

目次1. Dockerはリモートアクセスを可能にする2. Intellij IDEAにDockerプ...

MySQLデータベース操作の基本コマンド

1. データベースを作成します。 データ data _name を作成します。 PHP でデータベー...

Mysql Explainコマンドの使用と分析

mysql explain コマンドは、MySQL がインデックスを使用して選択ステートメントを処理...

HTML マークアップ言語 - リファレンス

123WORDPRESS.COM HTML チュートリアル セクションに戻るには、ここをクリックして...

親要素に対する CSS 子要素の固定配置ソリューションの詳細な説明

基本概念絶対配置: 絶対配置に設定された要素ボックスはドキュメント フローから完全に削除され、その包...

jQueryは動的タグイベントを実装します

この記事では、タグイベントを動的に追加するためのjQueryの具体的なコードを参考までに紹介します。...

近々ブラウザに導入される CSS :is() と :where() の簡単な分析

Safari (Technology Preview 106) および Firefox (バージョン...

CSS で 3 列レイアウトを実装するいくつかの方法と利点と欠点

序文3 列レイアウトは、その名前が示すように、両側が固定され、中央が適応します。実際の開発では、3 ...

CSS 共通スタイルで二重矢印を描画するサンプルコード

1. 単一の矢印への複数の呼び出し単一の矢印を実装したら、二重矢印を実装するのは簡単です。上では、単...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

MySQL の結合インデックスと左端一致原則の詳細な説明

序文これまでインターネットでMySQLジョイントインデックスの最左接頭辞マッチングに関する記事をたく...

Vue の better-scroll コンポーネントを使用して水平スクロール機能を実現する

について最近、Vue を学習する過程で、基本的な知識の練習と強化を目的として、Qunar.com の...

vscodeを使用してReact Native開発環境を構築する方法を教えます

質問コードにはプロンプトがありません: RN 開発に不慣れな、フロントエンド以外の学生の多くは、「ど...

Linux での SELinux を理解する方法

目次1. SELinux の紹介2. SELinuxの基本概念2.1 仕事の種類2.2. セキュリテ...