Frappes Cosmiques

	Contenu
Utilisateur	Écrivez-moi une application web complètement fonctionnelle dans un seul fichier HTML. L'application devrait contenir un jeu simple à défilement latéral où j'utilise WASD pour me déplacer. En me déplaçant dans le monde, occasionnellement le personnage/sprite rencontrera des mots. Quand un mot est rencontré, le joueur doit taper correctement le mot aussi vite que possible. Plus le mot est tapé avec succès rapidement, plus le joueur obtient de points. Nous devrions avoir un compteur en haut à droite pour suivre les points. Les mots devraient être aléatoires et très variés pour garder le jeu intéressant. Vous devriez rendre le site web très esthétique et utiliser Tailwind.

Contenu

Utilisateur

Écrivez-moi une application web complètement fonctionnelle dans un seul fichier HTML. L'application devrait contenir un jeu simple à défilement latéral où j'utilise WASD pour me déplacer. En me déplaçant dans le monde, occasionnellement le personnage/sprite rencontrera des mots. Quand un mot est rencontré, le joueur doit taper correctement le mot aussi vite que possible. Plus le mot est tapé avec succès rapidement, plus le joueur obtient de points. Nous devrions avoir un compteur en haut à droite pour suivre les points. Les mots devraient être aléatoires et très variés pour garder le jeu intéressant.

Vous devriez rendre le site web très esthétique et utiliser Tailwind.

Exemple de Sortie

<!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>Jeu de Frappe à Défilement Latéral</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      Score: <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">
        Soumettre
      </button>
    </div>
    <script>
      const words = [
        'capacité',
        'capable',
        'à propos',
        'au-dessus',
        'accepter',
        'selon',
        'compte',
        'à travers',
        'action',
        'activité',
        'réellement',
        'adresse',
        'administration',
        'admettre',
        'adulte',
        'affecter',
        'après',
        'encore',
        'contre',
        'agence',
        'agent',
        'il y a',
        'accepter',
        'accord',
        'devant',
        'air',
        'tout',
        'permettre',
        'presque',
        'seul',
        'le long',
        'déjà',
        'aussi',
        'bien que',
        'toujours',
        'Américain',
        'parmi',
        'montant',
        'analyse',
        'et',
        'animal',
        'autre',
        'réponse',
        'tout',
        'quelqu\'un',
        'quelque chose',
        'apparaître',
        'appliquer',
        'approche',
        'zone',
        'argumenter',
        'bras',
        'autour',
        'arriver',
        'art',
        'article',
        'artiste',
        'comme',
        'demander',
        'supposer',
        'à',
        'attaque',
        'attention',
        'avocat',
        'audience',
        'auteur',
        'autorité',
        'disponible',
        'éviter',
        'loin',
        'bébé',
        'retour',
        'mauvais',
        'sac',
        'balle',
        'banque',
        'bar',
        'base',
        'être',
        'battre',
        'beau',
        'parce que',
        'devenir',
        'lit',
        'avant',
        'commencer',
        'comportement',
        'derrière',
        'croire',
        'bénéfice',
        'meilleur',
        'mieux',
        'entre',
        'au-delà',
        'grand',
        'facture',
        'milliard',
        'peu',
        'noir',
        'sang',
        'bleu',
        'conseil',
        'corps',
        'livre',
        'né',
        'les deux',
        'boîte',
        'garçon',
        'casser',
        'apporter',
        'frère',
        'budget',
        'construire',
        'bâtiment',
        'affaires',
        'mais',
        'acheter',
        'par',
        'appeler',
        'caméra',
        'campagne',
      ];

      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>

Requête API

import anthropic

client = anthropic.Anthropic(
    # par défaut os.environ.get("ANTHROPIC_API_KEY")
    api_key="my_api_key",
)
message = client.messages.create(
    model="claude-sonnet-4-5",
    max_tokens=2000,
    temperature=0,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": "Écrivez-moi une application web complètement fonctionnelle dans un seul fichier HTML. L'application devrait contenir un jeu simple à défilement latéral où j'utilise WASD pour me déplacer. En me déplaçant dans le monde, occasionnellement le personnage/sprite rencontrera des mots. Quand un mot est rencontré, le joueur doit taper correctement le mot aussi vite que possible. Plus le mot est tapé avec succès rapidement, plus le joueur obtient de points. Nous devrions avoir un compteur en haut à droite pour suivre les points. Les mots devraient être aléatoires et très variés pour garder le jeu intéressant.\n\nVous devriez rendre le site web très esthétique et utiliser Tailwind."
                }
            ]
        }
    ]
)
print(message.content)

	Contenu
