Save time building landing pages and articles. Ask AI to output html, css, and javascript according to your specifications.

AI Website Builder. Powered by a state-of-the-art AI models.

AI Website Wizard

Advanced

Improve Claude's intelligence score from 49 to 57

Enable Claude extended thinking

Set a limit on the number of tokens Claude can use for extended thinking. Claude is unlikely to use more than 30,000 even if you set this higher.

Claude thinking budget (in tokens)

AI model

i47 💰:1.8

i58 💰:4.5

🏆 i67 💰:62.5

🏆 i66 💰:75.0

i65 💰:125.0

i63 💰:62.5

i61 💰:75.0

i60 💰:37.5

i58 💰:62.5

i57 💰:5.4

i57 💰:37.5

i56 💰:45.0

i55 💰:37.5

i54 💰:62.5

i52 💰:35.0

i51 💰:37.5

i49 💰:15.0

i49 💰:62.5

i48 💰:11.3

i44 💰:25.0

i43 💰:37.5

i42 💰:187.5

i40 💰:5.0

i39 💰:100.0

i38 💰:37.5

i37 💰:11.0

i36 💰:187.5

i34 💰:12.5

i33 💰:37.5

i30 💰:1.0

i29 💰:1.5

i28 💰:150.0

i23 💰:20.0

i20 💰:4.0

i18 💰:1.0

i16 💰:25.0

i13 💰:1.5

Generate privately

Your website request

Tip: Switch to high for best results. It will use more tokens thinking.

Reasoning effort

Simple questions

Intelligence: +2

Intelligence: +3

Upload a screenshot of a website you like. The AI will try to match the style.

Reference website image

System Message

Website Wizard

Generated Websites

Here's a complete web app as a single HTML file containing a Flappy Bird clone game with the request...

Answers to: Write me a fully complete web app as a single HTML file. The app should contain a simple side-scrolling 300px by 300px flappy-bird game clone where I press and hold space key to have a bird fly higher and avoid obstacles as they scroll in from right to left. We should have a counter in the top-right to keep track of points. The bird can take 3 hits before the game is over and you can try again. The game should have a welcome screen with a start button. After the game ends, there should be a retry button. You should make the website very aesthetic and use Tailwind.

Here's a complete web app as a single HTML file containing a Flappy Bird clone game with the requested features, using Tailwind for styling:

```html
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Clone</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-gradient-to-b from-blue-300 to-blue-500 h-screen flex items-center justify-center">
    <div id="game-container" class="w-[300px] h-[300px] bg-gradient-to-b from-sky-300 to-sky-500 relative overflow-hidden shadow-lg rounded-lg">
        <div id="welcome-screen" class="absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-50 text-white">
            <h1 class="text-3xl font-bold mb-4">Flappy Bird Clone</h1>
            <button id="start-button" class="bg-yellow-400 text-black px-4 py-2 rounded-full hover:bg-yellow-300 transition-colors">Start Game</button>
        </div>
        <div id="game-over-screen" class="hidden absolute inset-0 flex flex-col items-center justify-center bg-black bg-opacity-50 text-white">
            <h2 class="text-3xl font-bold mb-4">Game Over</h2>
            <button id="retry-button" class="bg-yellow-400 text-black px-4 py-2 rounded-full hover:bg-yellow-300 transition-colors">Retry</button>
        </div>
        <div id="bird" class="absolute w-8 h-8 bg-yellow-400 rounded-full"></div>
        <div id="score" class="absolute top-2 right-2 text-white font-bold text-xl"></div>
        <div id="health" class="absolute top-2 left-2 text-white font-bold text-xl"></div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const bird = document.getElementById('bird');
        const scoreElement = document.getElementById('score');
        const healthElement = document.getElementById('health');
        const welcomeScreen = document.getElementById('welcome-screen');
        const gameOverScreen = document.getElementById('game-over-screen');
        const startButton = document.getElementById('start-button');
        const retryButton = document.getElementById('retry-button');

        let birdY = 150;
        let birdVelocity = 0;
        let score = 0;
        let health = 3;
        let obstacles = [];
        let gameLoop;
        let spacePressed = false;

        function startGame() {
            welcomeScreen.classList.add('hidden');
            gameOverScreen.classList.add('hidden');
            birdY = 150;
            birdVelocity = 0;
            score = 0;
            health = 3;
            obstacles = [];
            updateScore();
            updateHealth();
            gameLoop = setInterval(update, 20);
        }

        function endGame() {
            clearInterval(gameLoop);
            gameOverScreen.classList.remove('hidden');
        }

        function update() {
            if (spacePressed) {
                birdVelocity = -5;
            } else {
                birdVelocity += 0.5;
            }

            birdY += birdVelocity;
            birdY = Math.max(0, Math.min(268, birdY));
            bird.style.top = `${birdY}px`;

            if (Math.random() < 0.02) {
                createObstacle();
            }

            moveObstacles();
            checkCollisions();
            removeOffscreenObstacles();
        }

        function createObstacle() {
            const obstacle = document.createElement('div');
            obstacle.classList.add('absolute', 'w-12', 'bg-green-500');
            const height = Math.random() * 150 + 50;
            obstacle.style.height = `${height}px`;
            obstacle.style.right = '-48px';
            obstacle.style.top = Math.random() > 0.5 ? '0' : 'auto';
            obstacle.style.bottom = Math.random() > 0.5 ? '0' : 'auto';
            gameContainer.appendChild(obstacle);
            obstacles.push(obstacle);
        }

        function moveObstacles() {
            obstacles.forEach(obstacle => {
                const currentRight = parseInt(obstacle.style.right);
                obstacle.style.right = `${currentRight + 2}px`;
            });
        }

        function checkCollisions() {
            obstacles.forEach(obstacle => {
                const obstacleRect = obstacle.getBoundingClientRect();
                const birdRect = bird.getBoundingClientRect();

                if (
                    birdRect.right > obstacleRect.left &&
                    birdRect.left < obstacleRect.right &&
                    birdRect.bottom > obstacleRect.top &&
                    birdRect.top < obstacleRect.bottom
                ) {
                    health--;
                    updateHealth();
                    obstacle.remove();
                    obstacles = obstacles.filter(o => o !== obstacle);

                    if (health <= 0) {
                        endGame();
                    }
                }
            });
        }

        function removeOffscreenObstacles() {
            obstacles = obstacles.filter(obstacle => {
                const currentRight = parseInt(obstacle.style.right);
                if (currentRight > 300) {
                    obstacle.remove();
                    score++;
                    updateScore();
                    return false;
                }
                return true;
            });
        }

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

        function updateHealth() {
            healthElement.textContent = `Health: ${'❤️'.repeat(health)}`;
        }

        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                spacePressed = true;
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.code === 'Space') {
                spacePressed = false;
            }
        });

        startButton.addEventListener('click', startGame);
        retryButton.addEventListener('click', startGame);
    </script>
</body>
</html>
```

