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.9 s
Cost: $0.0024
Output tokens: 1,510
Spent thinking: 0 tokens
Speed: 456.5 tok/s
Console errors: 0

First token after: 562 ms
First visible text after: 562 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: model default
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 · 114 lines

Download

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Train Snake</title>
    <style>
        body { margin: 0; background: #2c3e50; color: white; font-family: sans-serif; display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100vh; overflow: hidden; }
        canvas { background: #34495e; border: 4px solid #7f8c8d; border-radius: 8px; box-shadow: 0 0 20px rgba(0,0,0,0.5); }
        #ui { position: absolute; top: 20px; text-align: center; pointer-events: none; }
        .msg { position: absolute; background: rgba(0,0,0,0.7); padding: 20px; border-radius: 10px; cursor: pointer; pointer-events: all; }
    </style>
</head>
<body>
    <div id="ui">
        <h1>Train Snake</h1>
        <p>Score: <span id="score">0</span></p>
    </div>
    <div id="msg" class="msg">Click or press any key to start</div>
    <canvas id="game"></canvas>

<script>
    const canvas = document.getElementById('game');
    const ctx = canvas.getContext('2d');
    const scoreEl = document.getElementById('score');
    const msg = document.getElementById('msg');
    
    canvas.width = 600;
    canvas.height = 400;
    const gridSize = 20;
    let snake = [{x: 10, y: 10}, {x: 9, y: 10}];
    let dir = {x: 1, y: 0};
    let nextDir = {x: 1, y: 0};
    let passengers = [{x: 20, y: 10, color: 'red'}];
    let score = 0;
    let gameStarted = false;
    let autoPlay = true;

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

    function draw() {
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        
        // Draw Passengers
        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
        snake.forEach((s, i) => {
            if (i === 0) {
                ctx.fillStyle = '#f1c40f'; // Loco
                ctx.fillRect(s.x * gridSize + 2, s.y * gridSize + 2, gridSize - 4, gridSize - 4);
            } else {
                ctx.fillStyle = passengers[0]?.color || '#9b59b6';
                ctx.strokeStyle = '#2c3e50';
                ctx.strokeRect(s.x * gridSize + 2, s.y * gridSize + 2, gridSize - 4, gridSize - 4);
                ctx.fillRect(s.x * gridSize + 4, s.y * gridSize + 4, gridSize - 8, gridSize - 8);
            }
        });
    }

    function update() {
        if (!gameStarted) {
            if (autoPlay) {
                // Simple AI
                if (snake[0].x < passengers[0].x) nextDir = {x: 1, y: 0};
                else if (snake[0].x > passengers[0].x) nextDir = {x: -1, y: 0};
                else if (snake[0].y < passengers[0].y) nextDir = {x: 0, y: 1};
                else if (snake[0].y > passengers[0].y) nextDir = {x: 0, y: -1};
            }
            return;
        }

        dir = nextDir;
        let head = {x: snake[0].x + dir.x, y: snake[0].y + dir.y};

        if (head.x < 0 || head.x >= canvas.width/gridSize || head.y < 0 || head.y >= canvas.height/gridSize || snake.find(s => s.x === head.x && s.y === head.y)) {
            snake = [{x: 10, y: 10}, {x: 9, y: 10}];
            score = 0; scoreEl.innerText = score;
            return;
        }

        snake.unshift(head);
        if (head.x === passengers[0].x && head.y === passengers[0].y) {
            score++;
            scoreEl.innerText = score;
            spawnPassenger();
        } else {
            snake.pop();
        }
    }

    window.addEventListener('keydown', e => {
        gameStarted = true; autoPlay = false; msg.style.display = 'none';
        if (e.key === 'ArrowUp' && dir.y === 0) nextDir = {x: 0, y: -1};
        if (e.key === 'ArrowDown' && dir.y === 0) nextDir = {x: 0, y: 1};
        if (e.key === 'ArrowLeft' && dir.x === 0) nextDir = {x: -1, y: 0};
        if (e.key === 'ArrowRight' && dir.x === 0) nextDir = {x: 1, y: 0};
    });
    msg.onclick = () => { gameStarted = true; autoPlay = false; msg.style.display = 'none'; };

    setInterval(() => { update(); draw(); }, 100);
</script>
</body>
</html>