Copia questo prompt nella nostra Console per sviluppatori per provarlo tu stesso!

Contenuto
UtenteScrivimi un’applicazione web completa come singolo file HTML. L’app dovrebbe contenere un semplice gioco a scorrimento laterale in cui uso WASD per muovermi. Mentre mi muovo nel mondo, occasionalmente il personaggio/sprite incontrerà delle parole. Quando una parola viene incontrata, il giocatore deve digitare correttamente la parola il più velocemente possibile. Più velocemente la parola viene digitata con successo, più punti ottiene il giocatore. Dovremmo avere un contatore in alto a destra per tenere traccia dei punti. Le parole dovrebbero essere casuali e molto variabili per mantenere il gioco interessante.

Dovresti rendere il sito web molto estetico e utilizzare Tailwind.

Esempio di Output

<!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>Gioco di Digitazione a Scorrimento Laterale</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      Punteggio: <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">
        Invia
      </button>
    </div>
    <script>
      const words = [
        'abilità',
        'capace',
        'circa',
        'sopra',
        'accettare',
        'secondo',
        'conto',
        'attraverso',
        'azione',
        'attività',
        'effettivamente',
        'indirizzo',
        'amministrazione',
        'ammettere',
        'adulto',
        'influenzare',
        'dopo',
        'ancora',
        'contro',
        'agenzia',
        'agente',
        'fa',
        'concordare',
        'accordo',
        'avanti',
        'aria',
        'tutto',
        'permettere',
        'quasi',
        'solo',
        'lungo',
        'già',
        'anche',
        'sebbene',
        'sempre',
        'americano',
        'tra',
        'quantità',
        'analisi',
        'e',
        'animale',
        'un altro',
        'risposta',
        'qualsiasi',
        'chiunque',
        'qualcosa',
        'apparire',
        'applicare',
        'approccio',
        'area',
        'discutere',
        'braccio',
        'intorno',
        'arrivare',
        'arte',
        'articolo',
        'artista',
        'come',
        'chiedere',
        'assumere',
        'a',
        'attaccare',
        'attenzione',
        'avvocato',
        'pubblico',
        'autore',
        'autorità',
        'disponibile',
        'evitare',
        'via',
        'bambino',
        'indietro',
        'cattivo',
        'borsa',
        'palla',
        'banca',
        'bar',
        'base',
        'essere',
        'battere',
        'bello',
        'perché',
        'diventare',
        'letto',
        'prima',
        'iniziare',
        'comportamento',
        'dietro',
        'credere',
        'beneficio',
        'migliore',
        'meglio',
        'tra',
        'oltre',
        'grande',
        'conto',
        'miliardo',
        'po',
        'nero',
        'sangue',
        'blu',
        'tavola',
        'corpo',
        'libro',
        'nato',
        'entrambi',
        'scatola',
        'ragazzo',
        'rompere',
        'portare',
        'fratello',
        'budget',
        'costruire',
        'edificio',
        'affari',
        'ma',
        'comprare',
        'da',
        'chiamare',
        'fotocamera',
        'campagna',
      ];

      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>

Richiesta API

Claude 3 Opus sarà presto disponibile sull’API Bedrock
import anthropic

client = anthropic.Anthropic(
    # defaults to 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": "Scrivimi un'applicazione web completa come singolo file HTML. L'app dovrebbe contenere un semplice gioco a scorrimento laterale in cui uso WASD per muovermi. Mentre mi muovo nel mondo, occasionalmente il personaggio/sprite incontrerà delle parole. Quando una parola viene incontrata, il giocatore deve digitare correttamente la parola il più velocemente possibile. Più velocemente la parola viene digitata con successo, più punti ottiene il giocatore. Dovremmo avere un contatore in alto a destra per tenere traccia dei punti. Le parole dovrebbero essere casuali e molto variabili per mantenere il gioco interessante.  \n  \nDovresti rendere il sito web molto estetico e utilizzare Tailwind."
                }
            ]
        }
    ]
)
print(message.content)