このプロンプトを開発者コンソールにコピーして、自分で試してみてください！

コンテンツ
ユーザー単一のHTMLファイルとして完全なWebアプリを書いてください。このアプリには、WASDを使って移動できるシンプルなサイドスクロールゲームを含めてください。世界を移動している間、キャラクター/スプライトは時折単語に遭遇します。単語に遭遇したら、プレイヤーはできるだけ速くその単語を正しくタイプしなければなりません。単語を速く正しくタイプできるほど、プレイヤーは高得点を獲得できます。右上にカウンターを設置して、ポイントを記録するようにしてください。単語はランダムで多様性があり、ゲームを面白く保つようにしてください。

ウェブサイトは非常に美しく作り、Tailwindを使用してください。

​
出力例

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://cdn.tailwindcss.com"></script>
    <title>サイドスクロールタイピングゲーム</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      スコア: <span id="score">0</span>
    </div>
    <div id="game" class="h-screen w-screen overflow-hidden relative">
      <div
        id="player"
        class="absolute bottom-10 left-10 w-8 h-8 bg-blue-500"
      ></div>
    </div>
    <div
      id="word-input"
      class="fixed top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2 bg-white text-black p-4 rounded hidden"
    >
      <input
        type="text"
        id="typed-word"
        class="border border-gray-300 rounded px-2 py-1 mb-2 w-full"
      />
      <button id="submit-word" class="bg-blue-500 text-white px-4 py-2 rounded">
        送信
      </button>
    </div>
    <script>
      const words = [
        '能力',
        '可能',
        'について',
        '上記',
        '受け入れる',
        'によると',
        'アカウント',
        '横切って',
        'アクション',
        '活動',
        '実際に',
        'アドレス',
        '管理',
        '認める',
        '大人',
        '影響',
        'の後',
        '再び',
        '反対',
        '代理店',
        'エージェント',
        '前',
        '同意する',
        '契約',
        '先に',
        '空気',
        'すべて',
        '許可する',
        'ほとんど',
        '一人で',
        '沿って',
        'すでに',
        'また',
        'しかし',
        'いつも',
        'アメリカ人',
        '間に',
        '量',
        '分析',
        'そして',
        '動物',
        '別の',
        '答え',
        'どれか',
        '誰でも',
        '何でも',
        '現れる',
        '適用する',
        'アプローチ',
        '領域',
        '主張する',
        '腕',
        '周り',
        '到着する',
        'アート',
        '記事',
        'アーティスト',
        'として',
        '尋ねる',
        '仮定する',
        'で',
        '攻撃',
        '注意',
        '弁護士',
        '聴衆',
        '著者',
        '権威',
        '利用可能',
        '避ける',
        '離れて',
        '赤ちゃん',
        'バック',
        '悪い',
        'バッグ',
        'ボール',
        '銀行',
        'バー',
        'ベース',
        'です',
        '打つ',
        '美しい',
        'なぜなら',
        'なる',
        'ベッド',
        '前に',
        '始める',
        '行動',
        '後ろに',
        '信じる',
        '利益',
        '最高',
        'より良い',
        '間に',
        '超えて',
        '大きい',
        '法案',
        '十億',
        'ビット',
        '黒',
        '血',
        '青',
        'ボード',
        '体',
        '本',
        '生まれた',
        '両方',
        'ボックス',
        '男の子',
        '壊す',
        '持ってくる',
        '兄弟',
        '予算',
        '建てる',
        'ビル',
        'ビジネス',
        'しかし',
        '買う',
        'によって',
        '呼ぶ',
        'カメラ',
        'キャンペーン',
      ];

      let score = 0;
      let currentWord;
      let startTime;

      const game = document.getElementById('game');
      const player = document.getElementById('player');
      const wordInput = document.getElementById('word-input');
      const typedWord = document.getElementById('typed-word');
      const submitWord = document.getElementById('submit-word');
      const scoreDisplay = document.getElementById('score');

      let playerX = 10;
      let playerY = game.offsetHeight - 50;
      const speed = 5;

      function placeWord() {
        const word = document.createElement('div');
        word.textContent = words[Math.floor(Math.random() * words.length)];
        word.className = 'absolute text-2xl';
        word.style.left = `${game.offsetWidth + 10}px`;
        word.style.top = `${Math.random() * (game.offsetHeight - 50)}px`;
        game.appendChild(word);
        return word;
      }

      function checkCollision(word) {
        const playerRect = player.getBoundingClientRect();
        const wordRect = word.getBoundingClientRect();
        return !(
          playerRect.right < wordRect.left ||
          playerRect.left > wordRect.right ||
          playerRect.bottom < wordRect.top ||
          playerRect.top > wordRect.bottom
        );
      }

      function startInput(word) {
        currentWord = word.textContent;
        wordInput.style.display = 'block';
        typedWord.value = '';
        typedWord.focus();
        startTime = Date.now();
      }

      function endInput() {
        wordInput.style.display = 'none';
        const endTime = Date.now();
        const elapsedTime = endTime - startTime;
        const timeBonus = Math.max(2000 - elapsedTime, 0);
        score += Math.round(1000 + timeBonus);
        scoreDisplay.textContent = score;
      }

      function checkInput() {
        if (typedWord.value === currentWord) {
          endInput();
        }
      }

      function gameLoop() {
        playerY = Math.max(
          0,
          Math.min(playerY, game.offsetHeight - player.offsetHeight)
        );
        playerX = Math.max(
          0,
          Math.min(playerX, game.offsetWidth - player.offsetWidth)
        );
        player.style.top = `${playerY}px`;
        player.style.left = `${playerX}px`;

        const words = Array.from(
          document.querySelectorAll('#game > div:not(#player)')
        );
        words.forEach((word) => {
          const currentLeft = parseInt(word.style.left);
          word.style.left = `${currentLeft - speed}px`;
          if (checkCollision(word)) {
            startInput(word);
          }
          if (currentLeft < -word.offsetWidth) {
            word.remove();
          }
        });

        if (Math.random() < 0.01) {
          placeWord();
        }

        requestAnimationFrame(gameLoop);
      }

      document.addEventListener('keydown', (e) => {
        if (e.key === 'w') playerY -= speed;
        if (e.key === 'a') playerX -= speed;
        if (e.key === 's') playerY += speed;
        if (e.key === 'd') playerX += speed;
      });

      typedWord.addEventListener('input', checkInput);
      submitWord.addEventListener('click', checkInput);

      gameLoop();
    </script>
  </body>
</html>

​
APIリクエスト

ライブラリ企業の予言者