This HTML file contains a complete Flappy Bird clone game with the following features:

1. A 300x300 pixel game area
2. A bird that flies higher when the space key is pressed and held
3. Obstacles that scroll from right to left
4. A score counter in the top-right corner
5. A health system where the bird can take 3 hits before the game ends
6. A welcome screen with a start button
7. A game over screen with a retry button
8. Aesthetic styling using Tailwind CSS

To play the game:

1. Open the HTML file in a web browser
2. Click the "Start Game" button on the welcome screen
3. Press and hold the space key to make the bird fly higher
4. Avoid obstacles as they scroll from right to left
5. The game ends when the bird's health reaches zero
6. Click the "Retry" button to play again

The game uses Tailwind CSS for styling, which is loaded from a CDN. The entire game logic is contained within the `<script>` tag at the end of the file.

Here's a complete web app as a single HTML file containing a Flappy Bird clone game with the requested features, using Tailwind for styling:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappy Bird Clone</title>
    <script src="https://cdn.tailwindcss.com"></script>
</head>
<body class="bg-blue-200 flex items-center justify-center h-screen">
    <div class="relative w-[300px] h-[300px] bg-blue-400 overflow-hidden">
        <div id="welcome" class="absolute inset-0 bg-blue-500 flex flex-col items-center justify-center">
            <h1 class="text-2xl font-bold text-white mb-4">Flappy Bird Clone</h1>
            <button id="startBtn" class="bg-yellow-400 text-blue-800 px-4 py-2 rounded-full font-bold">Start Game</button>
        </div>
        <div id="gameOver" class="absolute inset-0 bg-blue-500 bg-opacity-80 flex flex-col items-center justify-center hidden">
            <h2 class="text-2xl font-bold text-white mb-4">Game Over</h2>
            <button id="retryBtn" class="bg-yellow-400 text-blue-800 px-4 py-2 rounded-full font-bold">Retry</button>
        </div>
        <div id="bird" class="absolute w-8 h-8 bg-yellow-400 rounded-full"></div>
        <div id="score" class="absolute top-2 right-2 text-white font-bold">0</div>
        <div id="hits" class="absolute top-2 left-2 text-white font-bold">❤️❤️❤️</div>
    </div>

    <script>
        const bird = document.getElementById('bird');
        const gameArea = bird.parentElement;
        const welcome = document.getElementById('welcome');
        const gameOver = document.getElementById('gameOver');
        const startBtn = document.getElementById('startBtn');
        const retryBtn = document.getElementById('retryBtn');
        const scoreDisplay = document.getElementById('score');
        const hitsDisplay = document.getElementById('hits');

        let birdY = 150;
        let velocity = 0;
        let gravity = 0.5;
        let score = 0;
        let hits = 3;
        let gameLoop;
        let obstacles = [];

        function updateBird() {
            velocity += gravity;
            birdY += velocity;
            if (birdY > 268) birdY = 268;
            if (birdY < 0) birdY = 0;
            bird.style.top = `${birdY}px`;
        }

        function createObstacle() {
            const gap = 100;
            const topHeight = Math.random() * (200 - gap);
            const topObstacle = document.createElement('div');
            const bottomObstacle = document.createElement('div');

            topObstacle.className = 'absolute w-12 bg-green-600 right-0';
            bottomObstacle.className = 'absolute w-12 bg-green-600 right-0';

            topObstacle.style.height = `${topHeight}px`;
            bottomObstacle.style.height = `${300 - topHeight - gap}px`;
            bottomObstacle.style.top = `${topHeight + gap}px`;

            gameArea.appendChild(topObstacle);
            gameArea.appendChild(bottomObstacle);

            obstacles.push({ top: topObstacle, bottom: bottomObstacle, passed: false });
        }

        function moveObstacles() {
            obstacles.forEach((obstacle, index) => {
                const currentLeft = parseInt(obstacle.top.style.left || 300);
                const newLeft = currentLeft - 2;
                obstacle.top.style.left = `${newLeft}px`;
                obstacle.bottom.style.left = `${newLeft}px`;

                if (newLeft <= -48) {
                    gameArea.removeChild(obstacle.top);
                    gameArea.removeChild(obstacle.bottom);
                    obstacles.splice(index, 1);
                }

                if (!obstacle.passed && newLeft < 32) {
                    obstacle.passed = true;
                    score++;
                    scoreDisplay.textContent = score;
                }

                if (checkCollision(obstacle)) {
                    hits--;
                    hitsDisplay.textContent = '❤️'.repeat(hits);
                    if (hits === 0) endGame();
                }
            });
        }

        function checkCollision(obstacle) {
            const birdRect = bird.getBoundingClientRect();
            const topRect = obstacle.top.getBoundingClientRect();
            const bottomRect = obstacle.bottom.getBoundingClientRect();

            return (
                birdRect.right > topRect.left &&
                birdRect.left < topRect.right &&
                (birdRect.top < topRect.bottom || birdRect.bottom > bottomRect.top)
            );
        }

        function gameUpdate() {
            updateBird();
            moveObstacles();
            if (obstacles.length === 0 || obstacles[obstacles.length - 1].top.offsetLeft <= 150) {
                createObstacle();
            }
        }

        function startGame() {
            welcome.classList.add('hidden');
            birdY = 150;
            velocity = 0;
            score = 0;
            hits = 3;
            obstacles.forEach(obstacle => {
                gameArea.removeChild(obstacle.top);
                gameArea.removeChild(obstacle.bottom);
            });
            obstacles = [];
            scoreDisplay.textContent = '0';
            hitsDisplay.textContent = '❤️❤️❤️';
            gameLoop = setInterval(gameUpdate, 20);
        }

        function endGame() {
            clearInterval(gameLoop);
            gameOver.classList.remove('hidden');
        }

        startBtn.addEventListener('click', startGame);
        retryBtn.addEventListener('click', () => {
            gameOver.classList.add('hidden');
            startGame();
        });

        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space') {
                velocity = -8;
            }
        });

        document.addEventListener('keyup', (e) => {
            if (e.code === 'Space') {
                velocity = -4;
            }
        });
    </script>
