AI game creator

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

No:6886

←

Prev Next

→

Gotham City
Developer User3932｜Date and time 23/7/4 2:46:26
Build time 43.999 sec｜Game capacity 4.008KB｜

Script

以下は、スマートフォンで遊べるシンプルなゲーム「ゴッサムシティ」の実装例です。

🦇

このゲームでは、画面内をスワイプしてバットマンを操作し、ゴッサムシティから現れる犯罪者を避けます。バットマンと犯罪者が重なるとゲームオーバーになります。なお、JavaScriptの部分では、ファイル内に`script`タグで囲まれたプログラムがあり、それが処理を開始しています。

←

Prev　Next

→ 　

Back　

[PR]現在の売れ筋Kindle本ランキング

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

以下は、スマートフォンで遊べるシンプルなゲーム「ゴッサムシティ」の実装例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>ゴッサムシティ</title>
  <style>
    #city {
      width: 300px;
      height: 300px;
      border: 1px solid black;
      background-color: rgb(30, 30, 30);
      position: relative;
    }

#batman {
      position: absolute;
      bottom: 0;
      left: 0;
      font-size: 30px;
    }

.criminal {
      font-size: 30px;
      position: absolute;
      bottom: 0;
      right: 0;
    }
  </style>
</head>
<body>
  <div id="city">
    <div id="batman">🦇</div>
  </div>

// クリミナルの出現間隔（ミリ秒）
    const spawnInterval = 2000;

// クリミナルの移動速度（ピクセル／ミリ秒）
    const criminalSpeed = 1;

// タッチイベントの初期位置
    let touchStartX = 0;
    let touchStartY = 0;

// バットマンの初期位置
    let batmanX = 0;
    let batmanY = 0;

// クリミナル移動のタイマー
    let moveTimer;

// クリミナルのIDカウンター
    let criminalID = 0;

// バットマンの移動イベントリスナーの設定
    document.getElementById('city').addEventListener('touchstart', touchStart);
    document.getElementById('city').addEventListener('touchmove', touchMove);

// クリミナルの出現イベントリスナーの設定
    setInterval(spawnCriminal, spawnInterval);

// クリミナルの移動タイマーの開始
    moveTimer = setInterval(moveCriminals, 10);

// タッチ開始時の処理
    function touchStart(event) {
      event.preventDefault();
      touchStartX = event.touches[0].clientX;
      touchStartY = event.touches[0].clientY;
    }

// タッチ移動時の処理
    function touchMove(event) {
      event.preventDefault();
      const touchX = event.touches[0].clientX;
      const touchY = event.touches[0].clientY;
      batmanX += touchX - touchStartX;
      batmanY += touchY - touchStartY;
      document.getElementById('batman').style.transform = `translate(${batmanX}px, ${batmanY}px)`;
      touchStartX = touchX;
      touchStartY = touchY;
    }

// クリミナルの出現処理
    function spawnCriminal() {
      if (gameOver) {
        return;
      }

const criminal = document.createElement('div');
      criminal.classList.add('criminal');
      criminal.textContent = '👤';
      criminal.id = `criminal${criminalID}`;
      criminal.style.left = '0px';
      document.getElementById('city').appendChild(criminal);
      criminalID++;
    }

// クリミナルの移動処理
    function moveCriminals() {
      if (gameOver) {
        return;
      }

const criminals = document.getElementsByClassName('criminal');
      Array.from(criminals).forEach((criminal) => {
        const criminalLeft = parseFloat(criminal.style.left);
        const newLeft = criminalLeft + criminalSpeed;
        criminal.style.left = `${newLeft}px`;

const batmanRect = document.getElementById('batman').getBoundingClientRect();
        const criminalRect = criminal.getBoundingClientRect();
        if (batmanRect.right > criminalRect.left && batmanRect.left < criminalRect.right &&
          batmanRect.bottom > criminalRect.top && batmanRect.top < criminalRect.bottom) {
          gameOver = true;
          criminal.innerHTML = '💀';
          clearInterval(moveTimer);
        }
      });
    }
  </script>
</body>
</html>
```

このゲームでは、画面内をスワイプしてバットマンを操作し、ゴッサムシティから現れる犯罪者を避けます。バットマンと犯罪者が重なるとゲームオーバーになります。

なお、JavaScriptの部分では、ファイル内に`script`タグで囲まれたプログラムがあり、それが処理を開始しています。