Have a fun game idea? Ask AI to build it for you. This tool will generate simple browser games that can be embedded in any webpage.

Powered by a state-of-the-art AI models. Tip: if the game isn't exactly what you wanted, reply to the AI and ask for changes.

AI Game Generator

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)

Set a limit on output length / cost. Increase the limit for better results.

Tip: Try 25,000 or more for best results.

Max completion tokens

AI model

Very smart & cheap

World's best for coding

Highest overall intelligence

OpenAI Flagship, Expensive

Great for math and science

Smart & cheap

Very smart

Reasoning Agent

Generate privately

Your game request

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

Reasoning effort

Simple questions

Complex questions

Very complex questions

System Message

Generated Games

Question Answerer

AI Researcher

Essay Writer

AI Chat

Writing Improver

Redraw Image

Fill in the Blanker

Image Trace

Photo Analyzer

AI Docs

AI Boards

AI Tutor

Extract Text from Image

Grammar Checker

AI Image Generator

Inpaint

Image to Prompt

Fix Hands

Chat PDF

Language Translator

PDF to Text

Code Improver

Blog Post Writer

Magic Prompt

Remove Background

Email Writer

Image to Video Maker

Change Photo Background

Logo Art Generator

Upscale

Cover Letter Writer

Photo Translator

Function Writer

Photo Object Remover

Selfie Refiner

Website Wizard

Outcrop Image

Code Generator

Icon Maker

Code Translator

Prompt Interpolator

Video Ad Script Writer

Infinite Zoom

Social Media Post Writer

AI Actors

Remove Video Background

Essay Grader

Speech to Text

Portrait Maker

Video Ad Maker

Video to Video

Plant Doctor

Video to MP3

Design to Code

LinkedIn Headshot Maker

AI Meeting Note Taker

URL to Screenshots

Website Improvement Suggester

Grand Slam Offer Generator

