Cosmic keystrokes

Generate an interactive speed typing game in a single HTML file, featuring side-scrolling gameplay and Tailwind CSS styling.

user

Write me a fully complete web app as a single HTML file. The app should contain a simple side-scrolling game where I use WASD to move around. When moving around the world, occasionally the character/sprite will encounter words. When a word is encountered, the player must correctly type the word as fast as possible.The faster the word is successfully typed, the more point the player gets. We should have a counter in the top-right to keep track of points. Words should be random and highly variable to keep the game interesting.

You should make the website very aesthetic and use Tailwind.

Here's a complete web app as a single HTML file that includes a simple side-scrolling game where the player uses WASD to move around. When the character encounters words, the player must correctly type the word as fast as possible. The faster the word is typed, the more points the player gets. A counter in the top-right keeps track of the points. The words are randomly generated and highly variable to keep the game interesting. The website is styled using Tailwind CSS:

html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Typing Adventure</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        #game-canvas {
            border: 1px solid black;
        }
    </style>
</head>
<body class="bg-gray-900 text-white">
    <div class="container mx-auto py-8">
        <h1 class="text-4xl font-bold mb-4">Word Typing Adventure</h1>
        <div class="flex">
            <canvas id="game-canvas" width="800" height="400" class="bg-gray-800"></canvas>
            <div class="ml-8">
                <h2 class="text-2xl font-bold mb-2">Type the Word:</h2>
                <input type="text" id="word-input" class="bg-gray-700 text-white px-4 py-2 rounded-md mb-4 focus:outline-none focus:ring-2 focus:ring-blue-500">
                <p id="score-display" class="text-lg">Score: 0</p>
            </div>
        </div>
    </div>

    <script>
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const wordInput = document.getElementById('word-input');
        const scoreDisplay = document.getElementById('score-display');

        let player = {
            x: 50,
            y: canvas.height / 2,
            width: 20,
            height: 40,
            speed: 5
        };

        let words = [];
        let score = 0;
        let currentWord = '';

        const wordList = ['apple', 'banana', 'cherry', 'date', 'elderberry', 'fig', 'grape', 'honeydew', 'kiwi', 'lemon', 'mango', 'nectarine', 'orange', 'peach', 'quince', 'raspberry', 'strawberry', 'tangerine', 'watermelon', 'zucchini'];

        function generateWord() {
            const randomIndex = Math.floor(Math.random() * wordList.length);
            const word = wordList[randomIndex];
            words.push({
                text: word,
                x: canvas.width,
                y: Math.random() * (canvas.height - 50),
                speed: Math.random() * 2 + 1
            });
        }

        function drawPlayer() {
            ctx.fillStyle = 'white';
            ctx.fillRect(player.x, player.y, player.width, player.height);
        }

        function drawWords() {
            ctx.font = '24px Arial';
            for (let i = 0; i < words.length; i++) {
                const word = words[i];
                ctx.fillStyle = 'white';
                ctx.fillText(word.text, word.x, word.y);
                word.x -= word.speed;
                if (word.x < -50) {
                    words.splice(i, 1);
                    i--;
                } else if (word.x < player.x + player.width && word.x + ctx.measureText(word.text).width > player.x && word.y < player.y + player.height && word.y + 24 > player.y) {
                    currentWord = word.text;
                }
            }
        }

        function updateScore() {
            scoreDisplay.textContent = `Score: ${score}`;
        }

        function gameLoop() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            drawPlayer();
            drawWords();
            requestAnimationFrame(gameLoop);

            if (Math.random() < 0.01) {
                generateWord();
            }

            if (currentWord !== '') {
                wordInput.focus();
            }
        }

        document.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft' || e.key === 'a') {
                player.x -= player.speed;
            } else if (e.key === 'ArrowRight' || e.key === 'd') {
                player.x += player.speed;
            } else if (e.key === 'ArrowUp' || e.key === 'w') {
                player.y -= player.speed;
            } else if (e.key === 'ArrowDown' || e.key === 's') {
                player.y += player.speed;
            }

            player.x = Math.max(0, Math.min(canvas.width - player.width, player.x));
            player.y = Math.max(0, Math.min(canvas.height - player.height, player.y));
        });

        wordInput.addEventListener('input', () => {
            if (wordInput.value.toLowerCase() === currentWord.toLowerCase()) {
                const typingTime = new Date().getTime() - wordTypingStartTime;
                const points = Math.max(100 - typingTime, 10);
                score += points;
                updateScore();
                wordInput.value = '';
                currentWord = '';
            }
        });

        let wordTypingStartTime;

        wordInput.addEventListener('focus', () => {
            wordTypingStartTime = new Date().getTime();
        });

        gameLoop();
    </script>
</body>
</html>

This HTML file includes a <canvas> element for rendering the game graphics and an input field for the player to type the words. The game loop continuously renders the player's character and the words on the canvas. When a word is encountered, the player can type the word in the input field. The faster the word is typed correctly, the more points the player earns. The current score is displayed in the top-right corner.

The styling is done using Tailwind CSS, which provides a utility-first CSS framework for rapidly building custom user interfaces. The background color of the page is set to a dark gray, and the text is white. The game canvas has a black border, and the input field and score display are styled with a slightly lighter gray background and rounded corners.

Note that this code assumes the availability of the Tailwind CSS library through the https://cdn.tailwindcss.com CDN. If you want to use Tailwind locally, you'll need to install it and include the compiled CSS file in your project.

API request

python
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":"Write me a fully complete web app as a single HTML file. The app should contain a simple side-scrolling game where I use WASD to move around.  When moving around the world, occasionally the character/sprite will encounter words. When a word is encountered, the player must correctly type the word as fast as possible.The faster the word is successfully typed, the more point the player gets. We should have a counter in the top-right to keep track of points. Words should be random and highly variable to keep the game interesting. \n\nYou should make the website very aesthetic and use Tailwind."}]
  )
  print(message.content)