Utilisateur	Écrivez-moi une application web complètement fonctionnelle dans un seul fichier HTML. L'application devrait contenir un jeu simple à défilement latéral où j'utilise WASD pour me déplacer. En me déplaçant dans le monde, occasionnellement le personnage/sprite rencontrera des mots. Quand un mot est rencontré, le joueur doit taper correctement le mot aussi vite que possible. Plus le mot est tapé avec succès rapidement, plus le joueur obtient de points. Nous devrions avoir un compteur en haut à droite pour suivre les points. Les mots devraient être aléatoires et très variés pour garder le jeu intéressant. Vous devriez rendre le site web très esthétique et utiliser Tailwind.

Contenu

Utilisateur

Exemple de Sortie

<!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>Jeu de Frappe à Défilement Latéral</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      Score: <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">
        Soumettre
      </button>
    </div>
    <script>
      const words = [
        'capacité',
        'capable',
        'à propos',
        'au-dessus',
        'accepter',
        'selon',
        'compte',
        'à travers',
        'action',
        'activité',
        'réellement',
        'adresse',
        'administration',
        'admettre',
        'adulte',
        'affecter',
        'après',
        'encore',
        'contre',
        'agence',
        'agent',
        'il y a',
        'accepter',
        'accord',
        'devant',
        'air',
        'tout',
        'permettre',
        'presque',
        'seul',
        'le long',
        'déjà',
        'aussi',
        'bien que',
        'toujours',
        'Américain',
        'parmi',
        'montant',
        'analyse',
        'et',
        'animal',
        'autre',
        'réponse',
        'tout',
        'quelqu\'un',
        'quelque chose',
        'apparaître',
        'appliquer',
        'approche',
        'zone',
        'argumenter',
        'bras',
        'autour',
        'arriver',
        'art',
        'article',
        'artiste',
        'comme',
        'demander',
        'supposer',
        'à',
        'attaque',
        'attention',
        'avocat',
        'audience',
        'auteur',
        'autorité',
        'disponible',
        'éviter',
        'loin',
        'bébé',
        'retour',
        'mauvais',
        'sac',
        'balle',
        'banque',
        'bar',
        'base',
        'être',
        'battre',
        'beau',
        'parce que',
        'devenir',
        'lit',
        'avant',
        'commencer',
        'comportement',
        'derrière',
        'croire',
        'bénéfice',
        'meilleur',
        'mieux',
        'entre',
        'au-delà',
        'grand',
        'facture',
        'milliard',
        'peu',
        'noir',
        'sang',
        'bleu',
        'conseil',
        'corps',
        'livre',
        'né',
        'les deux',
        'boîte',
        'garçon',
        'casser',
        'apporter',
        'frère',
        'budget',
        'construire',
        'bâtiment',
        'affaires',
        'mais',
        'acheter',
        'par',
        'appeler',
        'caméra',
        'campagne',
      ];

      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>

Requête API

import anthropic

client = anthropic.Anthropic(
    # par défaut os.environ.get("ANTHROPIC_API_KEY")
    api_key="my_api_key",
)
message = client.messages.create(
    model="claude-sonnet-4-5",
    max_tokens=2000,
    temperature=0,
    messages=[
        {
            "role": "user",
            "content": [
                {
                    "type": "text",
                    "text": "Écrivez-moi une application web complètement fonctionnelle dans un seul fichier HTML. L'application devrait contenir un jeu simple à défilement latéral où j'utilise WASD pour me déplacer. En me déplaçant dans le monde, occasionnellement le personnage/sprite rencontrera des mots. Quand un mot est rencontré, le joueur doit taper correctement le mot aussi vite que possible. Plus le mot est tapé avec succès rapidement, plus le joueur obtient de points. Nous devrions avoir un compteur en haut à droite pour suivre les points. Les mots devraient être aléatoires et très variés pour garder le jeu intéressant.\n\nVous devriez rendre le site web très esthétique et utiliser Tailwind."
                }
            ]
        }
    ]
)
print(message.content)