PDF to JPG

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ball Fall Game</title>
    <style>
        body {
            margin: 0;
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background-color: #1c1c1c;
            font-family: Arial, sans-serif;
            color: white;
        }
        
        #game-container {
            position: relative;
            width: 300px;
            height: 300px;
            background-color: #000;
            overflow: hidden;
            border-radius: 8px;
            border: 3px solid #3498db;
            box-shadow: 0 0 15px rgba(52, 152, 219, 0.5);
        }
        
        #welcome-screen, #game-over-screen {
            position: absolute;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.85);
            z-index: 2;
        }
        
        .screen-title {
            font-size: 24px;
            margin-bottom: 20px;
            color: #3498db;
            text-align: center;
        }
        
        .button {
            padding: 10px 20px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 5px;
            font-size: 16px;
            cursor: pointer;
            transition: all 0.2s;
        }
        
        .button:hover {
            background-color: #2980b9;
            transform: scale(1.05);
        }
        
        #game-canvas {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        #score-display {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 18px;
            color: white;
            z-index: 1;
        }
        
        #final-score {
            font-size: 22px;
            color: #3498db;
            margin: 15px 0;
        }
        
        .instructions {
            font-size: 13px;
            text-align: center;
            margin-bottom: 15px;
            max-width: 80%;
            line-height: 1.4;
            color: #bbb;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="welcome-screen">
            <div class="screen-title">Ball Fall</div>
            <div class="instructions">
                Use ← and → arrow keys to move the ball through gaps.<br>
                Stay away from the top to survive!
            </div>
            <button id="start-button" class="button">Start Game</button>
        </div>
        
        <div id="game-over-screen" style="display: none;">
            <div class="screen-title">Game Over!</div>
            <div id="final-score">Score: 0</div>
            <button id="retry-button" class="button">Play Again</button>
        </div>
        
        <div id="score-display">Score: 0</div>
        <canvas id="game-canvas" width="300" height="300"></canvas>
    </div>

    <script>
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const scoreDisplay = document.getElementById('score-display');
        const finalScore = document.getElementById('final-score');
        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');
        
        const CANVAS_WIDTH = 300;
        const CANVAS_HEIGHT = 300;
        
        let gameRunning = false;
        let score = 0;
        
        // Ball properties
        const BALL_RADIUS = 15;
        let ball = {
            x: CANVAS_WIDTH / 2,
            y: BALL_RADIUS,
            speed: 0,
            acceleration: 0.05,
            maxSpeed: 5,
            gravity: 1.5
        };
        
        // Obstacle properties
        let obstacles = [];
        let obstacleHeight = 20;
        let minGapWidth = BALL_RADIUS * 2.5;
        let baseSpeed = 1;
        let speedIncrement = 0.0001;
        let currentSpeed = baseSpeed;
        let spawnRate = 150; // Frames between obstacle spawns
        let spawnCounter = 0;
        let minSpawnRate = 90;
        
        // Controls
        let keys = {
            left: false,
            right: false
        };
        
        function init() {
            // Reset game state
            ball.x = CANVAS_WIDTH / 2;
            ball.y = BALL_RADIUS;
            ball.speed = 0;
            obstacles = [];
            score = 0;
            currentSpeed = baseSpeed;
            spawnRate = 150;
            spawnCounter = 0;
            
            updateScore();
            gameRunning = true;
            
            // Hide screens
            welcomeScreen.style.display = 'none';
            gameOverScreen.style.display = 'none';
            
            requestAnimationFrame(gameLoop);
        }
        
        function gameLoop() {
            // Clear canvas
            ctx.clearRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
            
            if (!gameRunning) return;
            
            // Update score
            score += 1;
            if (score % 10 === 0) {
                updateScore();
            }
            
            // Spawn obstacles
            spawnCounter++;
            if (spawnCounter >= spawnRate) {
                spawnObstacle();
                spawnCounter = 0;
                
                // Increase difficulty
                currentSpeed += speedIncrement;
                if (spawnRate > minSpawnRate) {
                    spawnRate -= 0.05;
                }
            }
            
            // Update ball position
            updateBall();
            
            // Update obstacles
            updateObstacles();
            
            // Draw everything
            drawGame();
            
            // Check game over condition
            if (ball.y <= BALL_RADIUS) {
                endGame();
                return;
            }
            
            requestAnimationFrame(gameLoop);
        }
        
        function updateBall() {
            // Handle horizontal movement
            if (keys.left) {
                ball.speed -= ball.acceleration;
                if (ball.speed < -ball.maxSpeed) ball.speed = -ball.maxSpeed;
            } else if (keys.right) {
                ball.speed += ball.acceleration;
                if (ball.speed > ball.maxSpeed) ball.speed = ball.maxSpeed;
            } else {
                // Apply friction
                ball.speed *= 0.9;
            }
            
            // Update ball position
            ball.x += ball.speed;
            
            // Keep ball within bounds
            if (ball.x < BALL_RADIUS) {
                ball.x = BALL_RADIUS;
                ball.speed = 0;
            } else if (ball.x > CANVAS_WIDTH - BALL_RADIUS) {
                ball.x = CANVAS_WIDTH - BALL_RADIUS;
                ball.speed = 0;
            }
            
            // Apply gravity
            let canFall = true;
            for (let obstacle of obstacles) {
                if (ballCollidesWithObstacle(ball, obstacle)) {
                    canFall = false;
                    ball.y = obstacle.y - BALL_RADIUS; // Position ball on top of obstacle
                    break;
                }
            }
            
            if (canFall) {
                ball.y += ball.gravity;
            }
            
            // Prevent ball from falling below the canvas
            if (ball.y > CANVAS_HEIGHT - BALL_RADIUS) {
                ball.y = CANVAS_HEIGHT - BALL_RADIUS;
            }
        }
        
        function ballCollidesWithObstacle(ball, obstacle) {
            // Check if ball is above the obstacle
            if (ball.y + BALL_RADIUS >= obstacle.y && 
                ball.y - BALL_RADIUS <= obstacle.y + obstacleHeight) {
                
                // Check if ball is in the gap
                if (ball.x - BALL_RADIUS > obstacle.gapStart && 
                    ball.x + BALL_RADIUS < obstacle.gapStart + obstacle.gapWidth) {
                    return false;
                }
                
                return true;
            }
            
            return false;
        }
        
        function spawnObstacle() {
            const gapWidth = minGapWidth + Math.random() * 50;
            const gapStart = Math.random() * (CANVAS_WIDTH - gapWidth);
            
            obstacles.push({
                y: CANVAS_HEIGHT,
                gapStart: gapStart,
                gapWidth: gapWidth
            });
        }
        
        function updateObstacles() {
            // Move obstacles up
            for (let i = 0; i < obstacles.length; i++) {
                obstacles[i].y -= currentSpeed;
            }
            
            // Remove obstacles that are off screen
            obstacles = obstacles.filter(obstacle => obstacle.y + obstacleHeight > 0);
        }
        
        function drawGame() {
            // Draw background
            ctx.fillStyle = '#000';
            ctx.fillRect(0, 0, CANVAS_WIDTH, CANVAS_HEIGHT);
            
            // Draw obstacles
            ctx.fillStyle = '#e74c3c';
            for (let obstacle of obstacles) {
                // Draw left part
                ctx.fillRect(0, obstacle.y, obstacle.gapStart, obstacleHeight);
                
                // Draw right part
                ctx.fillRect(
                    obstacle.gapStart + obstacle.gapWidth, 
                    obstacle.y, 
                    CANVAS_WIDTH - (obstacle.gapStart + obstacle.gapWidth), 
                    obstacleHeight
                );
            }
            
            // Draw ball
            ctx.beginPath();
            ctx.arc(ball.x, ball.y, BALL_RADIUS, 0, Math.PI * 2);
            ctx.fillStyle = '#3498db';
            ctx.fill();
            ctx.strokeStyle = '#2980b9';
            ctx.lineWidth = 2;
            ctx.stroke();
            
            // Draw a highlight on the ball
            ctx.beginPath();
            ctx.arc(ball.x - BALL_RADIUS/3, ball.y - BALL_RADIUS/3, BALL_RADIUS/3, 0, Math.PI * 2);
            ctx.fillStyle = 'rgba(255, 255, 255, 0.3)';
            ctx.fill();
        }
        
        function updateScore() {
            scoreDisplay.textContent = `Score: ${score}`;
        }
        
        function endGame() {
            gameRunning = false;
            finalScore.textContent = `Score: ${score}`;
            gameOverScreen.style.display = 'flex';
        }
        
        // Event listeners
        window.addEventListener('keydown', (e) => {
            if (e.key === 'ArrowLeft') keys.left = true;
            if (e.key === 'ArrowRight') keys.right = true;
        });
        
        window.addEventListener('keyup', (e) => {
            if (e.key === 'ArrowLeft') keys.left = false;
            if (e.key === 'ArrowRight') keys.right = false;
        });
        
        startButton.addEventListener('click', init);
        retryButton.addEventListener('click', init);
    </script>
</body>
</html>

1e32c0d0-f866-11ef-b46f-ad78e74d211b_output_engineeredPrompt_rawText

Create_a_single_html_page_with_a_300px_by_300px_javascript_ball_falling_game__where_I_use_the_left_and_right_arrows_to_move_a_falling_ball_left_and_right_to_fall_through_gaps_between_rows_of_obstacles_The_ball_starts_at_the_top_of_the_screen_and_falls_down_when_not_being_obstructed_by_obstacles_which_move_up_The_ball_doesn_t_fall_off_the_bottom_of_the_screen_The_game_ends_when_the_ball_is_pushed_to_the_top_of_the_screen_by_obstacles_The_ball_can_touch_the_obstacles_without_ending_the_game_The_ball_cannot_move_through_obstacles_Holding_left_or_right_should_accelerate_the_horizontal_movement_Obstacles_move_from_bottom_of_screen_to_top_and_increase_in_speed_and_frequency_over_time_There_should_be_a_point_counter_in_the_top_right_Users_score_points_with_time_The_game_should_have_a_welcome_screen_with_a_start_button_Each_row_of_obstacles_should_have_a_gap_big_enough_for_the_ball_to_fall_through_After_the_game_ends__there_should_be_a_retry_button.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>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(#70c1ff, #e0f2ff);
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
        }
        .game-container {
            position: relative;
            width: 300px;
            height: 300px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        canvas {
            display: block;
        }
        .screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            z-index: 10;
        }
        .screen h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .screen p {
            margin-bottom: 20px;
            text-align: center;
            padding: 0 20px;
            font-size: 14px;
        }
        button {
            background-color: #f8c945;
            border: none;
            color: #5d3b00;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s, background-color 0.2s;
            box-shadow: 0 4px 0 #d9a426;
        }
        button:hover {
            background-color: #ffd966;
            transform: translateY(-2px);
        }
        button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 #d9a426;
        }
        .health-container {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 5;
            display: flex;
        }
        .health {
            width: 20px;
            height: 20px;
            background-color: #ff5a5a;
            margin-right: 5px;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        .score {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 5;
            font-size: 20px;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        #game-screen {
            display: none;
        }
        #end-screen {
            display: none;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="game-canvas" width="300" height="300"></canvas>
        
        <div id="start-screen" class="screen">
            <h1>Flappy Bird</h1>
            <p>Press and hold SPACE to fly higher.<br>Avoid obstacles and collect points!</p>
            <button id="start-button">START</button>
        </div>
        
        <div id="game-screen">
            <div class="health-container">
                <div class="health"></div>
                <div class="health"></div>
                <div class="health"></div>
            </div>
            <div class="score">0</div>
        </div>
        
        <div id="end-screen" class="screen">
            <h1>Game Over!</h1>
            <p>Your score: <span id="final-score">0</span></p>
            <button id="retry-button">PLAY AGAIN</button>
        </div>
    </div>

    <script>
        // Game state variables
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const startScreen = document.getElementById('start-screen');
        const gameScreen = document.getElementById('game-screen');
        const endScreen = document.getElementById('end-screen');
        const startButton = document.getElementById('start-button');
        const retryButton = document.getElementById('retry-button');
        const finalScoreElement = document.getElementById('final-score');
        const scoreElement = document.querySelector('.score');
        const healthElements = document.querySelectorAll('.health');
        
        let gameActive = false;
        let bird;
        let pipes = [];
        let score = 0;
        let health = 3;
        let gravity = 0.25;
        let animationFrameId;
        let lastPipeTime = 0;
        let clouds = [];
        
        // Bird object
        class Bird {
            constructor() {
                this.x = 50;
                this.y = 150;
                this.vy = 0;
                this.width = 30;
                this.height = 24;
                this.lift = -5;
                this.invincible = false;
                this.invincibleTime = 0;
                this.wingPosition = 0;
                this.wingDirection = 1;
                this.wingSpeed = 0.15;
            }
            
            flap() {
                this.vy = this.lift;
            }
            
            update() {
                this.vy += gravity;
                this.y += this.vy;
                
                // Wing animation
                this.wingPosition += this.wingDirection * this.wingSpeed;
                if (this.wingPosition > 1 || this.wingPosition < -1) {
                    this.wingDirection *= -1;
                }
                
                // Keep bird inside the canvas
                if (this.y < 0) {
                    this.y = 0;
                    this.vy = 0;
                }
                if (this.y > canvas.height - this.height) {
                    this.y = canvas.height - this.height;
                    this.vy = 0;
                }
                
                // Update invincibility
                if (this.invincible) {
                    this.invincibleTime--;
                    if (this.invincibleTime <= 0) {
                        this.invincible = false;
                    }
                }
            }
            
            draw() {
                // Don't draw if flashing during invincibility
                if (this.invincible && Math.floor(this.invincibleTime / 5) % 2 === 0) {
                    return;
                }
                
                // Bird body
                ctx.fillStyle = '#f8c945';
                ctx.beginPath();
                ctx.ellipse(this.x, this.y + this.height/2, this.width/2, this.height/2, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // Wing
                ctx.fillStyle = '#e5b72f';
                ctx.beginPath();
                ctx.ellipse(
                    this.x - 5, 
                    this.y + this.height/2 + this.wingPosition * 5, 
                    this.width/3, this.height/4, 
                    Math.PI/4, 0, Math.PI * 2
                );
                ctx.fill();
                
                // Eye
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(this.x + 10, this.y + this.height/2 - 5, 5, 0, Math.PI * 2);
                ctx.fill();
                
                // Pupil
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(this.x + 12, this.y + this.height/2 - 5, 2, 0, Math.PI * 2);
                ctx.fill();
                
                // Beak
                ctx.fillStyle = '#ff7b00';
                ctx.beginPath();
                ctx.moveTo(this.x + 15, this.y + this.height/2 - 2);
                ctx.lineTo(this.x + 25, this.y + this.height/2);
                ctx.lineTo(this.x + 15, this.y + this.height/2 + 2);
                ctx.fill();
            }
            
            hit() {
                if (!this.invincible) {
                    health--;
                    updateHealthDisplay();
                    
                    if (health > 0) {
                        this.invincible = true;
                        this.invincibleTime = 60; // Invincible for 60 frames (about 1 second)
                    } else {
                        endGame();
                    }
                }
            }
        }
        
        // Pipe object
        class Pipe {
            constructor() {
                this.spacing = 100;
                this.top = Math.random() * (canvas.height - this.spacing - 20) + 20;
                this.bottom = this.top + this.spacing;
                this.x = canvas.width;
                this.width = 40;
                this.speed = 2;
                this.passed = false;
                this.highlight = false;
            }
            
            update() {
                this.x -= this.speed;
                
                // Check if pipe has passed the bird
                if (!this.passed && this.x + this.width < bird.x) {
                    score++;
                    scoreElement.textContent = score;
                    this.passed = true;
                    this.highlight = true;
                    setTimeout(() => {
                        this.highlight = false;
                    }, 300);
                }
            }
            
            draw() {
                // Top pipe
                const gradient = ctx.createLinearGradient(this.x, 0, this.x + this.width, 0);
                gradient.addColorStop(0, this.highlight ? '#97ff9b' : '#64d166');
                gradient.addColorStop(1, this.highlight ? '#46ce4a' : '#4ab54d');
                
                ctx.fillStyle = gradient;
                ctx.fillRect(this.x, 0, this.width, this.top);
                
                // Top pipe border
                ctx.fillStyle = this.highlight ? '#38a03b' : '#2a802c';
                ctx.fillRect(this.x - 2, this.top - 15, this.width + 4, 15);
                
                // Bottom pipe
                ctx.fillStyle = gradient;
                ctx.fillRect(this.x, this.bottom, this.width, canvas.height - this.bottom);
                
                // Bottom pipe border
                ctx.fillStyle = this.highlight ? '#38a03b' : '#2a802c';
                ctx.fillRect(this.x - 2, this.bottom, this.width + 4, 15);
            }
            
            hits(bird) {
                if (
                    bird.x + bird.width/2 > this.x &&
                    bird.x - bird.width/2 < this.x + this.width &&
                    (bird.y < this.top || bird.y + bird.height > this.bottom)
                ) {
                    return true;
                }
                return false;
            }
        }
        
        // Cloud object for background
        class Cloud {
            constructor() {
                this.x = canvas.width + Math.random() * 50;
                this.y = Math.random() * 100 + 20;
                this.width = Math.random() * 50 + 30;
                this.height = this.width * 0.6;
                this.speed = 0.5 + Math.random() * 0.5;
                this.opacity = 0.7 + Math.random() * 0.3;
            }
            
            update() {
                this.x -= this.speed;
                if (this.x + this.width < 0) {
                    this.x = canvas.width + Math.random() * 50;
                    this.y = Math.random() * 100 + 20;
                }
            }
            
            draw() {
                ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.width * 0.3, 0, Math.PI * 2);
                ctx.arc(this.x + this.width * 0.3, this.y - this.height * 0.1, this.width * 0.35, 0, Math.PI * 2);
                ctx.arc(this.x + this.width * 0.6, this.y, this.width * 0.3, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
            }
        }
        
        // Initialize clouds
        function initClouds() {
            clouds = [];
            for (let i = 0; i < 4; i++) {
                const cloud = new Cloud();
                cloud.x = Math.random() * canvas.width;
                clouds.push(cloud);
            }
        }
        
        // Game loop
        function gameLoop(timestamp) {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw background
            drawBackground();
            
            // Update and draw clouds
            clouds.forEach(cloud => {
                cloud.update();
                cloud.draw();
            });
            
            // Add new pipe
            if (!lastPipeTime || timestamp - lastPipeTime > 1500) {
                pipes.push(new Pipe());
                lastPipeTime = timestamp;
            }
            
            // Update and draw pipes
            for (let i = pipes.length - 1; i >= 0; i--) {
                pipes[i].update();
                pipes[i].draw();
                
                // Check for collision
                if (pipes[i].hits(bird)) {
                    bird.hit();
                }
                
                // Remove pipes that are off screen
                if (pipes[i].x + pipes[i].width < 0) {
                    pipes.splice(i, 1);
                }
            }
            
            // Update and draw bird
            bird.update();
            bird.draw();
            
            // Continue the game loop
            if (gameActive) {
                animationFrameId = requestAnimationFrame(gameLoop);
            }
        }
        
        // Draw background
        function drawBackground() {
            // Sky gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#70c1ff');
            gradient.addColorStop(1, '#e0f2ff');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Ground
            const groundHeight = 30;
            ctx.fillStyle = '#8fd850';
            ctx.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight);
            
            // Ground pattern
            ctx.fillStyle = '#74c042';
            for (let i = 0; i < canvas.width; i += 20) {
                ctx.beginPath();
                ctx.moveTo(i, canvas.height - groundHeight);
                ctx.lineTo(i + 10, canvas.height - groundHeight);
                ctx.lineTo(i + 5, canvas.height - groundHeight - 5);
                ctx.fill();
            }
        }
        
        // Update health display
        function updateHealthDisplay() {
            healthElements.forEach((el, index) => {
                if (index < health) {
                    el.style.opacity = '1';
                } else {
                    el.style.opacity = '0.3';
                }
            });
        }
        
        // Start game
        function startGame() {
            startScreen.style.display = 'none';
            gameScreen.style.display = 'block';
            endScreen.style.display = 'none';
            
            // Reset game state
            bird = new Bird();
            pipes = [];
            score = 0;
            health = 3;
            lastPipeTime = 0;
            
            // Update UI
            scoreElement.textContent = score;
            updateHealthDisplay();
            
            gameActive = true;
            animationFrameId = requestAnimationFrame(gameLoop);
        }
        
        // End game
        function endGame() {
            gameActive = false;
            cancelAnimationFrame(animationFrameId);
            
            finalScoreElement.textContent = score;
            gameScreen.style.display = 'none';
            endScreen.style.display = 'flex';
        }
        
        // Event listeners
        startButton.addEventListener('click', startGame);
        retryButton.addEventListener('click', startGame);
        
        // Space key controls
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && gameActive) {
                bird.flap();
                e.preventDefault(); // Prevent spacebar from scrolling the page
            }
        });
        
        // Touch controls for mobile
        canvas.addEventListener('touchstart', (e) => {
            if (gameActive) {
                bird.flap();
                e.preventDefault();
            }
        });
        
        // Initialize clouds
        initClouds();
        
        // Draw initial background on start screen
        drawBackground();
        clouds.forEach(cloud => cloud.draw());
    </script>
