Train snakeOne-line

Gemini 3.1 Flash Lite

by GoogleReasoningClean

Open in new window

Running live in a sandboxed frame. Click inside it before using the keyboard.

How it went

Total time: 5.8 s
Cost: $0.0034
Output tokens: 2,193
Spent thinking: 125 tokens
Speed: 473.7 tok/s
Console errors: 0

First token after: 1.1 s
First visible text after: 1.1 s
Prompt tokens: 367
Code size: 6.2 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"low"}
Max output: 65,536 tokens
Generated: Nov 12, 2026

What it was asked

The prompt

“make me a snake game where the snake is a little train with a locomotive and colorful wagons, picking up passengers waiting on the platform”

System prompt, sent with every prompt

You are generating a self-contained web demo. It will be rendered automatically in a sandboxed iframe and compared side by side with the output of other AI models given the exact same task.

Output rules:
- Reply with exactly ONE fenced code block containing the complete file: ```html (or ```svg when the task asks for an SVG). No text before or after the code block.
- Everything must be inline: CSS in <style>, JavaScript in <script>. No external files, images, fonts or network requests, except the CDN URLs explicitly allowed by the task.
- Do not use localStorage, sessionStorage, cookies, IndexedDB, alert(), confirm(), prompt() or window.open(): they are blocked in the sandbox and will throw.
- The page must look right in a 1280×800 viewport and adapt gracefully down to 375px wide. No horizontal scrollbar.
- Something meaningful must be visible on first paint: a screenshot is taken automatically about 3 seconds after load, without any interaction.
- Everything that makes the demo interesting must be visible within the first seconds: nothing hidden behind a high score, a later level or a long play session.
- Games must start in a self-playing demo mode (a simple AI plays) behind a "Click or press a key to start" message, so the game can be judged in action without playing.
- The iframe only receives keyboard events after the user clicks it: if the demo uses the keyboard, display a clear "Click or press a key to start" message.
- The code must run with zero errors in the console of the latest Chrome.

Code run-1.html · 208 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Train Snake</title>
    <style>
        body {
            margin: 0;
            padding: 0;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            height: 100vh;
            background-color: #2c3e50;
            color: white;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            overflow: hidden;
            user-select: none;
        }

        #game-container {
            position: relative;
            box-shadow: 0 0 20px rgba(0,0,0,0.5);
            border: 4px solid #34495e;
            background-color: #ecf0f1;
        }

        canvas {
            display: block;
        }

        #ui {
            margin-top: 10px;
            text-align: center;
        }

        #overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,0.6);
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            cursor: pointer;
        }

        h1 { margin: 0 0 10px 0; }
        .score { font-size: 24px; margin-bottom: 5px; }
        .instructions { font-size: 16px; opacity: 0.8; }
    </style>
</head>
<body>

<div id="game-container">
    <canvas id="gameCanvas" width="600" height="400"></canvas>
    <div id="overlay">
        <h1>TRAIN SNAKE</h1>
        <p class="instructions">Click or press any key to start</p>
    </div>
</div>

<div id="ui">
    <div class="score">Passengers: <span id="scoreVal">0</span></div>
</div>

