Have a fun game idea? Ask AI to build it for you. This tool will generate Javascript-based games that you can play in the browser.

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

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. We recommend 25,000 or more for best results.

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

Max completion tokens

Tip: Try Claude or smarter for best results. Cheaper models often won't make playable games.

AI model

i30 💰:1.0

i57 💰:36.0

🏆 i65 💰:100.0

i47 💰:2.0

i63 💰:50.0

i61 💰:75.0

i52 💰:7.5

i58 💰:50.0

i54 💰:50.0

i56 💰:48.0

i51 💰:30.0

i48 💰:11.25

i55 💰:37.5

i52 💰:35.0

i40 💰:5.0

i49 💰:50.0

i43 💰:37.5

i34 💰:10.0

i44 💰:25.0

i18 💰:1.0

i29 💰:1.5

i38 💰:37.5

i33 💰:37.5

i42 💰:187.5

i36 💰:187.5

i37 💰:11.0

i39 💰:100.0

i31 💰:11.0

i28 💰:150.0

i25 💰:31.3

i20 💰:4.0

i23 💰:20.0

🔍 i16 💰:25.0

i18 💰:1.0 + $0.05/image

i16 💰:25.0

🔍 i13 💰:1.5

i13 💰:1.5

Generate privately

Your game request

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

Reasoning effort

Fastest. i+0

Search the web

System Message

Controls output token length. Lower values are faster and more concise; higher values yield longer, more detailed outputs.

Verbosity

Concise answers

Balanced

Most thorough

Generated Games

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content...

Answers to: 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 le...

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

```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</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #ADD8E6; /* Light blue background */
            font-family: sans-serif;
        }

        #game-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid black;
            background-color: #70C5CE;
            overflow: hidden;
        }

        #start-screen, #end-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            text-align: center;
            z-index: 2;
        }

        #start-screen button, #end-screen button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            margin-top: 20px;
        }

        #bird {
            position: absolute;
            width: 34px;
            height: 24px;
            top: 140px;
            left: 50px;
            background: url('https://opengameart.org/sites/default/files/styles/medium/public/animations/bird_frame1.png') no-repeat;
            background-size: contain;
        }

        .pipe {
            position: absolute;
            width: 30px;
            background-color: green;
        }

        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 16px;
            color: white;
            z-index: 1;
        }

        #hits {
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 16px;
          color: white;
          z-index: 1;
        }
    </style>
</head>
<body>

    <div id="game-container">
        <div id="start-screen">
            <h1>Flappy Bird</h1>
            <p>Press Space to Fly</p>
            <button onclick="startGame()">Start Game</button>
        </div>

        <div id="end-screen" style="display: none;">
            <h1>Game Over</h1>
            <p id="final-score">Score: 0</p>
            <button onclick="restartGame()">Retry</button>
        </div>

        <div id="score">Score: <span id="score-value">0</span></div>
        <div id="hits">Hits: <span id="hits-value">0</span></div>
        <div id="bird"></div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const bird = document.getElementById('bird');
        const scoreDisplay = document.getElementById('score-value');
        const startScreen = document.getElementById('start-screen');
        const endScreen = document.getElementById('end-screen');
        const finalScoreDisplay = document.getElementById('final-score');
        const hitsDisplay = document.getElementById('hits-value');

        let birdY = 140;
        let velocity = 0;
        const gravity = 0.5;
        const jumpStrength = -10;
        let score = 0;
        let gameInterval;
        let pipeInterval;
        let hits = 0;
        let isGameOver = false;


        function startGame() {
            startScreen.style.display = 'none';
            score = 0;
            hits = 0;
            hitsDisplay.textContent = hits;
            scoreDisplay.textContent = score;
            birdY = 140;
            bird.style.top = birdY + 'px';
            velocity = 0;
            isGameOver = false;


            gameInterval = setInterval(updateGame, 20);
            pipeInterval = setInterval(createPipes, 1500);
        }


        function updateGame() {
            velocity += gravity;
            birdY += velocity;
            bird.style.top = birdY + 'px';


            if (birdY < 0 || birdY > 300) {
                endGame();
            }
            checkCollisions();
        }


        function createPipes() {
            if(isGameOver) return;
            const pipeHeight = Math.floor(Math.random() * 150) + 50;
            const gapHeight = 50;
            const topPipeHeight = pipeHeight - gapHeight/2;
            const bottomPipeHeight = 300 - pipeHeight - gapHeight/2;


            const topPipe = document.createElement('div');
            topPipe.classList.add('pipe');
            topPipe.style.height = topPipeHeight + 'px';
            topPipe.style.top = '0';
            topPipe.style.left = '300px';
            gameContainer.appendChild(topPipe);

            const bottomPipe = document.createElement('div');
            bottomPipe.classList.add('pipe');
            bottomPipe.style.height = bottomPipeHeight + 'px';
            bottomPipe.style.bottom = '0';
            bottomPipe.style.left = '300px';
            gameContainer.appendChild(bottomPipe);


            let pipeX = 300;
            const pipeSpeed = 2;
            const pipeInterval = setInterval(() => {
                if(isGameOver) {
                  clearInterval(pipeInterval);
                  return;
                }
                pipeX -= pipeSpeed;
                topPipe.style.left = pipeX + 'px';
                bottomPipe.style.left = pipeX + 'px';


                if (pipeX < -30) {
                    gameContainer.removeChild(topPipe);
                    gameContainer.removeChild(bottomPipe);
                    clearInterval(pipeInterval);
                    if(!isGameOver) {
                      score++;
                      scoreDisplay.textContent = score;
                    }
                }
            }, 20);
        }

        function checkCollisions() {
            const birdRect = bird.getBoundingClientRect();
            const pipes = document.querySelectorAll('.pipe');

            pipes.forEach(pipe => {
                const pipeRect = pipe.getBoundingClientRect();

                if (birdRect.left < pipeRect.right &&
                    birdRect.right > pipeRect.left &&
                    birdRect.top < pipeRect.bottom &&
                    birdRect.bottom > pipeRect.top) {
                    hits++;
                    hitsDisplay.textContent = hits;
                    if(hits >= 3) {
                      endGame();
                    }
                }
            });
        }

        function endGame() {
            clearInterval(gameInterval);
            clearInterval(pipeInterval);
            endScreen.style.display = 'flex';
            finalScoreDisplay.textContent = 'Score: ' + score;
            isGameOver = true;
            //Clear existing pipes
            const pipes = document.querySelectorAll('.pipe');
            pipes.forEach(pipe => {
                gameContainer.removeChild(pipe);
            });
        }

        function restartGame() {
            endScreen.style.display = 'none';
            startGame();
        }

        document.addEventListener('keydown', (event) => {
            if (event.code === 'Space') {
                velocity = jumpStrength;
            }
        });
    </script>

</body>
</html>
```

