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: 3.7 s
Cost: $0.0023
Output tokens: 1,497
Spent thinking: 0 tokens
Speed: 443.3 tok/s
Console errors: 0

First token after: 313 ms
First visible text after: 313 ms
Prompt tokens: 367
Code size: 4.3 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"minimal"}
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 · 124 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Train Snake</title>
    <style>
        body { margin: 0; background: #2c3e50; font-family: 'Segoe UI', sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; color: white; flex-direction: column; }
        #game-container { position: relative; border: 4px solid #ecf0f1; background: #34495e; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        canvas { display: block; }
        #overlay { position: absolute; top: 0; left: 0; width: 100%; height: 100%; display: flex; flex-direction: column; justify-content: center; align-items: center; background: rgba(0,0,0,0.6); cursor: pointer; }
        h1 { margin: 0; font-size: 2em; }
    </style>
</head>
<body>

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

<script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const gridSize = 20;
    const tileCount = canvas.width / gridSize;
    
    let train = [{x: 10, y: 10, type: 'loco'}];
    let passengers = [];
    let dx = 1, dy = 0;
    let score = 0;
    let gameRunning = false;
    let autoPlay = true;

    function spawnPassenger() {
        passengers = [{
            x: Math.floor(Math.random() * tileCount),
            y: Math.floor(Math.random() * tileCount),
            color: `hsl(${Math.random() * 360}, 70%, 60%)`
        }];
    }

    function draw() {
        ctx.fillStyle = '#34495e';
        ctx.fillRect(0, 0, canvas.width, canvas.height);

        // Draw tracks
        ctx.strokeStyle = '#2c3e50';
        for(let i=0; i<tileCount; i++) {
            ctx.strokeRect(i*gridSize, 0, gridSize, canvas.height);
            ctx.strokeRect(0, i*gridSize, canvas.width, gridSize);
        }

        // Draw passenger
        passengers.forEach(p => {
            ctx.fillStyle = p.color;
            ctx.beginPath();
            ctx.arc(p.x * gridSize + gridSize/2, p.y * gridSize + gridSize/2, gridSize/3, 0, Math.PI*2);
            ctx.fill();
        });

        // Draw train
        train.forEach((part, index) => {
            ctx.fillStyle = index === 0 ? '#e74c3c' : part.color;
            ctx.fillRect(part.x * gridSize + 2, part.y * gridSize + 2, gridSize - 4, gridSize - 4);
            // Draw window
            ctx.fillStyle = 'rgba(255,255,255,0.5)';
            ctx.fillRect(part.x * gridSize + 6, part.y * gridSize + 6, gridSize - 12, gridSize - 12);
        });
    }

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

        // Auto-play logic
        if (autoPlay) {
            const head = train[0];
            const p = passengers[0];
            if (head.x < p.x && dx !== -1) { dx = 1; dy = 0; }
            else if (head.x > p.x && dx !== 1) { dx = -1; dy = 0; }
            else if (head.y < p.y && dy !== -1) { dx = 0; dy = 1; }
            else if (head.y > p.y && dy !== 1) { dx = 0; dy = -1; }
        }

        const head = { x: train[0].x + dx, y: train[0].y + dy, type: 'wagon', color: passengers[0].color };

        // Collision
        if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || train.some(p => p.x === head.x && p.y === head.y)) {
            train = [{x: 10, y: 10, type: 'loco'}];
            dx = 1; dy = 0;
            score = 0;
            return;
        }

        train.unshift(head);

        if (head.x === passengers[0].x && head.y === passengers[0].y) {
            score++;
            spawnPassenger();
        } else {
            train.pop();
        }
        draw();
    }

    document.addEventListener('keydown', (e) => {
        autoPlay = false;
        gameRunning = true;
        document.getElementById('overlay').style.display = 'none';
        if (e.key === 'ArrowUp' && dy !== 1) { dx = 0; dy = -1; }
        if (e.key === 'ArrowDown' && dy !== -1) { dx = 0; dy = 1; }
        if (e.key === 'ArrowLeft' && dx !== 1) { dx = -1; dy = 0; }
        if (e.key === 'ArrowRight' && dx !== -1) { dx = 1; dy = 0; }
    });

    canvas.addEventListener('click', () => { autoPlay = false; gameRunning = true; document.getElementById('overlay').style.display = 'none'; });

    spawnPassenger();
    setInterval(update, 100);
</script>
</body>
</html>