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

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

Generated Games

Request another