</body>
</html>

8f364440-f85d-11ef-b2aa-c5564cb717d8_output_engineeredPrompt_rawText

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Flappel Bird Clone</title>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            min-height: 100vh;
            background: linear-gradient(#70c1ff, #e0f2ff);
            font-family: 'Arial Rounded MT Bold', 'Arial', sans-serif;
        }
        .game-container {
            position: relative;
            width: 300px;
            height: 300px;
            overflow: hidden;
            border-radius: 10px;
            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
        }
        canvas {
            display: block;
        }
        .screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            background-color: rgba(0, 0, 0, 0.7);
            color: white;
            z-index: 10;
        }
        .screen h1 {
            font-size: 24px;
            margin-bottom: 20px;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
        }
        .screen p {
            margin-bottom: 20px;
            text-align: center;
            padding: 0 20px;
            font-size: 14px;
        }
        button {
            background-color: #f8c945;
            border: none;
            color: #5d3b00;
            padding: 10px 20px;
            font-size: 16px;
            border-radius: 50px;
            cursor: pointer;
            font-weight: bold;
            transition: transform 0.2s, background-color 0.2s;
            box-shadow: 0 4px 0 #d9a426;
        }
        button:hover {
            background-color: #ffd966;
            transform: translateY(-2px);
        }
        button:active {
            transform: translateY(2px);
            box-shadow: 0 2px 0 #d9a426;
        }
        .health-container {
            position: absolute;
            top: 10px;
            left: 10px;
            z-index: 5;
            display: flex;
        }
        .health {
            width: 20px;
            height: 20px;
            background-color: #ff5a5a;
            margin-right: 5px;
            border-radius: 50%;
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.3);
        }
        .score {
            position: absolute;
            top: 10px;
            right: 10px;
            z-index: 5;
            font-size: 20px;
            font-weight: bold;
            color: white;
            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
        }
        #game-screen {
            display: none;
        }
        #end-screen {
            display: none;
        }
    </style>
