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 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. Increase the limit for better results.

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

Max completion tokens

Tip: Try Claude or smarter for best results

AI model

🤔: 48 💰:1

🤔: 49-57 💰:1.8

🤔: 68 ⭐️ 💰:10.0

🤔: 63-66 💰:1.8

🤔: 59-62 💰:4.1

🤔: 51 💰:10

🤔: 60 💰:1.8

🤔: 46 💰:1.1

🤔: 41 💰:6.9 🔍

🤔: 41 💰:1.5

🤔: 36 💰:1.2 🔍

🤔: 36 💰:1.1

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

Photo Analyzer

Fill in the Blanker

Image Trace

AI Docs

AI Boards

AI Tutor

Grammar Checker

AI Image Generator

Extract Text from Image

Inpaint

Chat PDF

Image to Prompt

Fix Hands

PDF to Text

Language Translator

Code Improver

Blog Post Writer

Magic Prompt

Email Writer

Remove Background

Image to Video

Upscale

Logo Art Generator

Change Photo Background

Cover Letter Writer

Photo Translator

Function Writer

Photo Object Remover

Website Wizard

Code Generator

Selfie Refiner

HTML to Image

Outcrop Image

Icon Maker

Code Translator

Prompt Interpolator

Video Ad Script Writer

Infinite Zoom

Social Media Post Writer

Speech to Text

AI Actors

Essay Grader

Remove Video Background

Display Ad Maker

Video to MP3

Plant Doctor

Video to Video

Portrait Maker

URL to Screenshots

Video Ad Maker

Design to Code

CSV Analyzer

LinkedIn Headshot Maker

AI Meeting Note Taker

Website Improvement Suggester

Differentiated Offer Generator

Ad Headline Writer

Google Ad Creator

Google Ad Improver

AI Video 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