ai-game-generator_61051ba0-3e17-11f0-abd9-d957fb561068_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>Flappy Bird</title>
    <style>
        body {
            margin: 0;
            overflow: hidden;
            background-color: #ADD8E6; /* Light blue background */
            font-family: sans-serif;
        }

        #game-container {
            position: relative;
            width: 300px;
            height: 300px;
            margin: 50px auto;
            border: 1px solid black;
            background-color: #70C5CE;
            overflow: hidden;
        }

        #start-screen, #end-screen {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: rgba(0, 0, 0, 0.5);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            color: white;
            font-size: 20px;
            text-align: center;
            z-index: 2;
        }

        #start-screen button, #end-screen button {
            padding: 10px 20px;
            font-size: 16px;
            cursor: pointer;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 5px;
            margin-top: 20px;
        }

        #bird {
            position: absolute;
            width: 34px;
            height: 24px;
            top: 140px;
            left: 50px;
            background: url('https://opengameart.org/sites/default/files/styles/medium/public/animations/bird_frame1.png') no-repeat;
            background-size: contain;
        }

        .pipe {
            position: absolute;
            width: 30px;
            background-color: green;
        }

        #score {
            position: absolute;
            top: 10px;
            right: 10px;
            font-size: 16px;
            color: white;
            z-index: 1;
        }

        #hits {
          position: absolute;
          top: 10px;
          left: 10px;
          font-size: 16px;
          color: white;
          z-index: 1;
        }
    </style>
