Kopiere diese Aufforderung in unsere Entwickler-Konsole, um es selbst auszuprobieren!

Inhalt
BenutzerSchreibe mir eine vollständige Web-App als eine einzige HTML-Datei. Die App sollte ein einfaches Side-Scrolling-Spiel enthalten, bei dem ich mich mit WASD bewegen kann. Beim Bewegen in der Welt trifft der Charakter/Sprite gelegentlich auf Wörter. Wenn ein Wort gefunden wird, muss der Spieler das Wort so schnell wie möglich korrekt eingeben. Je schneller das Wort erfolgreich eingegeben wird, desto mehr Punkte erhält der Spieler. Wir sollten einen Zähler oben rechts haben, um die Punkte zu verfolgen. Die Wörter sollten zufällig und sehr unterschiedlich sein, um das Spiel interessant zu halten.

Du solltest die Website sehr ästhetisch gestalten und Tailwind verwenden.

​
Beispielausgabe

<!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>Side-Scrolling-Tippspiel</title>
  </head>
  <body class="bg-gray-900 text-white">
    <div class="fixed top-4 right-4 text-2xl">
      Punkte: <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">
        Absenden
      </button>
    </div>
    <script>
      const words = [
        'Fähigkeit',
        'fähig',
        'über',
        'oben',
        'akzeptieren',
        'gemäß',
        'Konto',
        'über',
        'Aktion',
        'Aktivität',
        'tatsächlich',
        'Adresse',
        'Verwaltung',
        'zugeben',
        'Erwachsener',
        'beeinflussen',
        'nach',
        'wieder',
        'gegen',
        'Agentur',
        'Agent',
        'vor',
        'zustimmen',
        'Vereinbarung',
        'voraus',
        'Luft',
        'alle',
        'erlauben',
        'fast',
        'allein',
        'entlang',
        'bereits',
        'auch',
        'obwohl',
        'immer',
        'Amerikaner',
        'unter',
        'Betrag',
        'Analyse',
        'und',
        'Tier',
        'ein anderer',
        'Antwort',
        'irgendein',
        'irgendjemand',
        'irgendetwas',
        'erscheinen',
        'anwenden',
        'Ansatz',
        'Bereich',
        'argumentieren',
        'Arm',
        'um',
        'ankommen',
        'Kunst',
        'Artikel',
        'Künstler',
        'als',
        'fragen',
        'annehmen',
        'bei',
        'angreifen',
        'Aufmerksamkeit',
        'Anwalt',
        'Publikum',
        'Autor',
        'Autorität',
        'verfügbar',
        'vermeiden',
        'weg',
        'Baby',
        'zurück',
        'schlecht',
        'Tasche',
        'Ball',
        'Bank',
        'Bar',
        'Basis',
        'sein',
        'schlagen',
        'schön',
        'weil',
        'werden',
        'Bett',
        'vor',
        'beginnen',
        'Verhalten',
        'hinter',
        'glauben',
        'Vorteil',
        'beste',
        'besser',
        'zwischen',
        'jenseits',
        'groß',
        'Rechnung',
        'Milliarde',
        'Bit',
        'schwarz',
        'Blut',
        'blau',
        'Brett',
        'Körper',
        'Buch',
        'geboren',
        'beide',
        'Kiste',
        'Junge',
        'brechen',
        'bringen',
        'Bruder',
        'Budget',
        'bauen',
        'Gebäude',
        'Geschäft',
        'aber',
        'kaufen',
        'durch',
        'anrufen',
        'Kamera',
        'Kampagne',
      ];

      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-Anfrage

Claude 3 Opus kommt bald zur Bedrock API
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": "Schreibe mir eine vollständige Web-App als eine einzige HTML-Datei. Die App sollte ein einfaches Side-Scrolling-Spiel enthalten, bei dem ich mich mit WASD bewegen kann. Beim Bewegen in der Welt trifft der Charakter/Sprite gelegentlich auf Wörter. Wenn ein Wort gefunden wird, muss der Spieler das Wort so schnell wie möglich korrekt eingeben. Je schneller das Wort erfolgreich eingegeben wird, desto mehr Punkte erhält der Spieler. Wir sollten einen Zähler oben rechts haben, um die Punkte zu verfolgen. Die Wörter sollten zufällig und sehr unterschiedlich sein, um das Spiel interessant zu halten.  \n  \nDu solltest die Website sehr ästhetisch gestalten und Tailwind verwenden."
                }
            ]
        }
    ]
)
print(message.content)
BibliothekUnternehmens-Hellseher