宇宙鍵盤 - Anthropic

將此提示複製到我們的開發人員 Console 中，自己試試看！

	內容
用戶	請為我編寫一個完整的 Web 應用程序，並將其作為單個 HTML 文件。該應用程序應包含一個簡單的橫向捲動遊戲，我可以使用 WASD 鍵在其中移動。在移動過程中，角色/精靈偶爾會遇到單詞。遇到單詞時，玩家必須盡快正確地輸入該單詞。成功輸入單詞的速度越快，玩家獲得的分數就越多。我們應該在右上角放置一個計數器來記錄分數。單詞應該是隨機且高度可變的，以保持遊戲的趣味性。你應該讓網站非常美觀，並使用 Tailwind CSS。

示例輸出

<!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 請求

Claude 3 Opus 即將在 Bedrock API 中推出

import anthropic

client = anthropic.Anthropic(
    # 預設為 os.environ.get("ANTHROPIC_API_KEY")
    api_key="my_api_key",
)
message = client.messages.create(
    model="claude-3-opus-20240229",
    max_tokens=2000,
    temperature=0,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": "請為我編寫一個完整的 Web 應用程序，並將其作為單個 HTML 文件。該應用程序應包含一個簡單的橫向捲動遊戲，我可以使用 WASD 鍵在其中移動。在移動過程中，角色/精靈偶爾會遇到單詞。遇到單詞時，玩家必須盡快正確地輸入該單詞。成功輸入單詞的速度越快，玩家獲得的分數就越多。我們應該在右上角放置一個計數器來記錄分數。單詞應該是隨機且高度可變的，以保持遊戲的趣味性。\n\n你應該讓網站非常美觀，並使用 Tailwind CSS。"
                }
            ]
        }
    ]
)
print(message.content)

提示語料庫

​示例輸出

​API 請求

示例輸出

API 請求