Flappel Bird Clone

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Word Scramble Puzzle</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        #game-container {
            width: 300px;
            height: 300px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        .screen {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .hidden {
            opacity: 0;
            pointer-events: none;
        }

        h1 {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
        }

        p {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            background-color: #6C63FF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s, transform 0.2s;
        }

        button:hover {
            background-color: #5A52D5;
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        #score, #timer {
            position: absolute;
            top: 10px;
            font-size: 14px;
            color: #666;
        }

        #score {
            left: 10px;
        }

        #timer {
            right: 10px;
        }

        #scrambled-word {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 2px;
            color: #6C63FF;
            min-height: 40px;
            display: flex;
            align-items: center;
        }

        .letter {
            display: inline-block;
            margin: 0 2px;
        }

        #word-input {
            width: 80%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
            font-size: 16px;
        }

        #hint {
            font-size: 12px;
            color: #888;
            margin-top: 15px;
            max-width: 100%;
        }

        #result-message {
            color: #4CAF50;
            font-weight: 600;
            height: 20px;
            margin-top: 5px;
        }

        #logo {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
            font-weight: bold;
            color: #6C63FF;
        }

        .highlight {
            color: #FF6B6B;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: #6C63FF;
            width: 100%;
            transform-origin: left;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="welcome-screen" class="screen">
            <div id="logo">Word<span class="highlight">Mix</span></div>
            <h1>Vocabulary Challenge</h1>
            <p>Unscramble the letters to find the correct word!</p>
            <button id="start-btn">Start Game</button>
        </div>
        
        <div id="game-screen" class="screen hidden">
            <div id="score">Score: <span id="score-value">0</span></div>
            <div id="timer">Time: <span id="timer-value">60</span>s</div>
            <div id="scrambled-word"></div>
            <input type="text" id="word-input" placeholder="Type your answer here" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <button id="submit-btn">Submit</button>
            <div id="result-message"></div>
            <div id="hint">Hint: <span id="hint-text"></span></div>
            <div class="progress-bar" id="time-bar"></div>
        </div>
        
        <div id="end-screen" class="screen hidden">
            <h1>Game Over!</h1>
            <p>You unscrambled <span id="words-solved">0</span> words</p>
            <p>Your final score: <span id="final-score">0</span></p>
            <button id="restart-btn">Play Again</button>
        </div>
    </div>

    <script>
        // Word list with hints
        const words = [
            { word: "APPLE", hint: "A common red or green fruit" },
            { word: "BANANA", hint: "A yellow curved fruit" },
            { word: "COMPUTER", hint: "An electronic device for processing data" },
            { word: "ELEPHANT", hint: "The largest land animal" },
            { word: "GUITAR", hint: "A stringed musical instrument" },
            { word: "HORIZON", hint: "The line where the earth meets the sky" },
            { word: "ISLAND", hint: "A piece of land surrounded by water" },
            { word: "JOURNEY", hint: "A long trip or voyage" },
            { word: "KNOWLEDGE", hint: "Information gained through experience" },
            { word: "MOUNTAIN", hint: "A large natural elevation of earth's surface" },
            { word: "NAVIGATE", hint: "To plan and direct a route" },
            { word: "ORCHESTRA", hint: "A large group of musicians" },
            { word: "PNEUMONIA", hint: "An infection that inflames air sacs in the lungs" },
            { word: "QUANTUM", hint: "The minimum amount of any physical entity" },
            { word: "RESTAURANT", hint: "A place where people pay to eat meals" },
            { word: "SYMPHONY", hint: "An elaborate musical composition" },
            { word: "TELESCOPE", hint: "An optical instrument for viewing distant objects" },
            { word: "UMBRELLA", hint: "A device that protects against rain" },
            { word: "VELOCITY", hint: "The speed of something in a given direction" },
            { word: "WHISPER", hint: "To speak very softly" }
        ];

        // Game variables
        let currentWord = "";
        let scrambledWord = "";
        let score = 0;
        let timeLeft = 60;
        let timer;
        let wordsSolved = 0;
        let usedWords = [];

        // DOM elements
        const welcomeScreen = document.getElementById('welcome-screen');
        const gameScreen = document.getElementById('game-screen');
        const endScreen = document.getElementById('end-screen');
        const startBtn = document.getElementById('start-btn');
        const submitBtn = document.getElementById('submit-btn');
        const restartBtn = document.getElementById('restart-btn');
        const scrambledWordElement = document.getElementById('scrambled-word');
        const wordInput = document.getElementById('word-input');
        const scoreValue = document.getElementById('score-value');
        const finalScore = document.getElementById('final-score');
        const wordsSolvedElement = document.getElementById('words-solved');
        const timerValue = document.getElementById('timer-value');
        const hintText = document.getElementById('hint-text');
        const resultMessage = document.getElementById('result-message');
        const timeBar = document.getElementById('time-bar');

        // Function to scramble a word
        function scrambleWord(word) {
            let letters = word.split('');
            for (let i = letters.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [letters[i], letters[j]] = [letters[j], letters[i]];
            }
            let result = letters.join('');
            
            // Make sure the scrambled word is different from the original
            if (result === word && word.length > 1) {
                return scrambleWord(word);
            }
            
            return result;
        }

        // Function to get a random word
        function getRandomWord() {
            if (usedWords.length === words.length) {
                usedWords = []; // Reset if all words have been used
            }
            
            let availableWords = words.filter(word => !usedWords.includes(word.word));
            if (availableWords.length === 0) {
                usedWords = [];
                availableWords = words;
            }
            
            const randomIndex = Math.floor(Math.random() * availableWords.length);
            const selectedWord = availableWords[randomIndex];
            usedWords.push(selectedWord.word);
            
            return selectedWord;
        }

        // Function to start the game
        function startGame() {
            welcomeScreen.classList.add('hidden');
            gameScreen.classList.remove('hidden');
            
            score = 0;
            wordsSolved = 0;
            timeLeft = 60;
            usedWords = [];
            
            scoreValue.textContent = score;
            timerValue.textContent = timeLeft;
            
            // Initialize the first word
            nextWord();
            
            // Start the timer
            timer = setInterval(() => {
                timeLeft--;
                timerValue.textContent = timeLeft;
                timeBar.style.transform = `scaleX(${timeLeft/60})`;
                
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        // Function to load the next word
        function nextWord() {
            const wordObj = getRandomWord();
            currentWord = wordObj.word;
            hintText.textContent = wordObj.hint;
            
            scrambledWord = scrambleWord(currentWord);
            
            // Clear previous content
            scrambledWordElement.innerHTML = '';
            
            // Add each letter with animation
            scrambledWord.split('').forEach((letter, index) => {
                const letterElement = document.createElement('span');
                letterElement.classList.add('letter');
                letterElement.textContent = letter;
                letterElement.style.opacity = 0;
                scrambledWordElement.appendChild(letterElement);
                
                // Animate each letter
                anime({
                    targets: letterElement,
                    opacity: 1,
                    translateY: [20, 0],
                    delay: index * 60,
                    easing: 'easeOutQuad'
                });
            });
            
            wordInput.value = "";
            wordInput.focus();
            resultMessage.textContent = "";
        }

        // Function to check the player's answer
        function checkAnswer() {
            if (!wordInput.value) return; // Don't process empty submissions
            
            const userAnswer = wordInput.value.toUpperCase();
            
            if (userAnswer === currentWord) {
                wordsSolved++;
                let points = 10 + Math.floor(currentWord.length/2);
                score += points;
                scoreValue.textContent = score;
                
                resultMessage.textContent = `+${points} points!`;
                resultMessage.style.color = '#4CAF50';
                
                // Animation for correct answer
                anime({
                    targets: scrambledWordElement,
                    scale: [1, 1.1, 1],
                    duration: 500,
                    easing: 'easeInOutQuad'
                });
                
                setTimeout(() => {
                    nextWord();
                }, 1000);
            } else {
                resultMessage.textContent = 'Try again!';
                resultMessage.style.color = '#FF6B6B';
                
                // Animation for wrong answer
                anime({
                    targets: wordInput,
                    translateX: [0, -10, 10, -10, 10, 0],
                    duration: 500,
                    easing: 'easeInOutQuad'
                });
            }
        }

        // Function to end the game
        function endGame() {
            clearInterval(timer);
            gameScreen.classList.add('hidden');
            endScreen.classList.remove('hidden');
            finalScore.textContent = score;
            wordsSolvedElement.textContent = wordsSolved;
        }

        // Function to restart the game
        function restartGame() {
            endScreen.classList.add('hidden');
            startGame();
        }

        // Event listeners
        startBtn.addEventListener('click', startGame);
        submitBtn.addEventListener('click', checkAnswer);
        restartBtn.addEventListener('click', restartGame);

        // Allow pressing Enter to submit
        wordInput.addEventListener('keydown', function(event) {
            if (event.key === "Enter") {
                checkAnswer();
            }
        });

        // Initialize the time bar
        timeBar.style.transform = 'scaleX(1)';
    </script>
</body>
</html>

af013bc0-0d4a-11f0-bccc-b331f0040be2_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>Word Scramble Puzzle</title>
    <link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
    <script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/3.2.1/anime.min.js"></script>
    <style>
        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
            font-family: 'Poppins', sans-serif;
        }

        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
        }

        #game-container {
            width: 300px;
            height: 300px;
            background-color: white;
            border-radius: 15px;
            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
            overflow: hidden;
            position: relative;
        }

        .screen {
            width: 100%;
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 20px;
            text-align: center;
            position: absolute;
            top: 0;
            left: 0;
            transition: opacity 0.5s ease-in-out;
        }

        .hidden {
            opacity: 0;
            pointer-events: none;
        }

        h1 {
            font-size: 24px;
            color: #333;
            margin-bottom: 15px;
        }

        p {
            font-size: 14px;
            color: #666;
            margin-bottom: 20px;
        }

        button {
            padding: 10px 20px;
            background-color: #6C63FF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-weight: 600;
            transition: background-color 0.3s, transform 0.2s;
        }

        button:hover {
            background-color: #5A52D5;
            transform: translateY(-2px);
        }

        button:active {
            transform: translateY(0);
        }

        #score, #timer {
            position: absolute;
            top: 10px;
            font-size: 14px;
            color: #666;
        }

        #score {
            left: 10px;
        }

        #timer {
            right: 10px;
        }

        #scrambled-word {
            font-size: 24px;
            font-weight: 600;
            margin-bottom: 20px;
            letter-spacing: 2px;
            color: #6C63FF;
            min-height: 40px;
            display: flex;
            align-items: center;
        }

        .letter {
            display: inline-block;
            margin: 0 2px;
        }

        #word-input {
            width: 80%;
            padding: 10px;
            margin-bottom: 15px;
            border: 1px solid #ddd;
            border-radius: 5px;
            text-align: center;
            font-size: 16px;
        }

        #hint {
            font-size: 12px;
            color: #888;
            margin-top: 15px;
            max-width: 100%;
        }

        #result-message {
            color: #4CAF50;
            font-weight: 600;
            height: 20px;
            margin-top: 5px;
        }

        #logo {
            position: absolute;
            top: 15px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 20px;
            font-weight: bold;
            color: #6C63FF;
        }

        .highlight {
            color: #FF6B6B;
        }

        .progress-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            height: 4px;
            background-color: #6C63FF;
            width: 100%;
            transform-origin: left;
        }
    </style>