<script>
    const canvas = document.getElementById('gameCanvas');
    const ctx = canvas.getContext('2d');
    const scoreEl = document.getElementById('scoreVal');
    const overlay = document.getElementById('overlay');

    const gridSize = 20;
    const tileCountX = canvas.width / gridSize;
    const tileCountY = canvas.height / gridSize;

    let snake = [{x: 10, y: 10}];
    let velocity = {x: 1, y: 0};
    let nextVelocity = {x: 1, y: 0};
    let food = {x: 15, y: 10};
    let score = 0;
    let gameRunning = false;
    let autoPlay = true;
    let gameLoop;

    const colors = ['#e74c3c', '#f1c40f', '#3498db', '#9b59b6', '#2ecc71', '#e67e22'];

    function draw() {
        // Background
        ctx.fillStyle = '#ecf0f1';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Grid lines (faint)
        ctx.strokeStyle = '#dcdde1';
        for(let i=0; i<tileCountX; i++) {
            ctx.beginPath(); ctx.moveTo(i*gridSize,0); ctx.lineTo(i*gridSize, canvas.height); ctx.stroke();
        }
        for(let i=0; i<tileCountY; i++) {
            ctx.beginPath(); ctx.moveTo(0, i*gridSize); ctx.lineTo(canvas.width, i*gridSize); ctx.stroke();
        }

        // Draw Food (Passenger)
        ctx.fillStyle = '#2c3e50';
        ctx.beginPath();
        ctx.arc(food.x * gridSize + gridSize/2, food.y * gridSize + gridSize/2, gridSize/3, 0, Math.PI*2);
        ctx.fill();

        // Draw Snake (Train)
        snake.forEach((part, index) => {
            if (index === 0) {
                // Locomotive
                ctx.fillStyle = '#34495e';
                ctx.fillRect(part.x * gridSize + 2, part.y * gridSize + 2, gridSize - 4, gridSize - 4);
                // Chimney
                ctx.fillStyle = '#000';
                ctx.fillRect(part.x * gridSize + 6, part.y * gridSize + 2, 8, 4);
            } else {
                // Wagon
                ctx.fillStyle = colors[(index - 1) % colors.length];
                ctx.fillRect(part.x * gridSize + 2, part.y * gridSize + 2, gridSize - 4, gridSize - 4);
                // Wagon coupling
                ctx.fillStyle = '#000';
                ctx.fillRect(part.x * gridSize + gridSize/2 - 2, part.y * gridSize + gridSize/2 - 2, 4, 4);
            }
        });
    }

    function update() {
        if (!gameRunning) return;

        // AI Logic
        if (autoPlay) {
            if (food.x > snake[0].x && velocity.x === 0) nextVelocity = {x: 1, y: 0};
            else if (food.x < snake[0].x && velocity.x === 0) nextVelocity = {x: -1, y: 0};
            else if (food.y > snake[0].y && velocity.y === 0) nextVelocity = {x: 0, y: 1};
            else if (food.y < snake[0].y && velocity.y === 0) nextVelocity = {x: 0, y: -1};
        }

        velocity = nextVelocity;
        const head = {x: snake[0].x + velocity.x, y: snake[0].y + velocity.y};

        // Collision
        if (head.x < 0 || head.x >= tileCountX || head.y < 0 || head.y >= tileCountY || snake.some(p => p.x === head.x && p.y === head.y)) {
            resetGame();
            return;
        }

        snake.unshift(head);

        if (head.x === food.x && head.y === food.y) {
            score++;
            scoreEl.innerText = score;
            spawnFood();
        } else {
            snake.pop();
        }

        draw();
    }

    function spawnFood() {
        food = {
            x: Math.floor(Math.random() * tileCountX),
            y: Math.floor(Math.random() * tileCountY)
        };
        // Ensure food doesn't spawn on snake
        if (snake.some(p => p.x === food.x && p.y === food.y)) spawnFood();
    }

    function resetGame() {
        snake = [{x: 10, y: 10}];
        velocity = {x: 1, y: 0};
        nextVelocity = {x: 1, y: 0};
        score = 0;
        scoreEl.innerText = score;
        spawnFood();
    }

    function startGame() {
        if (!gameRunning) {
            gameRunning = true;
            autoPlay = false;
            overlay.style.display = 'none';
        }
    }

    window.addEventListener('keydown', e => {
        startGame();
        if (e.key === 'ArrowUp' && velocity.y === 0) nextVelocity = {x: 0, y: -1};
        if (e.key === 'ArrowDown' && velocity.y === 0) nextVelocity = {x: 0, y: 1};
        if (e.key === 'ArrowLeft' && velocity.x === 0) nextVelocity = {x: -1, y: 0};
        if (e.key === 'ArrowRight' && velocity.x === 0) nextVelocity = {x: 1, y: 0};
    });

    overlay.addEventListener('click', startGame);

    // Initial State
    spawnFood();
    setInterval(update, 100);
    draw();
</script>
</body>
</html>