</body>
</html>

Write_me_a_fully_complete_web_app_as_a_single_HTML_file_The_app_should_contain_a_simple_side_scrolling_300px_by_300px_flappy_bird_game_clone_where_I_press_and_hold_space_key_to_have_a_bird_fly_higher_and_avoid_obstacles_as_they_scroll_in_from_right_to_left_We_should_have_a_counter_in_the_top_right_to_keep_track_of_points_The_bird_can_take_3_hits_before_the_game_is_over_and_you_can_try_again_The_game_should_have_a_welcome_screen_with_a_start_button_After_the_game_ends__there_should_be_a_retry_button_You_should_make_the_website_very_aesthetic_and_use_Tailwind.html

This HTML file contains a complete Flappy Bird clone game with the following features:

1. A 300x300 pixel game area
2. A bird that flies higher when the space key is pressed and held
3. Obstacles that scroll from right to left
4. A score counter in the top-right corner
5. A health system where the bird can take 3 hits before the game ends
6. A welcome screen with a start button
7. A game over screen with a retry button
8. Aesthetic styling using Tailwind CSS

To play the game:

1. Open the HTML file in a web browser
2. Click the "Start Game" button on the welcome screen
3. Press and hold the space key to make the bird fly higher
4. Avoid obstacles as they scroll from right to left
5. The game ends when the bird's health reaches zero
6. Click the "Retry" button to play again

The game uses Tailwind CSS for styling, which is loaded from a CDN. The entire game logic is contained within the `<script>` tag at the end of the file.

Flappy Bird Clone

Generated Websites

Request another