宇宙键盘 - Anthropic

将此提示复制到我们的开发者 Console 中，自己尝试一下！

	内容
用户	请用单个 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 请求

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": "请用单个 HTML 文件为我编写一个完整的 Web 应用程序。该应用程序应包含一个简单的横向滚动游戏，我可以使用 WASD 键在其中移动。在移动过程中，角色/精灵偶尔会遇到单词。遇到单词时，玩家必须尽快正确地输入该单词。单词输入成功的速度越快，玩家获得的分数就越多。我们应该在右上角设置一个计数器来记录分数。为了保持游戏的趣味性，单词应该是随机且高度可变的。\n\n你应该让网站非常美观，并使用 Tailwind。"
                }
            ]
        }
    ]
)
print(message.content)

提示库

​示例输出

​API 请求

示例输出

API 请求