How to add a model
- Copy a prompt below.
- Paste it into the model’s web chat (claude.ai / z.ai / grok.com / chatgpt).
- Copy the model’s full reply.
- Send it back — it’s run in an offline browser, scored, and published.
Game-making game/v2
best so far: claude-opus-4.8 (web) 100/100
# Task: "Catcher Pro" — an HTML5 canvas game with risk & skill
Build a single, self-contained `index.html` (inline CSS + JS only — NO external
files, NO network, NO libraries) that runs an arcade catch game on a `<canvas>`.
This is harder than a basic catcher: there are good and bad items, limited lives,
a win and a lose condition, and rising difficulty.
## The game
- A 480x600 `<canvas>`. A player paddle near the bottom moves horizontally.
- Items fall from the top at varying x positions. Each item is one of two types:
- **good** (e.g. a gem) — catching it (overlap with the paddle) gives `score += 1`.
- **bad** (e.g. a bomb) — catching it costs one life (`lives -= 1`).
- Roughly 1 in 3 spawned items is bad. Items that reach the bottom uncaught are
simply removed (no penalty).
- Start with `lives = 3`. The fall speed should increase gradually as `score` rises.
- **Lose:** when `lives` reaches 0 → `isOver = true`, `won = false`.
- **Win:** when `score` reaches 8 while `lives > 0` → `isOver = true`, `won = true`.
- The game loop runs continuously via `requestAnimationFrame`. Good and bad items
must be visually distinct (e.g. color/shape).
## Required global contract (MUST be exposed on `window`)
```js
window.__game = {
score: 0, // number, starts at 0
frame: 0, // increments by 1 every animation frame
lives: 3, // remaining lives, starts at 3
isOver: false, // true once the game ends (win OR loss)
won: false, // true only on a win (score reached the target)
applyInput(dir) {}, // dir === 'left' or 'right'; moves the paddle that way
state() { // current normalized state; ALL x/y in 0..1
return {
playerX: 0, // paddle CENTER x, normalized 0 (left) .. 1 (right)
items: [ // EVERY currently-falling item, normalized coords
{ x: 0, y: 0, type: 'good' }, // type is 'good' or 'bad'
],
score: 0,
lives: 3,
isOver: false,
won: false,
};
},
};
```
## Rules
- **Important:** `score`, `frame`, and `lives` are live NUMBER values you keep
updated; `isOver` and `won` are BOOLEANS. They are NOT functions. Only
`applyInput` and `state` are functions. (i.e. read as `window.__game.score`,
not `window.__game.score()`.)
- The paddle must visibly move on `applyInput('left')` / `applyInput('right')`
(fixed step, clamped inside the canvas).
- `state().items` MUST list all on-screen falling items with correct normalized
`x`, `y`, and `type`, so an external controller can chase good items and dodge
bad ones.
- A good item only scores when it actually overlaps the paddle; a bad item only
costs a life when it actually overlaps the paddle (real collision, not a timer).
- Redraw every frame so the canvas is never blank.
- Keep it under ~200 lines of JS. Vanilla JS only.
Output ONLY the contents of `index.html`.
Output ONLY the complete contents of a single index.html file. No markdown, no
explanation, no code fences — just raw HTML starting with <!DOCTYPE html>.Monster battle battle/v2
best so far: glm-5.2 100/100
# Task: "Monster Duel" — a Pokémon-style turn-based battle
Build a single, self-contained `index.html`: a Pokémon-style 1-on-1 turn-based
monster battle on a `<canvas>` (about 720x480). The player's monster faces a CPU
enemy monster. NO external files, NO network, NO libraries.
## The battle
- Two monsters: the player's (lower-left) and the enemy's (upper-right). Each has
a name, HP (start e.g. 100), and an HP bar with numbers.
- The player has 3-4 moves (name + power). Show a Pokémon-style battle menu (a box
listing the moves) and battle text ("FOO used TACKLE!", "It dealt N damage!").
- On the player's turn, choosing a move deals damage to the enemy (scale by move
power; a little randomness is fine). Then the ENEMY automatically takes its turn
and damages the player.
- Faint: when a monster's HP reaches 0 → `isOver = true`, `winner = 1` (player) or
`2` (enemy). Show a win/lose banner.
- Animate via `requestAnimationFrame` (HP-bar tween, a simple attack flash). Draw
the two monsters (distinct shapes/colors), both HP bars, and the move menu.
## Required global contract (MUST be on `window`)
```js
window.__game = {
frame: 0, isOver: false, winner: 0, // live number/boolean — NOT functions; winner 0=none,1=player,2=enemy
applyInput(action) {}, // 'move0'|'move1'|'move2'|'move3' = perform that player move directly
// (no-op if it's not the player's turn or an animation is playing)
state() {
return {
player: { hp: 0, maxHp: 0, moves: [{ name: '' }] }, // hp/maxHp numbers; moves = the player's moves
enemy: { hp: 0, maxHp: 0 },
turn: 'player', // 'player' | 'enemy'
isOver: false,
winner: 0,
};
},
};
```
## Rules
- `hp`, `maxHp`, `frame`, `winner` are **live numbers**, `isOver` a **boolean** — NOT functions.
- `applyInput('move0')` must, on the player's turn, **actually reduce the enemy's hp**
(real damage, not just text). `state().player.moves` must list the player's moves.
- The enemy must fight back (reduce the player's hp on its turn).
- Keep it under ~300 lines of JS. Vanilla JS only.
Output ONLY the contents of `index.html` — start with `<!DOCTYPE html>`.
Output ONLY the complete contents of a single index.html file — no markdown, no
explanation, no code fences.3D scene (Three.js) three/v1
no submissions yet
# Task: "Orbital Diorama" — an animated 3D scene (Three.js)
Build a single, self-contained `index.html` that renders an **animated 3D scene**
on a `<canvas>` using **WebGL via Three.js**. NO external files, NO network, NO
imports.
## Preloaded
`THREE` (Three.js r150) is **already available as a global** — do NOT import it,
do NOT add a `<script src=...>` for it. Just use `THREE.*` directly.
## The scene
- A `THREE.WebGLRenderer` drawing to a canvas about 760×540, appended to the page.
- A `THREE.PerspectiveCamera` and a `THREE.Scene`.
- Real geometry (`BoxGeometry`, `SphereGeometry`, `TorusGeometry`, `ConeGeometry`…)
with materials, and `requestAnimationFrame` animation (rotate / orbit / bob).
## Push for richness (this is scored on elaborateness, finely)
Aim for a genuinely impressive, dense scene — not one cube:
- **Many meshes** — a rich scene has 20+ objects (a little city, a solar system
with planets + moons + rings + a starfield, a forest…). More objects score higher.
- **Layered lighting** — use 2–3 lights of different kinds (e.g. an `AmbientLight`
+ a `DirectionalLight`/`PointLight`, maybe a colored accent) for real shading.
- **Varied geometry & materials** — mix several geometry types and material colors;
consider `MeshStandardMaterial` so lighting reads.
- **Visual density** — fill the frame; a detailed, well-lit render scores higher
than a sparse one. Camera motion (orbit) is welcome.
## Required global contract (MUST be on `window`)
```js
window.__three = {
frame: 0, // live number — increment it every requestAnimationFrame tick
scene, // your THREE.Scene instance (so the scene can be introspected)
renderer, // your THREE.WebGLRenderer instance
camera, // your THREE.PerspectiveCamera instance
};
```
## Rules
- `frame` is a **live number** that goes up every animation tick (NOT a function).
- `scene` must be your actual `THREE.Scene` (it is traversed to count meshes &
lights — exposing it earns the "scene depth" and "lit" points).
- Everything in ONE `index.html`. Vanilla JS + the preloaded `THREE` only.
- Keep it under ~250 lines of JS.
Output ONLY the contents of `index.html` — start with `<!DOCTYPE html>`.
Output ONLY the complete contents of a single index.html file — no markdown, no
explanation, no code fences.Illustration (SVG) art/v1
best so far: glm-5.2 100/100
# Task: SVG illustration — "Fox under the moon" Create a single, self-contained `index.html` that draws **a fox sitting on the ground under a large crescent moon at night**, as a detailed inline `<svg>` vector illustration. ## Requirements - One `<svg>` with `viewBox="0 0 600 600"` that fills the page. Vector shapes only. - NO external images, NO network requests, NO `<script>` — pure SVG (inline CSS inside the SVG is fine). - Clearly include: the fox (body, head, ears, snout, an eye, legs, and a bushy tail), a crescent moon, many stars, and a ground / horizon line. ## Push for richness (this is scored on elaborateness, finely) Make it a genuinely polished, layered picture — aim high, not a handful of blobs: - **Lots of shapes** — a detailed render uses well over 60 elements (foreground, midground, background; texture; small accents). More real detail scores higher. - **A wide, cohesive palette** — many distinct colors (20+), used intentionally. - **Technique** — use `<linearGradient>`/`<radialGradient>` for shading AND at least one `<filter>` (e.g. a soft blur/glow) or a `<mask>`/`<clipPath>` for a real crescent or soft light. Mix several shape types (path, circle, ellipse, rect, polygon…), not just one. - **Depth & atmosphere** — sky gradient, glow around the moon, distant hills/trees, foreground grass, subtle shadow under the fox. Output ONLY the contents of `index.html` — start with `<!DOCTYPE html>`. Output ONLY the complete contents of a single index.html file — no markdown, no explanation, no code fences.
Coding & reasoning text/v2
best so far: grok-4.3 100/100
Answer ALL of the tasks below. For EACH task, copy its marker line EXACTLY, then put your answer on the following lines. For coding tasks put the function in a ```js code block. Do not add commentary. ===TASK eval_expr=== Write a JavaScript function `evalExpr(s)` that evaluates an arithmetic expression string and returns its numeric value. It must support +, -, *, / with correct operator precedence, parentheses, unary minus (e.g. -5 or 3*-2), decimals, and arbitrary spaces. Division is real (not integer) division. Respond with ONLY the function definition inside a single ```js code block — no explanation, no exports. ===TASK my_atoi=== Write a JavaScript function `myAtoi(s)` that converts a string to a 32-bit-style integer like C's atoi: skip leading whitespace, then read an optional single '+' or '-' sign, then read consecutive digits, stopping at the first non-digit; ignore the rest. If there are no digits, return 0. Do NOT throw. Respond with ONLY the function definition inside a single ```js code block — no explanation, no exports. ===TASK roman_to_int=== Write a JavaScript function `romanToInt(s)` that converts a valid Roman numeral string (uppercase, standard subtractive notation, values 1..3999) to its integer value. Respond with ONLY the function definition inside a single ```js code block — no explanation, no exports. ===TASK rle_compress=== Write a JavaScript function `compress(s)` that run-length-encodes a string: replace each MAXIMAL run of one character c of length n with c followed by n (always include the count, even when n is 1). Runs are consecutive only (so 'aabbaa' -> 'a2b2a2', not 'a4b2'). Empty string returns ''. Respond with ONLY the function definition inside a single ```js code block — no explanation, no exports. ===TASK min_coins=== Write a JavaScript function `minCoins(coins, amount)` that returns the minimum number of coins (each coin value usable unlimited times) needed to make exactly `amount`, or -1 if it is impossible. minCoins(coins, 0) is 0. Respond with ONLY the function definition inside a single ```js code block — no explanation, no exports. ===TASK wrap_text=== Write a JavaScript function `wrapText(s, width)` that greedily word-wraps the single-spaced string `s` so each line is at most `width` characters: put as many whole words as fit (separated by single spaces) on each line before starting a new one; never split a word (a word longer than width goes alone on its own line). Join lines with '\n'. Respond with ONLY the function definition inside a single ```js code block — no explanation, no exports. ===TASK digit_sevens=== How many times does the digit 7 appear when you write out every integer from 1 to 1000 inclusive? Answer with ONLY the number, nothing else. ===TASK weekday_100=== If today is Wednesday, what day of the week will it be exactly 100 days from now? Answer with ONLY the day name in lowercase, nothing else. ===TASK handshakes=== At a party every person shakes hands with every other person exactly once. There were 66 handshakes in total. How many people were at the party? Answer with ONLY the number, nothing else. ===TASK count_e=== How many times does the letter 'e' appear in this sentence: 'The eleven elephants entered the tent eagerly' ? Answer with ONLY the number, nothing else. ===TASK bat_ball=== A bat and a ball cost $1.10 in total. The bat costs $1.00 more than the ball. How much does the ball cost, in cents? Answer with ONLY the number, nothing else. ===TASK sequence=== What is the next number in this sequence: 2, 6, 12, 20, 30, ? Answer with ONLY the number, nothing else.