User Ranking Evolved's game | AI game creator

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

No:6213

3748

User Ranking Evolved
Developer User3788｜Date and time 23/7/1 21:03:17
Build time 42.443 sec｜Game capacity 3.835KB｜

了解しました。では、ユーザーランキングの進化版ゲームを作成します。以下のようなゲームを実装しましょう。ゲームの目的：ユーザーは制限時間内に、できるだけ多くの「🍎」をタップして点数を獲得します。ルール： 1. 制限時間は30秒です。 2. 画面上に表示される「🍎」をタップすると、1ポイント獲得できます。 3. タップした「🍎」は画面から消え、別の場所に新しい「🍎」が表示されます。 4. 制限時間終了後、獲得したポイント数が表示され、自動的にスコアランキングに登録されます。以下が、作成したHTMLファイルの一例です。

Score: 0

Time: 30

このHTMLファイルを任意のテキストエディタで開き、ウェブブラウザで表示してください。ゲームが自動的に開始されるはずです。30秒間でできるだけ多くの「🍎」をタップし、ポイントを獲得しましょう。なお、ユーザーランキングに登録する部分は未実装です。ランキングの仕組みや保存先などがあれば、それに合わせて実装してください。

→ 　

1　

0　

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

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

(C)2023 HisashiApp

了解しました。では、ユーザーランキングの進化版ゲームを作成します。以下のようなゲームを実装しましょう。

ゲームの目的：
ユーザーは制限時間内に、できるだけ多くの「🍎」をタップして点数を獲得します。

ルール：
1. 制限時間は30秒です。
2. 画面上に表示される「🍎」をタップすると、1ポイント獲得できます。
3. タップした「🍎」は画面から消え、別の場所に新しい「🍎」が表示されます。
4. 制限時間終了後、獲得したポイント数が表示され、自動的にスコアランキングに登録されます。

以下が、作成したHTMLファイルの一例です。

```html
<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>Apple Catcher</title>
  <style>
    #game-container {
      position: relative;
      width: 100vw;
      height: 100vh;
    }

.apple {
      position: absolute;
      font-size: 50px;
    }

#score {
      position: fixed;
      top: 10px;
      right: 10px;
      font-size: 20px;
    }

#timer {
      position: fixed;
      top: 10px;
      left: 10px;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <div id="game-container"></div>
  <div id="score">Score: 0</div>
  <div id="timer">Time: 30</div>

<script>
    // 制限時間（秒）
    const TIME_LIMIT = 30;

// ポイント数
    let score = 0;

// 制限時間カウントダウン用の変数
    let timeLeft = TIME_LIMIT;

// 表示されているタイマーの状態を保持する変数
    let timerInterval = null;

// ゲーム開始時の処理
    function startGame() {
      // 制限時間カウントダウンを開始する
      startTimer();

// 初期の「🍎」を表示する
      createApple();

// ゲーム終了後にポイント数を表示する
      setTimeout(() => {
        showScore();
      }, TIME_LIMIT * 1000);
    }

// 制限時間カウントダウンの処理
    function startTimer() {
      timerInterval = setInterval(() => {
        timeLeft--;
        document.getElementById("timer").textContent = `Time: ${timeLeft}`;

if (timeLeft === 0) {
          clearInterval(timerInterval);
        }
      }, 1000);
    }

// 「🍎」を表示する処理
    function createApple() {
      const gameContainer = document.getElementById("game-container");
      const apple = document.createElement("span");

// ランダムな位置に「🍎」を表示する
      apple.style.left = `${Math.random() * (window.innerWidth - 50)}px`;
      apple.style.top = `${Math.random() * (window.innerHeight - 50)}px`;
      apple.textContent = "🍎";
      apple.classList.add("apple");

// 「🍎」がクリックされたときの処理
      apple.addEventListener("click", () => {
        score++;
        document.getElementById("score").textContent = `Score: ${score}`;
        gameContainer.removeChild(apple);
        createApple();
      });

gameContainer.appendChild(apple);
    }

// ポイント数を表示する処理
    function showScore() {
      alert(`Your score: ${score}`);

// ユーザーランキングに登録する処理をここに実装する
    }

// ゲーム開始
    startGame();
  </script>
</body>
</html>
```

このHTMLファイルを任意のテキストエディタで開き、ウェブブラウザで表示してください。ゲームが自動的に開始されるはずです。30秒間でできるだけ多くの「🍎」をタップし、ポイントを獲得しましょう。

なお、ユーザーランキングに登録する部分は未実装です。ランキングの仕組みや保存先などがあれば、それに合わせて実装してください。