Скопируйте этот запрос в нашу Консоль разработчика, чтобы попробовать самостоятельно!

Содержание
ПользовательНапишите мне полностью завершенное веб-приложение в виде одного HTML-файла. Приложение должно содержать простую игру с боковой прокруткой, где я использую 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-файла. Приложение должно содержать простую игру с боковой прокруткой, где я использую WASD для перемещения. При перемещении по миру персонаж/спрайт будет время от времени сталкиваться со словами. Когда слово встречается, игрок должен правильно напечатать слово как можно быстрее. Чем быстрее слово успешно напечатано, тем больше очков получает игрок. В правом верхнем углу должен быть счетчик для отслеживания очков. Слова должны быть случайными и сильно варьироваться, чтобы игра оставалась интересной.  \n  \nВы должны сделать веб-сайт очень эстетичным и использовать Tailwind."
                }
            ]
        }
    ]
)
print(message.content)