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: 4.2 s
Cost: $0.0025
Output tokens: 1,578
Spent thinking: 0 tokens
Speed: 436.7 tok/s
Console errors: 0

First token after: 606 ms
First visible text after: 606 ms
Prompt tokens: 367
Code size: 4.5 KB
Finish reason: stop
Served by: Google
Model id: google/gemini-3.1-flash-lite
Reasoning sent: {"effort":"none"}
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 · 127 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; }
        canvas { display: block; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        #ui { position: absolute; top: 10px; width: 100%; text-align: center; pointer-events: none; }
        #start-msg { position: absolute; top: 50%; width: 100%; text-align: center; background: rgba(0,0,0,0.7); padding: 20px; font-size: 24px; cursor: pointer; }
    </style>
</head>
<body>
    <div id="ui"><h2>Station Master Snake</h2><p>Score: <span id="score">0</span></p></div>
    <div id="game-container">
        <canvas id="game" width="600" height="600"></canvas>
        <div id="start-msg">Click to Start / Control with Arrows</div>
    </div>

<script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const scoreEl = document.getElementById('score');
    const startMsg = document.getElementById('start-msg');
    
    const gridSize = 30;
    const tileCount = 20;
    let snake = [{x: 10, y: 10}];
    let passengers = [{x: 5, y: 5, color: '#e74c3c'}];
    let dx = 1, dy = 0;
    let score = 0;
    let gameRunning = false;
    let autoPlay = true;

    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 Passengers
        passengers.forEach(p => {
            ctx.fillStyle = p.color;
            ctx.beginPath();
            ctx.arc(p.x*gridSize + gridSize/2, p.y*gridSize + gridSize/2, gridSize/4, 0, Math.PI*2);
            ctx.fill();
        });

        // Draw Train
        snake.forEach((s, i) => {
            if(i === 0) {
                ctx.fillStyle = '#f1c40f'; // Locomotive
                ctx.fillRect(s.x*gridSize + 2, s.y*gridSize + 2, gridSize-4, gridSize-4);
                ctx.fillStyle = '#2c3e50';
                ctx.fillRect(s.x*gridSize + 8, s.y*gridSize + 8, 4, 4);
            } else {
                ctx.fillStyle = (i % 2 === 0) ? '#3498db' : '#9b59b6'; // Wagons
                ctx.fillRect(s.x*gridSize + 4, s.y*gridSize + 4, gridSize-8, gridSize-8);
            }
        });
    }

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

        if(autoPlay) {
            const head = snake[0];
            const target = passengers[0];
            if(target.x > head.x && dx === 0) { dx = 1; dy = 0; }
            else if(target.x < head.x && dx === 0) { dx = -1; dy = 0; }
            else if(target.y > head.y && dy === 0) { dx = 0; dy = 1; }
            else if(target.y < head.y && dy === 0) { dx = 0; dy = -1; }
        }

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

        // Bounds
        if(head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount) {
            resetGame(); return;
        }

        snake.unshift(head);

        if(head.x === passengers[0].x && head.y === passengers[0].y) {
            score++;
            scoreEl.innerText = score;
            passengers[0] = {
                x: Math.floor(Math.random() * tileCount),
                y: Math.floor(Math.random() * tileCount),
                color: `hsl(${Math.random()*360}, 70%, 60%)`
            };
        } else {
            snake.pop();
        }
        draw();
    }

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

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

    startMsg.addEventListener('click', () => { autoPlay = false; gameRunning = true; startMsg.style.display = 'none'; });

    setInterval(update, 150);
    draw();
</script>
</body>
</html>