Shoot down 16 bullets into 4 squares that merge in 5 seconds. If they combine, you lose.'s game

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

No:5852

442

←

Prev Next

→

Shoot down 16 bullets into 4 squares that merge in..ALL
Developer User3848｜Date and time 23/6/30 23:28:46
Build time 38.051 sec｜Game capacity 3.933KB｜

Script

了解しました。以下に、指定された条件でのゲームの実装例を示します。

このプログラムは、クリックされたボックスが全て合体した状態になった場合に「ゲームオーバー」と表示し、ページをリロードしています。各ボックスをクリックすることで、ボックスの合体を試みることができ、一定の間隔で弾を発射します。合体に成功した場合には弾の発射が停止し、ゲームオーバー処理が実行されます。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋アプリランキング

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

了解しました。以下に、指定された条件でのゲームの実装例を示します。

```html
<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8">
    <style>
    body {
      text-align: center;
      font-size: 3rem;
      cursor: pointer;
    }
    </style>
  </head>
  <body>
    <script>
    // ゲームで使用する要素の取得
    const box1 = document.createElement('div');
    const box2 = document.createElement('div');
    const box3 = document.createElement('div');
    const box4 = document.createElement('div');
    const bulletCountDisplay = document.createElement('span');

// 初期状態のスタイル設定
    const boxStyle = `
      display: inline-block;
      width: 200px;
      height: 200px;
      background-color: gray;
      margin: 20px;
    `;
    const bulletCountStyle = `
      font-size: 1.5rem;
      margin: 10px;
      display: block;
    `;
    
    // 合体されたら負けゲームオーバー処理
    function gameOver() {
      alert('ゲームオーバー！');
      location.reload();
    }

// クリック処理
    function handleClick() {
      // ボックスを合体させる処理
      if (box1.parentElement && box2.parentElement && box3.parentElement && box4.parentElement) {
        box1.style.width = '420px';
        box1.style.height = '420px';
        box2.style.display = 'none';
        box3.style.display = 'none';
        box4.style.display = 'none';
        bulletCountDisplay.textContent = '';
        gameOver();
      }
    }

// 弾を撃つ処理
    function shootBullet() {
      const bullet = document.createElement('div');
      bullet.style.width = '10px';
      bullet.style.height = '10px';
      bullet.style.backgroundColor = 'red';
      bullet.style.position = 'absolute';

// 弾を動かすアニメーション
      const animateBullet = () => {
        let positionY = window.innerHeight - bullet.offsetTop;
        if (positionY <= 0) {
          bullet.remove();
          return;
        }
        positionY -= 20;
        bullet.style.top = window.innerHeight - positionY + 'px';
        requestAnimationFrame(animateBullet);
      };

animateBullet();
    }

// 弾を撃つタイミングの処理
    function shootBullets() {
      let count = 0;
      const interval = setInterval(() => {
        if (count === 16) {
          clearInterval(interval);
          return;
        }
        shootBullet();
        count++;
      }, 500);
    }

// 初期化処理
    function initialize() {
      // ボックスのスタイル設定
      box1.style = boxStyle;
      box2.style = boxStyle;
      box3.style = boxStyle;
      box4.style = boxStyle;

// 各ボックスにクリックイベントを設定
      box1.addEventListener('click', handleClick);
      box2.addEventListener('click', handleClick);
      box3.addEventListener('click', handleClick);
      box4.addEventListener('click', handleClick);

// ボックスを画面に追加
      document.body.appendChild(box1);
      document.body.appendChild(box2);
      document.body.appendChild(box3);
      document.body.appendChild(box4);

// 弾の発射数を表示する要素を作成
      bulletCountDisplay.style = bulletCountStyle;
      document.body.appendChild(bulletCountDisplay);

// 弾を撃つ処理を実行
      shootBullets();
    }

// 初期化処理を実行
    initialize();
    </script>
  </body>
</html>
```

このプログラムは、クリックされたボックスが全て合体した状態になった場合に「ゲームオーバー」と表示し、ページをリロードしています。各ボックスをクリックすることで、ボックスの合体を試みることができ、一定の間隔で弾を発射します。合体に成功した場合には弾の発射が停止し、ゲームオーバー処理が実行されます。