</head>
<body>
    <div id="game-container">
        <div id="welcome-screen" class="screen">
            <div id="logo">Word<span class="highlight">Mix</span></div>
            <h1>Vocabulary Challenge</h1>
            <p>Unscramble the letters to find the correct word! Use every letter.</p>
            <button id="start-btn">Start Game</button>
        </div>
        
        <div id="game-screen" class="screen hidden">
            <div id="score">Score: <span id="score-value">0</span></div>
            <div id="timer">Time: <span id="timer-value">60</span>s</div>
            <div id="scrambled-word"></div>
            <input type="text" id="word-input" placeholder="Type your answer here" autocomplete="off" autocorrect="off" autocapitalize="off" spellcheck="false">
            <button id="submit-btn">Submit</button>
            <div id="result-message"></div>
            <div id="hint">Hint: <span id="hint-text"></span></div>
            <div class="progress-bar" id="time-bar"></div>
        </div>
        
        <div id="end-screen" class="screen hidden">
            <h1>Game Over!</h1>
            <p>You unscrambled <span id="words-solved">0</span> words</p>
            <p>Your final score: <span id="final-score">0</span></p>
            <button id="restart-btn">Play Again</button>
        </div>
    </div>

    <script>
        // Word list with hints
        const words = [
            { word: "APPLE", hint: "A common red or green fruit" },
            { word: "BANANA", hint: "A yellow curved fruit" },
            { word: "COMPUTER", hint: "An electronic device for processing data" },
            { word: "ELEPHANT", hint: "The largest land animal" },
            { word: "GUITAR", hint: "A stringed musical instrument" },
            { word: "HORIZON", hint: "The line where the earth meets the sky" },
            { word: "ISLAND", hint: "A piece of land surrounded by water" },
            { word: "JOURNEY", hint: "A long trip or voyage" },
            { word: "KNOWLEDGE", hint: "Information gained through experience" },
            { word: "MOUNTAIN", hint: "A large natural elevation of earth's surface" },
            { word: "NAVIGATE", hint: "To plan and direct a route" },
            { word: "ORCHESTRA", hint: "A large group of musicians" },
            { word: "PNEUMONIA", hint: "An infection that inflames air sacs in the lungs" },
            { word: "QUANTUM", hint: "The minimum amount of any physical entity" },
            { word: "RESTAURANT", hint: "A place where people pay to eat meals" },
            { word: "SYMPHONY", hint: "An elaborate musical composition" },
            { word: "TELESCOPE", hint: "An optical instrument for viewing distant objects" },
            { word: "UMBRELLA", hint: "A device that protects against rain" },
            { word: "VELOCITY", hint: "The speed of something in a given direction" },
            { word: "WHISPER", hint: "To speak very softly" }
        ];

        // Game variables
        let currentWord = "";
        let scrambledWord = "";
        let score = 0;
        let timeLeft = 60;
        let timer;
        let wordsSolved = 0;
        let usedWords = [];

        // DOM elements
        const welcomeScreen = document.getElementById('welcome-screen');
        const gameScreen = document.getElementById('game-screen');
        const endScreen = document.getElementById('end-screen');
        const startBtn = document.getElementById('start-btn');
        const submitBtn = document.getElementById('submit-btn');
        const restartBtn = document.getElementById('restart-btn');
        const scrambledWordElement = document.getElementById('scrambled-word');
        const wordInput = document.getElementById('word-input');
        const scoreValue = document.getElementById('score-value');
        const finalScore = document.getElementById('final-score');
        const wordsSolvedElement = document.getElementById('words-solved');
        const timerValue = document.getElementById('timer-value');
        const hintText = document.getElementById('hint-text');
        const resultMessage = document.getElementById('result-message');
        const timeBar = document.getElementById('time-bar');

        // Function to scramble a word
        function scrambleWord(word) {
            let letters = word.split('');
            for (let i = letters.length - 1; i > 0; i--) {
                const j = Math.floor(Math.random() * (i + 1));
                [letters[i], letters[j]] = [letters[j], letters[i]];
            }
            let result = letters.join('');
            
            // Make sure the scrambled word is different from the original
            if (result === word && word.length > 1) {
                return scrambleWord(word);
            }
            
            return result;
        }

        // Function to get a random word
        function getRandomWord() {
            if (usedWords.length === words.length) {
                usedWords = []; // Reset if all words have been used
            }
            
            let availableWords = words.filter(word => !usedWords.includes(word.word));
            if (availableWords.length === 0) {
                usedWords = [];
                availableWords = words;
            }
            
            const randomIndex = Math.floor(Math.random() * availableWords.length);
            const selectedWord = availableWords[randomIndex];
            usedWords.push(selectedWord.word);
            
            return selectedWord;
        }

        // Function to start the game
        function startGame() {
            welcomeScreen.classList.add('hidden');
            gameScreen.classList.remove('hidden');
            
            score = 0;
            wordsSolved = 0;
            timeLeft = 60;
            usedWords = [];
            
            scoreValue.textContent = score;
            timerValue.textContent = timeLeft;
            
            // Initialize the first word
            nextWord();
            
            // Start the timer
            timer = setInterval(() => {
                timeLeft--;
                timerValue.textContent = timeLeft;
                timeBar.style.transform = `scaleX(${timeLeft/60})`;
                
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);
        }

        // Function to load the next word
        function nextWord() {
            const wordObj = getRandomWord();
            currentWord = wordObj.word;
            hintText.textContent = wordObj.hint;
            
            scrambledWord = scrambleWord(currentWord);
            
            // Clear previous content
            scrambledWordElement.innerHTML = '';
            
            // Add each letter with animation
            scrambledWord.split('').forEach((letter, index) => {
                const letterElement = document.createElement('span');
                letterElement.classList.add('letter');
                letterElement.textContent = letter;
                letterElement.style.opacity = 0;
                scrambledWordElement.appendChild(letterElement);
                
                // Animate each letter
                anime({
                    targets: letterElement,
                    opacity: 1,
                    translateY: [20, 0],
                    delay: index * 60,
                    easing: 'easeOutQuad'
                });
            });
            
            wordInput.value = "";
            wordInput.focus();
            resultMessage.textContent = "";
        }

        // Function to check the player's answer
        function checkAnswer() {
            if (!wordInput.value) return; // Don't process empty submissions
            
            const userAnswer = wordInput.value.toUpperCase();
            
            if (userAnswer === currentWord) {
                wordsSolved++;
                let points = 10 + Math.floor(currentWord.length/2);
                score += points;
                scoreValue.textContent = score;
                
                resultMessage.textContent = `+${points} points!`;
                resultMessage.style.color = '#4CAF50';
                
                // Animation for correct answer
                anime({
                    targets: scrambledWordElement,
                    scale: [1, 1.1, 1],
                    duration: 500,
                    easing: 'easeInOutQuad'
                });
                
                setTimeout(() => {
                    nextWord();
                }, 1000);
            } else {
                resultMessage.textContent = 'Try again!';
                resultMessage.style.color = '#FF6B6B';
                
                // Animation for wrong answer
                anime({
                    targets: wordInput,
                    translateX: [0, -10, 10, -10, 10, 0],
                    duration: 500,
                    easing: 'easeInOutQuad'
                });
            }
        }

        // Function to end the game
        function endGame() {
            clearInterval(timer);
            gameScreen.classList.add('hidden');
            endScreen.classList.remove('hidden');
            finalScore.textContent = score;
            wordsSolvedElement.textContent = wordsSolved;
        }

        // Function to restart the game
        function restartGame() {
            endScreen.classList.add('hidden');
            startGame();
        }

        // Event listeners
        startBtn.addEventListener('click', startGame);
        submitBtn.addEventListener('click', checkAnswer);
        restartBtn.addEventListener('click', restartGame);

        // Allow pressing Enter to submit
        wordInput.addEventListener('keydown', function(event) {
            if (event.key === "Enter") {
                checkAnswer();
            }
        });

        // Initialize the time bar
        timeBar.style.transform = 'scaleX(1)';
    </script>
</body>
</html>

Create_a_single_html_page_with_a_300px_by_300px_javascript_word_puzzle_game_that_helps_people_practice_and_improve_their_vocabularies_in_a_fun_way_The_game_should_have_a_welcome_screen_with_a_start_button_After_the_game_ends__there_should_be_a_restart_button_You_should_make_the_game_very_aesthetic_and_and_use_the_best_open_source_packages_.html

AI Game Generator | AI Tools by Spyce

Your game request

AI model

Max completion tokens

Recently Created Games