MiniMax M3.1 Flash
by MiniMaxReasoningClean
Running live in a sandboxed frame. Click inside it before using the keyboard.
How it went
- Total time
- 1 min 4 s
- Cost
- $0.0039
- Output tokens
- 6,355
- Spent thinking
- 942 tokens
- Speed
- 99.8 tok/s
- Console errors
- 0
- First token after
- 696 ms
- First visible text after
- 19.9 s
- Prompt tokens
- 664
- Code size
- 16.4 KB
- Finish reason
- stop
- Served by
- Together
- Model id
minimax/minimax-m3.1-flash- Reasoning sent
{"effort":"low"}- Max output
- 64,000 tokens
- Generated
- Nov 11, 2026
What it was asked
The prompt
Build a polished Snake game in a single HTML file using vanilla JavaScript and a <canvas>. Requirements: - A grid of at least 20×20 cells, centered on the page. - Arrow keys and WASD control the snake. Quick successive key presses must both be honored, but the snake can never reverse onto itself. - Eating food adds 10 points and grows the snake by one cell; new food never spawns on the snake. - Game over when the snake hits a wall or itself, with an overlay showing the score; Space or Enter restarts, P pauses. - Visual polish: smooth movement, a snake with a distinct head and eyes facing its direction, and a small particle burst when eating. - Display the current score and the best score of the session.
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 · 573 lines
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Neon Snake</title>
<style>
:root {
--bg: #07111f;
--panel: rgba(15, 29, 49, .86);
--line: rgba(130, 220, 255, .16);
--cyan: #57e6ff;
--mint: #70f5b4;
--text: #eaf8ff;
--muted: #91a9bf;
}
* { box-sizing: border-box; }
html, body { margin: 0; min-height: 100%; }
body {
display: flex;
align-items: center;
justify-content: center;
padding: 24px;
color: var(--text);
font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
background:
radial-gradient(circle at 15% 12%, rgba(42, 145, 192, .16), transparent 30%),
radial-gradient(circle at 85% 88%, rgba(89, 240, 173, .10), transparent 28%),
linear-gradient(145deg, #07111f, #09182a 55%, #06101c);
overflow-x: hidden;
}
.app { width: min(680px, 100%); }
.topbar {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: 18px;
margin-bottom: 16px;
}
h1 {
margin: 0;
font-size: clamp(26px, 5vw, 38px);
letter-spacing: -.04em;
line-height: 1;
background: linear-gradient(100deg, #fff, #8cecff 48%, #73f2b5);
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
.subtitle { margin: 8px 0 0; color: var(--muted); font-size: 13px; }
.scores { display: flex; gap: 10px; }
.score-card {
min-width: 82px;
padding: 10px 13px;
border: 1px solid var(--line);
border-radius: 13px;
background: rgba(12, 29, 48, .66);
box-shadow: inset 0 1px rgba(255,255,255,.04), 0 10px 30px rgba(0,0,0,.12);
}
.score-card span {
display: block;
color: var(--muted);
font-size: 10px;
font-weight: 700;
letter-spacing: .13em;
text-transform: uppercase;
}
.score-card strong { display: block; margin-top: 3px; font-size: 23px; color: var(--cyan); }
.score-card.best strong { color: var(--mint); }
.board {
position: relative;
padding: 12px;
border: 1px solid rgba(125, 223, 255, .22);
border-radius: 22px;
background: linear-gradient(145deg, rgba(19, 42, 66, .84), rgba(8, 20, 36, .92));
box-shadow: 0 28px 80px rgba(0,0,0,.38), 0 0 0 1px rgba(255,255,255,.025) inset, 0 0 45px rgba(44, 187, 230, .07);
}
.board::before {
content: "";
position: absolute;
inset: 6px;
pointer-events: none;
border: 1px solid rgba(255,255,255,.035);
border-radius: 17px;
}
canvas {
display: block;
width: 100%;
height: auto;
aspect-ratio: 1;
border-radius: 13px;
background: #081522;
image-rendering: auto;
touch-action: none;
}
.overlay {
position: absolute;
inset: 12px;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
border-radius: 13px;
background: rgba(4, 13, 25, .68);
backdrop-filter: blur(5px);
-webkit-backdrop-filter: blur(5px);
text-align: center;
transition: opacity .18s ease;
}
.overlay.hidden { opacity: 0; pointer-events: none; }
.overlay .eyebrow {
color: var(--mint);
font-size: 11px;
font-weight: 800;
letter-spacing: .18em;
text-transform: uppercase;
}
.overlay h2 { margin: 10px 0 7px; font-size: clamp(25px, 6vw, 40px); letter-spacing: -.04em; }
.overlay p { margin: 0; color: #b4cada; font-size: 14px; }
.overlay button {
margin-top: 20px;
border: 0;
border-radius: 10px;
padding: 11px 18px;
color: #06202a;
background: linear-gradient(100deg, #58e5ff, #72f5b7);
font-weight: 800;
cursor: pointer;
box-shadow: 0 7px 22px rgba(83, 229, 255, .2);
}
.overlay button:hover { filter: brightness(1.08); transform: translateY(-1px); }
.footer {
display: flex;
justify-content: space-between;
gap: 12px;
margin-top: 14px;
color: var(--muted);
font-size: 12px;
}
kbd {
display: inline-block;
padding: 2px 6px;
border: 1px solid rgba(150, 215, 240, .22);
border-bottom-width: 2px;
border-radius: 5px;
color: #cceaf4;
background: rgba(255,255,255,.045);
font-size: 11px;
}
@media (max-width: 480px) {
body { padding: 14px; }
.topbar { align-items: flex-start; flex-direction: column; gap: 12px; }
.scores { width: 100%; }
.score-card { flex: 1; }
.footer { flex-direction: column; gap: 6px; }
}
</style>
</head>
<body>
<main class="app">
<header class="topbar">
<div>
<h1>NEON SNAKE</h1>
<p class="subtitle">A crisp little arcade classic.</p>
</div>
<div class="scores">
<div class="score-card"><span>Score</span><strong id="score">0</strong></div>
<div class="score-card best"><span>Best</span><strong id="best">0</strong></div>
</div>
</header>
<section class="board">
<canvas id="game" width="600" height="600" aria-label="Snake game"></canvas>
<div class="overlay" id="overlay">
<div class="eyebrow" id="overlayEyebrow">Demo mode</div>
<h2 id="overlayTitle">Ready?</h2>
<p id="overlayText">Click or press a key to start</p>
<button id="actionBtn">Start playing</button>
</div>
</section>
<footer class="footer">
<span><kbd>↑</kbd> <kbd>↓</kbd> <kbd>←</kbd> <kbd>→</kbd> or <kbd>WASD</kbd> to move</span>
<span><kbd>P</kbd> pause <kbd>Space</kbd> restart</span>
</footer>
</main>
<script>
(() => {
"use strict";
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const scoreEl = document.getElementById("score");
const bestEl = document.getElementById("best");
const overlay = document.getElementById("overlay");
const overlayEyebrow = document.getElementById("overlayEyebrow");
const overlayTitle = document.getElementById("overlayTitle");
const overlayText = document.getElementById("overlayText");
const actionBtn = document.getElementById("actionBtn");
const GRID = 24;
const CELL = canvas.width / GRID;
const STEP = 108;
let snake, prevSnake, food, dir, queue, score, best = 0;
let running = false, demo = true, paused = false, gameOver = false;
let accumulator = 0, lastTime = 0, particleClock = 0;
const directions = {
up: {x: 0, y: -1},
down: {x: 0, y: 1},
left: {x: -1, y: 0},
right: {x: 1, y: 0}
};
const keyMap = {
ArrowUp: "up", w: "up", W: "up",
ArrowDown: "down", s: "down", S: "down",
ArrowLeft: "left", a: "left", A: "left",
ArrowRight: "right", d: "right", D: "right"
};
const particles = [];
function reset() {
const mid = Math.floor(GRID / 2);
snake = [{x: mid, y: mid}, {x: mid - 1, y: mid}, {x: mid - 2, y: mid}];
prevSnake = snake.map(p => ({...p}));
dir = directions.right;
queue = [];
score = 0;
accumulator = 0;
paused = false;
gameOver = false;
particles.length = 0;
placeFood();
updateHud();
}
function placeFood() {
const open = [];
for (let y = 0; y < GRID; y++) {
for (let x = 0; x < GRID; x++) {
if (!snake.some(p => p.x === x && p.y === y)) open.push({x, y});
}
}
food = open.length ? open[Math.floor(Math.random() * open.length)] : null;
}
function updateHud() {
scoreEl.textContent = score;
bestEl.textContent = best;
}
function same(a, b) { return a.x === b.x && a.y === b.y; }
function occupied(p) { return snake.some(s => same(s, p)); }
function safeMove(d, body = snake) {
const head = body[0];
const p = {x: head.x + d.x, y: head.y + d.y};
if (p.x < 0 || p.x >= GRID || p.y < 0 || p.y >= GRID) return false;
for (let i = 0; i < body.length - 1; i++) {
if (same(body[i], p)) return false;
}
return true;
}
function chooseDemoDirection() {
const choices = Object.values(directions).filter(d =>
!(d.x === -dir.x && d.y === -dir.y) && safeMove(d)
);
if (!choices.length) return dir;
choices.sort((a, b) => {
const ah = {x: snake[0].x + a.x, y: snake[0].y + a.y};
const bh = {x: snake[0].x + b.x, y: snake[0].y + b.y};
const ad = Math.abs(ah.x - food.x) + Math.abs(ah.y - food.y);
const bd = Math.abs(bh.x - food.x) + Math.abs(bh.y - food.y);
return ad - bd;
});
return choices[0];
}
function enqueue(name) {
const next = directions[name];
if (!next) return;
const reference = queue.length ? queue[queue.length - 1] : dir;
if (next.x === -reference.x && next.y === -reference.y) return;
if (next.x === reference.x && next.y === reference.y) return;
if (queue.length < 3) queue.push(next);
}
function step() {
if (demo) {
dir = chooseDemoDirection();
queue = [];
} else if (queue.length) {
dir = queue.shift();
}
const head = snake[0];
const next = {x: head.x + dir.x, y: head.y + dir.y};
const hitWall = next.x < 0 || next.x >= GRID || next.y < 0 || next.y >= GRID;
const hitSelf = snake.slice(0, -1).some(p => same(p, next));
if (hitWall || hitSelf) {
gameOver = true;
running = false;
burst(next, "#ff6d8a", 22);
if (score > best) best = score;
updateHud();
showGameOver();
return;
}
prevSnake = snake.map(p => ({...p}));
snake.unshift(next);
if (food && same(next, food)) {
score += 10;
if (score > best) best = score;
updateHud();
burst(next, "#71f5bd", 14);
placeFood();
} else {
snake.pop();
}
}
function burst(cell, color, count) {
const cx = cell.x * CELL + CELL / 2;
const cy = cell.y * CELL + CELL / 2;
for (let i = 0; i < count; i++) {
const a = Math.random() * Math.PI * 2;
const speed = 40 + Math.random() * 115;
particles.push({
x: cx, y: cy,
vx: Math.cos(a) * speed,
vy: Math.sin(a) * speed,
life: .35 + Math.random() * .4,
max: .75,
size: 1.5 + Math.random() * 2.8,
color
});
}
}
function roundRect(x, y, w, h, r) {
ctx.beginPath();
ctx.roundRect(x, y, w, h, r);
}
function drawBackground() {
const g = ctx.createLinearGradient(0, 0, canvas.width, canvas.height);
g.addColorStop(0, "#0a1d2c");
g.addColorStop(.55, "#081725");
g.addColorStop(1, "#0b1927");
ctx.fillStyle = g;
ctx.fillRect(0, 0, canvas.width, canvas.height);
ctx.strokeStyle = "rgba(116, 206, 232, .075)";
ctx.lineWidth = 1;
for (let i = 1; i < GRID; i++) {
const p = i * CELL + .5;
ctx.beginPath(); ctx.moveTo(p, 0); ctx.lineTo(p, canvas.height); ctx.stroke();
ctx.beginPath(); ctx.moveTo(0, p); ctx.lineTo(canvas.width, p); ctx.stroke();
}
const glow = ctx.createRadialGradient(300, 280, 20, 300, 280, 330);
glow.addColorStop(0, "rgba(61, 210, 224, .055)");
glow.addColorStop(1, "rgba(61, 210, 224, 0)");
ctx.fillStyle = glow;
ctx.fillRect(0, 0, canvas.width, canvas.height);
}
function drawFood() {
if (!food) return;
const cx = food.x * CELL + CELL / 2;
const cy = food.y * CELL + CELL / 2;
ctx.save();
ctx.shadowColor = "rgba(255, 113, 129, .7)";
ctx.shadowBlur = 17;
ctx.fillStyle = "#ff7187";
ctx.beginPath();
ctx.arc(cx, cy + 1, CELL * .25, 0, Math.PI * 2);
ctx.fill();
ctx.shadowBlur = 0;
ctx.strokeStyle = "#b9ffb5";
ctx.lineWidth = 2.5;
ctx.lineCap = "round";
ctx.beginPath();
ctx.moveTo(cx, cy - CELL * .17);
ctx.quadraticCurveTo(cx + 2, cy - CELL * .39, cx + 7, cy - CELL * .31);
ctx.stroke();
ctx.restore();
}
function drawSnake() {
if (!snake || !snake.length) return;
const t = Math.min(1, accumulator / STEP);
const e = t * t * (3 - 2 * t);
for (let i = snake.length - 1; i >= 0; i--) {
const p = snake[i];
const old = prevSnake[i] || p;
const x = (old.x + (p.x - old.x) * e) * CELL;
const y = (old.y + (p.y - old.y) * e) * CELL;
const pad = i === 0 ? 2.4 : 3.5;
const size = CELL - pad;
const g = ctx.createLinearGradient(x, y, x + size, y + size);
if (i === 0) {
g.addColorStop(0, "#a2ffe0");
g.addColorStop(.55, "#59efd0");
g.addColorStop(1, "#20b9bd");
} else {
const light = 1 - i / Math.max(snake.length, 14) * .42;
g.addColorStop(0, `rgba(102, ${Math.round(235 * light)}, 190, .95)`);
g.addColorStop(1, `rgba(24, ${Math.round(153 * light)}, 177, .92)`);
}
ctx.fillStyle = g;
ctx.shadowColor = i === 0 ? "rgba(89, 255, 210, .34)" : "rgba(39, 220, 192, .13)";
ctx.shadowBlur = i === 0 ? 13 : 7;
roundRect(x + pad / 2, y + pad / 2, size, size, i === 0 ? 8 : 6);
ctx.fill();
ctx.shadowBlur = 0;
if (i === 0) drawEyes(x + pad / 2, y + pad / 2, size);
}
}
function drawEyes(x, y, size) {
const cx = x + size / 2, cy = y + size / 2;
const fx = dir.x, fy = dir.y;
const sx = -fy, sy = fx;
for (const side of [-1, 1]) {
const ex = cx + fx * size * .2 + sx * side * size * .23;
const ey = cy + fy * size * .2 + sy * side * size * .23;
ctx.fillStyle = "#f7ffff";
ctx.beginPath(); ctx.arc(ex, ey, size * .105, 0, Math.PI * 2); ctx.fill();
ctx.fillStyle = "#062533";
ctx.beginPath();
ctx.arc(ex + fx * size * .045, ey + fy * size * .045, size * .052, 0, Math.PI * 2);
ctx.fill();
}
}
function drawParticles(dt) {
for (let i = particles.length - 1; i >= 0; i--) {
const p = particles[i];
p.life -= dt;
if (p.life <= 0) { particles.splice(i, 1); continue; }
p.x += p.vx * dt;
p.y += p.vy * dt;
p.vy += 100 * dt;
ctx.globalAlpha = Math.max(0, p.life / p.max);
ctx.fillStyle = p.color;
ctx.beginPath(); ctx.arc(p.x, p.y, p.size, 0, Math.PI * 2); ctx.fill();
}
ctx.globalAlpha = 1;
}
function render(dt) {
drawBackground();
drawFood();
drawSnake();
drawParticles(dt);
}
function showStart() {
overlay.classList.remove("hidden");
overlayEyebrow.textContent = "Demo mode";
overlayTitle.textContent = "Ready?";
overlayText.textContent = "Click or press a key to start";
actionBtn.textContent = "Start playing";
}
function showGameOver() {
overlay.classList.remove("hidden");
overlayEyebrow.textContent = score >= best && score > 0 ? "New high score" : "Game over";
overlayTitle.textContent = "Snapped!";
overlayText.textContent = `Score ${score} • Best ${best}`;
actionBtn.textContent = "Play again";
}
function showPause() {
overlay.classList.remove("hidden");
overlayEyebrow.textContent = "Paused";
overlayTitle.textContent = "Take a breath";
overlayText.textContent = "Press P to resume";
actionBtn.textContent = "Resume";
}
function beginInteractive() {
if (gameOver) {
reset();
demo = false;
running = true;
overlay.classList.add("hidden");
return;
}
demo = false;
running = true;
overlay.classList.add("hidden");
}
function restart() {
reset();
demo = false;
running = true;
overlay.classList.add("hidden");
}
actionBtn.addEventListener("click", e => {
e.stopPropagation();
if (paused) {
paused = false;
running = true;
overlay.classList.add("hidden");
} else beginInteractive();
});
canvas.addEventListener("pointerdown", () => {
if (!paused && !gameOver) beginInteractive();
});
window.addEventListener("keydown", e => {
const k = e.key;
if (["ArrowUp","ArrowDown","ArrowLeft","ArrowRight"," "].includes(k)) e.preventDefault();
if (k === "p" || k === "P") {
if (gameOver) return;
if (!running && !paused) return;
paused = !paused;
running = !paused;
if (paused) showPause(); else overlay.classList.add("hidden");
return;
}
if (k === " " || k === "Enter") {
if (gameOver) restart();
else if (paused) {
paused = false; running = true; overlay.classList.add("hidden");
} else beginInteractive();
return;
}
const name = keyMap[k];
if (name) {
if (!running || paused) beginInteractive();
demo = false;
enqueue(name);
}
});
function loop(now) {
const dt = Math.min(.05, lastTime ? (now - lastTime) / 1000 : 0);
lastTime = now;
if (running && !paused && !gameOver) {
accumulator += dt * 1000;
while (accumulator >= STEP) {
step();
accumulator -= STEP;
if (!running) break;
}
}
render(dt);
requestAnimationFrame(loop);
}
reset();
showStart();
running = true;
demo = true;
requestAnimationFrame(loop);
})();
</script>
</body>
</html>Reasoning trace (942 tokens)
We need craft single HTML polished. Need obey exactly one code block. Need ensure self playing demo behind start message. Canvas 24x24. Need arrows/WASD quick successive honored via queue, no reversal. Food particles. Score, best session. Game over overlay score, restart. Pause. Start message overlay with demo AI auto plays after? "Click or press a key to start" games must start self-playing demo mode behind message. Could have demo playing behind overlay immediately, AI controls; overlay says click/press to start, clicking takes control. Key press start and control. Space/Enter restart game over. Need meaningful visible first paint.
Implement 1280 viewport centered card. canvas responsive square perhaps 600x600 grid 24. Canvas 600x600 grid 24. CSS. JS.
Snake smooth movement: render interpolated? Use requestAnimationFrame and move at interval; head position interpolated between cells using easing. Simpler render snake body positions interpolate current and previous. Maintain snake array of grid coords; on move unshift new, pop. prevSnake for render. Use interpolation t = accumulator/step. Head moves from old to new smoothly, body segments follow chain. Eyes based on direction.
Particles.
AI demo: pick safe direction toward food avoiding collision and reversal, occasionally. Starting snake center.
Input queue: queue of directions max 2; on move shift, check against current dir. Need successive honored: queue can include turn and then another turn. But if queue based direction check; validate each relative to current dir at enqueue using last queued direction. Avoid reverse.
Overlay initial. on click start interactive and hide. keydown: if overlay visible, start and maybe use key. Space/Enter restart game over. P pause.
Game over when wall/self: don't move, head hits wall maybe end. Overlay show score and best.
Best session in variable (not storage) starting 0.
Need code only. Let's produce sizeable HTML. CSS polished dark gradients, HUD. Canvas accessible. Use device pixel ratio? canvas width 600 css width min(68vh,600px). Grid 24 => cell 25. canvas internal 600. draw.
Let's formulate.
Game state: snake [{x,y}], dir {x:0,y:1}? Start at center. prev = same. stepMs 110. loop updates accumulator; while accum>=step. render each frame interpolation ease = accum/step, but at move need prevSnake set before mutation. For smooth body, render positions p = prev[i] + (snake[i]-prev[i])*ease. However after multiple moves fine. At first prev same. On step: prevSnake=snake.map; compute next; if collision. if collision set gameover, maybe don't mutate? head stays old and overlay. Fine. On valid, snake.unshift(next); if food grow pop; else pop. set prev before.
Direction coordinates y down. Food random empty.
Demo AI: each step if demo choose direction safe. But avoid immediate reverse. Candidate dirs, score distance food and safe. simulate next head and body (excluding tail maybe). Since dir may reverse blocked. choose. With queue? AI set dir directly and clear queue.
Start demo initial: game running demo true, overlay start visible. Render moving behind. Once user clicks, demo false. Keydown: arrows/w/asd sets dir and starts; preventDefault. P pause toggles. Space/Enter if gameover restart.
Pause overlay drawn on canvas with text, plus overlay HTML? Use HTML overlay for start/gameover. DOM overlay positioned absolute. Update classes. pause also overlay.
Need ensure click canvas starts.
Canvas grid centered. Layout header with title, score cards, controls. Canvas frame.
Particles array with x,y vx vy life color, update dt.
Food glow.
Render rounded rect helper. Snake gradient head. eyes: based dir, perpendicular. Head segment at interpolated pos; body positions. Draw body segments with gaps, gradient green/teal. Head lighter with eyes white pupils dark. Eyes positions based dir: forward axis and side offsets. For each eye, base = head center + dir*0.18*cell; side perp * ±0.22*cell. pupil offset dir*0.05.
Food draw apple-ish circle with leaf.
Overlay HTML text and button maybe. Need initial message "Click or press a key to start" and "Demo is playing..." Good.
Game over overlay showing score and best. Restart button maybe click. Clicking button restart.
Pause P overlay.
CSS no external fonts; use system. Include gradient background.
Let's output.