</head>
<body>

    <div id="game-container">
        <div id="start-screen">
            <h1>Flappy Bird</h1>
            <p>Press Space to Fly</p>
            <button onclick="startGame()">Start Game</button>
        </div>

        <div id="end-screen" style="display: none;">
            <h1>Game Over</h1>
            <p id="final-score">Score: 0</p>
            <button onclick="restartGame()">Retry</button>
        </div>

        <div id="score">Score: <span id="score-value">0</span></div>
        <div id="hits">Hits: <span id="hits-value">0</span></div>
        <div id="bird"></div>
    </div>

    <script>
        const gameContainer = document.getElementById('game-container');
        const bird = document.getElementById('bird');
        const scoreDisplay = document.getElementById('score-value');
        const startScreen = document.getElementById('start-screen');
        const endScreen = document.getElementById('end-screen');
        const finalScoreDisplay = document.getElementById('final-score');
        const hitsDisplay = document.getElementById('hits-value');

        let birdY = 140;
        let velocity = 0;
        const gravity = 0.5;
        const jumpStrength = -10;
        let score = 0;
        let gameInterval;
        let pipeInterval;
        let hits = 0;
        let isGameOver = false;


        function startGame() {
            startScreen.style.display = 'none';
            score = 0;
            hits = 0;
            hitsDisplay.textContent = hits;
            scoreDisplay.textContent = score;
            birdY = 140;
            bird.style.top = birdY + 'px';
            velocity = 0;
            isGameOver = false;


            gameInterval = setInterval(updateGame, 20);
            pipeInterval = setInterval(createPipes, 1500);
        }


        function updateGame() {
            velocity += gravity;
            birdY += velocity;
            bird.style.top = birdY + 'px';


            if (birdY < 0 || birdY > 300) {
                endGame();
            }
            checkCollisions();
        }


        function createPipes() {
            if(isGameOver) return;
            const pipeHeight = Math.floor(Math.random() * 150) + 50;
            const gapHeight = 50;
            const topPipeHeight = pipeHeight - gapHeight/2;
            const bottomPipeHeight = 300 - pipeHeight - gapHeight/2;


            const topPipe = document.createElement('div');
            topPipe.classList.add('pipe');
            topPipe.style.height = topPipeHeight + 'px';
            topPipe.style.top = '0';
            topPipe.style.left = '300px';
            gameContainer.appendChild(topPipe);

            const bottomPipe = document.createElement('div');
            bottomPipe.classList.add('pipe');
            bottomPipe.style.height = bottomPipeHeight + 'px';
            bottomPipe.style.bottom = '0';
            bottomPipe.style.left = '300px';
            gameContainer.appendChild(bottomPipe);


            let pipeX = 300;
            const pipeSpeed = 2;
            const pipeInterval = setInterval(() => {
                if(isGameOver) {
                  clearInterval(pipeInterval);
                  return;
                }
                pipeX -= pipeSpeed;
                topPipe.style.left = pipeX + 'px';
                bottomPipe.style.left = pipeX + 'px';


                if (pipeX < -30) {
                    gameContainer.removeChild(topPipe);
                    gameContainer.removeChild(bottomPipe);
                    clearInterval(pipeInterval);
                    if(!isGameOver) {
                      score++;
                      scoreDisplay.textContent = score;
                    }
                }
            }, 20);
        }

        function checkCollisions() {
            const birdRect = bird.getBoundingClientRect();
            const pipes = document.querySelectorAll('.pipe');

            pipes.forEach(pipe => {
                const pipeRect = pipe.getBoundingClientRect();

                if (birdRect.left < pipeRect.right &&
                    birdRect.right > pipeRect.left &&
                    birdRect.top < pipeRect.bottom &&
                    birdRect.bottom > pipeRect.top) {
                    hits++;
                    hitsDisplay.textContent = hits;
                    if(hits >= 3) {
                      endGame();
                    }
                }
            });
        }

        function endGame() {
            clearInterval(gameInterval);
            clearInterval(pipeInterval);
            endScreen.style.display = 'flex';
            finalScoreDisplay.textContent = 'Score: ' + score;
            isGameOver = true;
            //Clear existing pipes
            const pipes = document.querySelectorAll('.pipe');
            pipes.forEach(pipe => {
                gameContainer.removeChild(pipe);
            });
        }

        function restartGame() {
            endScreen.style.display = 'none';
            startGame();
        }

        document.addEventListener('keydown', (event) => {
            if (event.code === 'Space') {
                velocity = jumpStrength;
            }
        });
    </script>

</body>
</html>

2 Generated Games

Second Generated Game

Request another