</head>
<body>
    <div class="game-container">
        <canvas id="game-canvas" width="300" height="300"></canvas>
        
        <div id="start-screen" class="screen">
            <h1>Flappel Bird</h1>
            <p>Press and hold SPACE to fly higher.<br>Avoid obstacles and collect points!</p>
            <button id="start-button">START</button>
        </div>
        
        <div id="game-screen">
            <div class="health-container">
                <div class="health"></div>
                <div class="health"></div>
                <div class="health"></div>
            </div>
            <div class="score">0</div>
        </div>
        
        <div id="end-screen" class="screen">
            <h1>Game Over!</h1>
            <p>Your score: <span id="final-score">0</span></p>
            <button id="retry-button">PLAY AGAIN</button>
        </div>
    </div>

    <script>
        // Game state variables
        const canvas = document.getElementById('game-canvas');
        const ctx = canvas.getContext('2d');
        const startScreen = document.getElementById('start-screen');
        const gameScreen = document.getElementById('game-screen');
        const endScreen = document.getElementById('end-screen');
        const startButton = document.getElementById('start-button');
        const retryButton = document.getElementById('retry-button');
        const finalScoreElement = document.getElementById('final-score');
        const scoreElement = document.querySelector('.score');
        const healthElements = document.querySelectorAll('.health');
        
        let gameActive = false;
        let bird;
        let pipes = [];
        let score = 0;
        let health = 3;
        let gravity = 0.25;
        let animationFrameId;
        let lastPipeTime = 0;
        let clouds = [];
        
        // Bird object
        class Bird {
            constructor() {
                this.x = 50;
                this.y = 150;
                this.vy = 0;
                this.width = 30;
                this.height = 24;
                this.lift = -5;
                this.invincible = false;
                this.invincibleTime = 0;
                this.wingPosition = 0;
                this.wingDirection = 1;
                this.wingSpeed = 0.15;
            }
            
            flap() {
                this.vy = this.lift;
            }
            
            update() {
                this.vy += gravity;
                this.y += this.vy;
                
                // Wing animation
                this.wingPosition += this.wingDirection * this.wingSpeed;
                if (this.wingPosition > 1 || this.wingPosition < -1) {
                    this.wingDirection *= -1;
                }
                
                // Keep bird inside the canvas
                if (this.y < 0) {
                    this.y = 0;
                    this.vy = 0;
                }
                if (this.y > canvas.height - this.height) {
                    this.y = canvas.height - this.height;
                    this.vy = 0;
                }
                
                // Update invincibility
                if (this.invincible) {
                    this.invincibleTime--;
                    if (this.invincibleTime <= 0) {
                        this.invincible = false;
                    }
                }
            }
            
            draw() {
                // Don't draw if flashing during invincibility
                if (this.invincible && Math.floor(this.invincibleTime / 5) % 2 === 0) {
                    return;
                }
                
                // Bird body
                ctx.fillStyle = '#f8c945';
                ctx.beginPath();
                ctx.ellipse(this.x, this.y + this.height/2, this.width/2, this.height/2, 0, 0, Math.PI * 2);
                ctx.fill();
                
                // Wing
                ctx.fillStyle = '#e5b72f';
                ctx.beginPath();
                ctx.ellipse(
                    this.x - 5, 
                    this.y + this.height/2 + this.wingPosition * 5, 
                    this.width/3, this.height/4, 
                    Math.PI/4, 0, Math.PI * 2
                );
                ctx.fill();
                
                // Eye
                ctx.fillStyle = 'white';
                ctx.beginPath();
                ctx.arc(this.x + 10, this.y + this.height/2 - 5, 5, 0, Math.PI * 2);
                ctx.fill();
                
                // Pupil
                ctx.fillStyle = 'black';
                ctx.beginPath();
                ctx.arc(this.x + 12, this.y + this.height/2 - 5, 2, 0, Math.PI * 2);
                ctx.fill();
                
                // Beak
                ctx.fillStyle = '#ff7b00';
                ctx.beginPath();
                ctx.moveTo(this.x + 15, this.y + this.height/2 - 2);
                ctx.lineTo(this.x + 25, this.y + this.height/2);
                ctx.lineTo(this.x + 15, this.y + this.height/2 + 2);
                ctx.fill();
            }
            
            hit() {
                if (!this.invincible) {
                    health--;
                    updateHealthDisplay();
                    
                    if (health > 0) {
                        this.invincible = true;
                        this.invincibleTime = 60; // Invincible for 60 frames (about 1 second)
                    } else {
                        endGame();
                    }
                }
            }
        }
        
        // Pipe object
        class Pipe {
            constructor() {
                this.spacing = 100;
                this.top = Math.random() * (canvas.height - this.spacing - 20) + 20;
                this.bottom = this.top + this.spacing;
                this.x = canvas.width;
                this.width = 40;
                this.speed = 2;
                this.passed = false;
                this.highlight = false;
            }
            
            update() {
                this.x -= this.speed;
                
                // Check if pipe has passed the bird
                if (!this.passed && this.x + this.width < bird.x) {
                    score++;
                    scoreElement.textContent = score;
                    this.passed = true;
                    this.highlight = true;
                    setTimeout(() => {
                        this.highlight = false;
                    }, 300);
                }
            }
            
            draw() {
                // Top pipe
                const gradient = ctx.createLinearGradient(this.x, 0, this.x + this.width, 0);
                gradient.addColorStop(0, this.highlight ? '#97ff9b' : '#64d166');
                gradient.addColorStop(1, this.highlight ? '#46ce4a' : '#4ab54d');
                
                ctx.fillStyle = gradient;
                ctx.fillRect(this.x, 0, this.width, this.top);
                
                // Top pipe border
                ctx.fillStyle = this.highlight ? '#38a03b' : '#2a802c';
                ctx.fillRect(this.x - 2, this.top - 15, this.width + 4, 15);
                
                // Bottom pipe
                ctx.fillStyle = gradient;
                ctx.fillRect(this.x, this.bottom, this.width, canvas.height - this.bottom);
                
                // Bottom pipe border
                ctx.fillStyle = this.highlight ? '#38a03b' : '#2a802c';
                ctx.fillRect(this.x - 2, this.bottom, this.width + 4, 15);
            }
            
            hits(bird) {
                if (
                    bird.x + bird.width/2 > this.x &&
                    bird.x - bird.width/2 < this.x + this.width &&
                    (bird.y < this.top || bird.y + bird.height > this.bottom)
                ) {
                    return true;
                }
                return false;
            }
        }
        
        // Cloud object for background
        class Cloud {
            constructor() {
                this.x = canvas.width + Math.random() * 50;
                this.y = Math.random() * 100 + 20;
                this.width = Math.random() * 50 + 30;
                this.height = this.width * 0.6;
                this.speed = 0.5 + Math.random() * 0.5;
                this.opacity = 0.7 + Math.random() * 0.3;
            }
            
            update() {
                this.x -= this.speed;
                if (this.x + this.width < 0) {
                    this.x = canvas.width + Math.random() * 50;
                    this.y = Math.random() * 100 + 20;
                }
            }
            
            draw() {
                ctx.fillStyle = `rgba(255, 255, 255, ${this.opacity})`;
                ctx.beginPath();
                ctx.arc(this.x, this.y, this.width * 0.3, 0, Math.PI * 2);
                ctx.arc(this.x + this.width * 0.3, this.y - this.height * 0.1, this.width * 0.35, 0, Math.PI * 2);
                ctx.arc(this.x + this.width * 0.6, this.y, this.width * 0.3, 0, Math.PI * 2);
                ctx.closePath();
                ctx.fill();
            }
        }
        
        // Initialize clouds
        function initClouds() {
            clouds = [];
            for (let i = 0; i < 4; i++) {
                const cloud = new Cloud();
                cloud.x = Math.random() * canvas.width;
                clouds.push(cloud);
            }
        }
        
        // Game loop
        function gameLoop(timestamp) {
            // Clear canvas
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // Draw background
            drawBackground();
            
            // Update and draw clouds
            clouds.forEach(cloud => {
                cloud.update();
                cloud.draw();
            });
            
            // Add new pipe
            if (!lastPipeTime || timestamp - lastPipeTime > 1500) {
                pipes.push(new Pipe());
                lastPipeTime = timestamp;
            }
            
            // Update and draw pipes
            for (let i = pipes.length - 1; i >= 0; i--) {
                pipes[i].update();
                pipes[i].draw();
                
                // Check for collision
                if (pipes[i].hits(bird)) {
                    bird.hit();
                }
                
                // Remove pipes that are off screen
                if (pipes[i].x + pipes[i].width < 0) {
                    pipes.splice(i, 1);
                }
            }
            
            // Update and draw bird
            bird.update();
            bird.draw();
            
            // Continue the game loop
            if (gameActive) {
                animationFrameId = requestAnimationFrame(gameLoop);
            }
        }
        
        // Draw background
        function drawBackground() {
            // Sky gradient
            const gradient = ctx.createLinearGradient(0, 0, 0, canvas.height);
            gradient.addColorStop(0, '#70c1ff');
            gradient.addColorStop(1, '#e0f2ff');
            ctx.fillStyle = gradient;
            ctx.fillRect(0, 0, canvas.width, canvas.height);
            
            // Ground
            const groundHeight = 30;
            ctx.fillStyle = '#8fd850';
            ctx.fillRect(0, canvas.height - groundHeight, canvas.width, groundHeight);
            
            // Ground pattern
            ctx.fillStyle = '#74c042';
            for (let i = 0; i < canvas.width; i += 20) {
                ctx.beginPath();
                ctx.moveTo(i, canvas.height - groundHeight);
                ctx.lineTo(i + 10, canvas.height - groundHeight);
                ctx.lineTo(i + 5, canvas.height - groundHeight - 5);
                ctx.fill();
            }
        }
        
        // Update health display
        function updateHealthDisplay() {
            healthElements.forEach((el, index) => {
                if (index < health) {
                    el.style.opacity = '1';
                } else {
                    el.style.opacity = '0.3';
                }
            });
        }
        
        // Start game
        function startGame() {
            startScreen.style.display = 'none';
            gameScreen.style.display = 'block';
            endScreen.style.display = 'none';
            
            // Reset game state
            bird = new Bird();
            pipes = [];
            score = 0;
            health = 3;
            lastPipeTime = 0;
            
            // Update UI
            scoreElement.textContent = score;
            updateHealthDisplay();
            
            gameActive = true;
            animationFrameId = requestAnimationFrame(gameLoop);
        }
        
        // End game
        function endGame() {
            gameActive = false;
            cancelAnimationFrame(animationFrameId);
            
            finalScoreElement.textContent = score;
            gameScreen.style.display = 'none';
            endScreen.style.display = 'flex';
        }
        
        // Event listeners
        startButton.addEventListener('click', startGame);
        retryButton.addEventListener('click', startGame);
        
        // Space key controls
        document.addEventListener('keydown', (e) => {
            if (e.code === 'Space' && gameActive) {
                bird.flap();
                e.preventDefault(); // Prevent spacebar from scrolling the page
            }
        });
        
        // Touch controls for mobile
        canvas.addEventListener('touchstart', (e) => {
            if (gameActive) {
                bird.flap();
                e.preventDefault();
            }
        });
        
        // Initialize clouds
        initClouds();
        
        // Draw initial background on start screen
        drawBackground();
        clouds.forEach(cloud => cloud.draw());
    </script>
</body>
</html>

Create_a_single_html_page_with_a_300px_by_300px_javascript_Flappy_Bird_game_clone__where_I_press_and_hold_the_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_game_very_aesthetic_and_and_use_the_best_open_source_packages.html