Click here for free DL of the app version that can save data.

No:6885

637

←

Prev Next

→

Air Mother Duel
Developer User3898｜Date and time 23/7/4 2:19:52
Build time 52.761 sec｜Game capacity 4.231KB｜

Script

了解です。以下に空母決戦というシンプルなゲームを作成するためのHTMLファイルの実装例を示します。

空母決戦

🔺

🛥️

このゲームでは、プレイヤーは🔺で表され、カーソルキーで操作します。プレイヤーは画面上部の固定位置に表示され、左右に移動することができます。空母は🛥️で表され、ランダムな位置に表示されます。プレイヤーと空母が重なるとゲームオーバーとなり、ポップアップが表示されます。スペースキーを押すとミサイルが発射され、画面上部から下方向に移動します。ミサイルが空母に当たるとゲームオーバーとなります。

←

Prev　Next

→ 　

Back　

[PR]現在の欲しいゲームランキング

Click here for free DL of the app version that can save data.

了解です。以下に空母決戦というシンプルなゲームを作成するためのHTMLファイルの実装例を示します。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>空母決戦</title>
  <style>
    body {
      text-align: center;
      font-family: Arial, sans-serif;
    }
    #player {
      font-size: 30px;
      margin-top: 20px;
    }
    #carrier {
      font-size: 60px;
    }
    .missile {
      position: absolute;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <h1>空母決戦</h1>
  <p id="player">🔺</p>
  <p id="carrier">🛥️</p>
  
  <script>
    // プレイヤーの初期位置
    let playerPosition = 50;
  
    // カーソルキーのイベントリスナーを追加
    document.addEventListener('keydown', (event) => {
      const { key } = event;
  
      // カーソルキーに応じてプレイヤーを移動
      if (key === 'ArrowLeft') {
        movePlayer(-10);
      } else if (key === 'ArrowRight') {
        movePlayer(10);
      }
    });
  
    // プレイヤーを指定した位置に移動させる関数
    function movePlayer(offset) {
      playerPosition += offset;
      if (playerPosition < 0) {
        playerPosition = 0;
      } else if (playerPosition > window.innerWidth - 50) {
        playerPosition = window.innerWidth - 50;
      }
      document.getElementById('player').style.left = playerPosition + 'px';
    }
  
    // ゲームオーバー判定を行う関数
    function gameover() {
      const player = document.getElementById('player');
      const carrier = document.getElementById('carrier');
  
      // プレイヤーと空母の位置を取得
      const playerRect = player.getBoundingClientRect();
      const carrierRect = carrier.getBoundingClientRect();
  
      // プレイヤーと空母の矩形が重なった場合にゲームオーバーとする
      if (!(playerRect.right < carrierRect.left || 
          playerRect.left > carrierRect.right || 
          playerRect.bottom < carrierRect.top || 
          playerRect.top > carrierRect.bottom)) {
        alert('ゲームオーバー！');
        location.reload();
      }
    }
  
    // ミサイルを発射する関数
    function shoot() {
      const player = document.getElementById('player');
      const playerRect = player.getBoundingClientRect();
  
      // ミサイルの要素を生成
      const missile = document.createElement('p');
      missile.textContent = '💣';
      missile.classList.add('missile');
  
      // ミサイルの初期位置をプレイヤーの位置に合わせる
      missile.style.left = (playerRect.left + 20) + 'px';
      missile.style.top = (playerRect.top - 20) + 'px';
  
      // ミサイルをドキュメントに追加
      document.body.appendChild(missile);
  
      // ミサイルをアニメーションさせる
      const missileInterval = setInterval(() => {
        const top = parseInt(missile.style.top, 10);
        missile.style.top = (top - 5) + 'px';
  
        // ミサイルが画面外に出た場合は削除してインターバルを終了
        if (top < -20) {
          missile.remove();
          clearInterval(missileInterval);
        }
  
        // ミサイルと空母の衝突判定
        gameover();
      }, 10);
    }
  
    // スペースキーのイベントリスナーを追加
    document.addEventListener('keydown', (event) => {
      const { key } = event;
  
      // スペースキーを押された場合にミサイルを発射
      if (key === ' ') {
        shoot();
      }
    });
  </script>
</body>
</html>
```