Tetris · mimo-v2.6-flash

Let me build a Tetris game in a single index.html file. Let me write it carefully.

Key features:
- 10x20 board
- 7 tetrominoes with spawn positions
- Controls: Left/Right move, Up rotate CW, Down soft drop, Space hard drop
- Show controls
- Rotation rejection if blocked (no wall kicks)
- Lock, clear rows, spawn next
- Score display, lines, level, next preview
- Scoring 100/300/500/800 * level
- Level 1 start, gravity speed up every 10 lines
- Game over if spawn blocked
- Pause/Resume, Restart

Let me write it. Then verify with browser tools.

I'll use standard tetromino definitions with rotation states. For simplicity, use matrices per piece with rotations computed by rotating the matrix, and spawn positions.

Board: 10 cols, 20 rows visible. I'll allow spawn in rows above (hidden) or just spawn at top visible rows. Simpler: spawn at top rows 0-1 within visible board.

Let me define pieces as matrices:

I: 4x4
```
0000
1111
0000
0000
```
Spawn at col 3, row 0. Actually with matrix 4x4 and row 1 filled, spawning row 0 puts I block at row 1. Good.

O: 2x2 or 4x4. Use 2x2:
```
11
11
```
Spawn col 4, row 0.

T: 3x3
```
010
111
000
```
Spawn col 3 (or 4), row 0. Actually standard spawn centered: col = floor((10-3)/2) = 3.

S: 3x3
```
011
110
000
```
Z: 3x3
```
110
011
000
```
J: 3x3
```
100
111
000
```
L: 3x3
```
001
111
000
```

All spawn at row 0, col 3 (for 3-wide), col 3 for I (4-wide, center-left), col 4 for O.

Rotation CW: transpose+reverse rows. For I 4x4 rotation works. O 2x2 rotation keeps same.

Collision: check cells of piece matrix; reject if out of bounds (x<0, x>=10, y>=20) or y<0? If y<0 allowed... With spawn at row 0, rotations of I in 4x4 matrix at row 0: the filled cells are at row 1 of matrix. When rotated CW, I becomes column at matrix col 2 (or 1?). Let's compute:

I matrix 4x4, filled row 1: 
```
0000
1111
0000
0000
```
Rotate CW: new[i][j] = old[3-j][i]. Row 0 of result: new[0][j] = old[3-j][0] → all 0 (old rows 3,2,1,0 col 0: row1 col0=1 → j where 3-j=1 → j=2 → new[0][2] = old[1][0] = 1). Hmm let me redo: new[i][j] = old[n-1-j][i]. So new[0][j] = old[3-j][0]. old[3][0]=0, old[2][0]=0, old[1][0]=1, old[0][0]=0. So new[0][0]=old[3][0]=0, new[0][1]=old[2][0]=0, new[0][2]=old[1][0]=1, new[0][3]=old[0][0]=0. Then column 1: new[1][j] = old[3-j][1]: new[1][2] = old[1][1] = 1. So filled column j=2, rows 0..3? new[0][2]=1, new[1][2]=1, new[2][2]=old[1][2]=1, new[3][2]=old[1][3]=1. Yes vertical line at col 2. So at spawn x=3, line at x=5, rows 0-3. Fine, all within board.

Rotation at left wall: piece at x=0, 3x3 matrix rotation may produce cells at col -? All 3x3 rotations keep within 3x3 so x in 0..2, fine. Rotation only fails on occupied cells then, or for I when x such that col 2 index exceeds... x+2 <= 9 needed; if x=8, x+2=10 out of bounds → reject. Good, that's the "leave the board" rejection.

Movement: same checks.

Gravity: interval based on level. Level = floor(lines/10)+1. Speed: e.g., base 800ms, minus 60ms per level, min ~80ms. Or formula: Math.max(80, 800 - (level-1)*70).

Scoring: line clears 100/300/500/800 * level. Soft drop maybe +1 per row, hard drop +2 per row — optional; not required. I'll add small bonuses? Might complicate verification of scores. Restart resets score anyway. I'll skip drop bonuses to keep scoring predictable, or add them... Requirement says award 100/300/500/800 * level for clears. Adding drop bonuses could confuse. Skip.

Game loop: requestAnimationFrame with delta time, or setInterval. I'll use rAF with timestamp accumulation.

Pause: stops gravity and input (except pause/restart keys). Keys: P or Escape to pause? Show button too. Restart button.

Game over: show overlay, block input except restart.

Next-piece preview: canvas.

Also render: grid, ghost piece (optional — I'll include, it's easy).

Verify via browser: move/rotate first piece, hard drop, check lock/spawn/preview advance, pause/resume, restart.

To verify programmatically, I could expose a debug hook: window.__game state access. That's fine and harmless. I'll expose window.tetris = game object for testing? Could be useful. I'll add a small `window.__tetris` reference for inspection.

Let me write the file.

Structure:
- Header: title, stats (score, lines, level), next preview
- Canvas board
- Controls list
- Buttons: Pause/Resume, Restart
- Overlay for pause/game over

Layout: flex container.

Let me write code carefully.

```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Tetris</title>
<style>...</style>
</head>
<body>
...
<script>...</script>
</body>
</html>
```

JS:

```js
const COLS = 10, ROWS = 20, CELL = 30;
const SHAPES = {
  I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]],
  O: [[1,1],[1,1]],
  T: [[0,1,0],[1,1,1],[0,0,0]],
  S: [[0,1,1],[1,1,0],[0,0,0]],
  Z: [[1,1,0],[0,1,1],[0,0,0]],
  J: [[1,0,0],[1,1,1],[0,0,0]],
  L: [[0,0,1],[1,1,1],[0,0,0]]
};
const COLORS = { I:'#3ec6e0', O:'#e8d44d', T:'#b45de0', S:'#5dd45d', Z:'#e05d5d', J:'#5d7be0', L:'#e8953e' };
const SPAWN = { I:{x:3,y:0}, O:{x:4,y:0}, T:{x:3,y:0}, S:{x:3,y:0}, Z:{x:3,y:0}, J:{x:3,y:0}, L:{x:3,y:0} };
```

Hmm O at x=4: 2 wide, cols 4-5 centered (10 cols, center between 4,5). Good.

Wait: standard spawn — pieces spawn in rows 21-22 above visible field; here spawn row 0. For 3x3 matrices with filled row 1 (T/S/Z/J/L), the visible blocks land at row 1. Row 0 empty. That's fine — pieces appear at row 1. For O at row 0. For I: blocks at row 1.

Actually check: if top row of matrix is filled (like Z: row0 = 110, row1=011), spawn at row 0 → blocks at rows 0-1. Fine.

Spawn collision check: if collides → game over.

Game state:
```js
const game = {
  board: createBoard(), // ROWS x COLS of null/color
  current: null, next: null,
  score: 0, lines: 0, level: 1,
  running: false, paused: false, over: false,
  dropInterval: 800, dropTimer: 0, lastTime: 0,
  bag: []
};
```

7-bag randomizer for piece sequence; restart resets bag and sequence state ("piece sequence state" reset — yes, reset bag and next).

Functions: newBag, takePiece, spawn, collides, merge, clearLines, rotate, move, hardDrop, softDrop, update, draw.

Let me now write full file.

Draw: board cells with color and slight inner shading; grid lines; ghost; current piece.

Preview canvas: 4x4 cells at 20px.

Overlay: absolutely positioned over canvas container.

Buttons: Pause toggles text.

Key handling: prevent default for arrows/space.

Also keydown repeat: allow e.repeat for movement (fine), but hard drop on repeat could be weird — piece is gone after hard drop so fine.

Timer: rAF loop always running; update only when running && !paused && !over.

Gravity levels: dropInterval = Math.max(80, 800 - (level-1)*70).

On lock: merge, clear lines (score += points*level, lines += n, level = floor(lines/10)+1, dropInterval update), spawn next. If spawn collides → over.

Soft drop: move down if possible; reset dropTimer. Award nothing.

Hard drop: while move down possible, y++ ; lock immediately.

Let me write it now.

Also add touch buttons? Not required. Skip for brevity, maybe add small on-screen buttons for mobile — not required, skip.

Verification plan: open in browser, use inspect/console to read state, simulate keys via browser `key` action. Let's write file first.

I'll write the file with the write tool.

Let me draft the full HTML.

CSS: dark theme, centered layout, canvas with border.

Now careful with code correctness.

```js
function rotateMatrix(m){
  const n = m.length;
  const res = [];
  for(let i=0;i<n;i++){ res.push(new Array(n).fill(0)); }
  for(let i=0;i<n;i++) for(let j=0;j<n;j++) res[j][n-1-i] = m[i][j];
  return res;
}
```
That's CW: new[j][n-1-i] = old[i][j]. Equivalent to new[r][c] = old[n-1-c][r]. Earlier I derived new[i][j]=old[n-1-j][i]; here res[j][n-1-i]=m[i][j] → let r=j, c=n-1-i → i=n-1-c, j=r → res[r][c] = m[n-1-c][r]. Same. Good.

collides(board, shape, x, y):
```js
for(i rows) for(j cols) if shape[i][j]:
  const bx = x+j, by = y+i;
  if(bx<0||bx>=COLS||by>=ROWS||by<0) return true;  // by<0 → out of board, reject
  if(board[by][bx]) return true;
```
Since spawn y=0 and we never go above 0 (moving down only, rotation within matrix at y>=0; y could be 0 and matrix rows all >=0 so by>=0 always). Keep the check anyway.

Hmm but with y=0 and 3x3 matrix, piece blocks could be at row 0 or 1 — that's visible. Good.

Wait — there's a subtlety: pieces spawn at y=0 but for T/S/Z/J/L, top matrix row may have filled cells (Z row0 = 110). So block at row 0. Fine.

collides check for spawn: yes.

Ghost: compute drop distance.

draw(): 
- clear canvas, fill bg
- grid lines
- locked cells
- ghost (outline)
- current piece
- on game over maybe dim.

Preview: draw next shape centered.

HTML stats: score, lines, level spans.

Overlay text: "Paused" / "Game Over — Score: X". Buttons still active.

Pause button: toggles pause only when game started and not over. Label "Pause"/"Resume".

Restart: full reset.

Keyboard: P or Escape toggles pause; R restarts? Show in controls. Also Enter? Keep: P pause, R restart.

Let's write.

Also expose `window.__tetris = game` plus helper functions for verification? I'll expose `window.__tetris` with reference to state and functions like `hardDrop` etc. Actually key simulation via browser tool should work: browser action "key" with text. I'll try.

Write the file now.

For the canvas size: 10*30=300 wide, 20*30=600 tall. Good.

Let me write everything.

One more thing: lock delay — not required; hard drop locks immediately, gravity lock on inability to move down (simple: when gravity tick can't move down → lock). That's classic simple behavior. Acceptable.

Actually common simple approach: on gravity tick, if can move down → move; else lock. Fine.

Input during pause: ignore movement keys.

Also ignore keys when over (except restart).

Now write file.

Also prevent scrolling with space/arrows: e.preventDefault for those keys.

Buttons focus: after clicking button, space might re-trigger button click. To avoid, blur buttons after click, and/or prevent default on space always. keydown preventDefault on space should stop button activation? Button activation happens on keyup for space? Actually for buttons, space triggers click on keyup, and keydown default is prevented by preventDefault → click won't fire. But safest: call e.currentTarget.blur() in click handlers.

Write it.

Estimated code ~450 lines. Let's go.

Let me build the Tetris game in index.html.

Let me build the game. I'll write index.html with full Tetris implementation.

Let me plan:
- Canvas 10x20 board, cell size ~30px → 300x600.
- Seven tetrominoes with SRS-like rotations but wall kicks optional. I'll implement simple rotation with basic kicks (try offsets) — optional, can just reject. Let's implement basic kick offsets to make it playable, but requirement says reject if blocked is fine. I'll implement simple kicks [0,-1,1,-2,2] horizontal and y offsets — but must ensure "Reject moves and rotations that overlap occupied cells or leave the board" — with kicks, a rotation that's blocked at all kick positions is rejected. That satisfies.

Actually simpler: reject rotation if new position invalid (no kick). But kicks improve playability. I'll do a small kick set, still rejecting if all fail. That's compliant ("if unsupported, reject"). Hmm, "Wall kicks are optional; if unsupported, reject the blocked rotation without changing the piece." Implementing kicks is fine too. I'll implement basic kicks.

- Spawn positions: standard — pieces spawn at columns 3-4 area, top rows. I'll define shapes in rotation states with spawn at row 0 (or row -1 for I). Simpler: define each piece as list of cells in spawn orientation, positioned so it fits in visible board at rows 0-1.

Legal spawn: place so cells are within board and empty. I'll define spawn column offsets.

Pieces:
I: 4 wide, cells at row 0 (col 3-6) or row 1. Spawn at row 0, cols 3..6? Actually typically I spawns on row 20 (hidden). With only 20 visible rows, spawn at row 0.
O: cols 4-5, rows 0-1? O is 2x2 → cols 4,5 rows 0,1.
J: 3x3 with cells (0,0),(0,1),(0,2),(1,2)? J piece: 
J = XX X / ..X ... standard J: cells (0,0),(1,0)... let's define with matrices.

Define shapes as matrices:
I: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] — spawn row -1? To be safe, use spawn row 0 with matrix where row1 filled → cells at row1. That places cells at visible row 1. Fine.

Actually simpler: define matrices and spawn at row 0, col 3 (for 4-wide) and col 3 for 3-wide. O spawn col 4.

Matrices:
I = [[1,1,1,1]] (1x4) — rotations produce 4x1.
O = [[1,1],[1,1]]
T = [[0,1,0],[1,1,1]]
S = [[0,1,1],[1,1,0]]
Z = [[1,1,0],[0,1,1]]
J = [[1,0,0],[1,1,1]]
L = [[0,0,1],[1,1,1]]

Rotation: rotate matrix clockwise/counter. For I 1x4 rotating gives 4x1, need pivot handling — matrix rotation of non-square: I'll pad to square for rotation. Standard approach: represent each piece in a 4x4 box for I, 3x3 for others (O in 2x2 or 3x3). Use fixed-size square matrices and rotate within. That gives reasonable behavior with basic kicks.

I'll use:
I: 4x4 with row1 filled: [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] — but then spawn cells at row 0+1=1, cols 3..6. Fine.
Others 3x3, O as 2x2 (rotation of even matrix works fine actually: rotate 2x2 → same shape roughly). Rotating [[1,1],[1,1]] stays same. Fine.

Spawn: T 3x3 at col 3, row 0 → cells row1 col4, row1 cols3-5... T matrix [[0,1,0],[1,1,1]] at row0: row0 col4=1 (center top), row1 cols3,4,5. Good.

Gravity: interval based on level: e.g. max(80, 1000 - (level-1)*80) ms. Increase level every 10 lines: level = 1 + floor(lines/10).

Scoring: line clears 100/300/500/800 * level. Soft drop maybe +1 per cell, hard drop +2 per cell (optional, not required; could add but then "score reset" check — restart resets anyway). I'll skip extra points or add small ones? Verification: "check the cleared board, score, and level" after restart → all zero-ish (level 1). Keep simple: only line-clear scoring to avoid confusion. Maybe soft/hard drop points are typical but not required. Skip.

Controls: ArrowLeft/Right/Up/Down, Space. Prevent default for arrows/space. Pause: P or button. Restart button.

Next preview: canvas showing next piece.

Game loop: requestAnimationFrame with drop timer, lock delay simple (lock immediately when can't move down on gravity tick? Standard: when piece can't move down, lock on next tick or after lock delay). Simple approach: on gravity tick, if can move down → move; else lock immediately. That's acceptable.

Hard drop: move down until blocked, lock.

Lock: write cells to board, clear full rows, score, spawn next. If spawn invalid → game over.

Game over overlay, pause overlay.

Render: draw grid, board cells with colors and slight styling, ghost piece (optional, nice), current piece, preview.

Let's write it.

Keys handling: ignore key repeat? Allow repeat for left/right/down (browser key repeat fine).

Also mobile? Not required.

Let me write the file.

Random piece sequence: 7-bag randomizer for "piece sequence state" — restart resets sequence state. I'll implement bag: refill shuffled bag when empty; restart resets bag and current/next.

Now code:

```js
const COLS=10, ROWS=20;
const SHAPES = {
 I:{size:4, matrix:[[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]], color:'#3fd8f5'},
 O:{size:2, matrix:[[1,1],[1,1]], color:'#f7d84b'},
 T:{size:3, matrix:[[0,1,0],[1,1,1],[0,0,0]], color:'#b455e6'},
 S:...green, Z:red, J:blue, L:orange
};
```

Spawn col: for size 3 → col 3 (cells cols 3-5, center col4), for I size4 → col 3, O size2 → col 4.

Spawn row: 0 for all; for I cells at row 1. Check overlap → game over.

Rotation CW: matrix[y][x] → new[x][n-1-y].

Kick table simple: offsets [[0,0],[-1,0],[1,0],[-2,0],[2,0],[0,-1]] (y negative = up). Since spawn at top, upward kicks fine.

Actually rotation within board: piece near bottom rotating a 3x3 box where cells extend below — reject via cell overlap check (cells outside board are invalid). Good.

Line clear animation: keep simple, immediate removal with a flash effect maybe. Keep immediate.

HUD: score, lines, level, next canvas, controls list, buttons Pause/Resume, Restart.

Write it now.

Draw: cell size computed from canvas size; canvas 300x600 (30px cells) plus preview 120x120.

Also draw ghost.

Let me write full HTML.

Overlay messages positioned over board via absolutely positioned div.

Pause: toggle; when paused, stop gravity (loop checks state). Restart: reset all.

Edge: space triggers pause button focus issues — prevent default and blur buttons? I'll preventDefault on space keydown.

Verification plan: use browser tool to load, screenshot, press keys, inspect DOM (score etc.), test pause/restart. Let's write.

Drop speed: level speed table: speed = Math.max(60, 900 * Math.pow(0.85, level-1))? Simpler: [1000,850,700,560,430,320,230,160,110,80,60,...]. I'll compute: Math.max(70, 1000 - (level-1)*90). Level increases every 10 lines.

Now write file.

Key handling for ArrowDown soft drop: move down one row per keydown; if blocked, do nothing (no lock instant? Standard soft drop doesn't lock). Fine.

Lock logic: on gravity tick when can't move down → lock. But if soft-dropped to floor and gravity hasn't ticked... gravity tick will lock soon after. Fine. Actually better: track "grounded" and lock after small delay; keep simple: lock on tick.

Hmm but soft drop to floor then immediately pressing space: hard drop locks anyway.

Let's write code carefully.

render loop:

```js
let last=0, dropCounter=0;
function loop(t){ ... }
```

I'll write it.

Also show controls text.

Let me produce the file.

Let me write the file.

I need to write index.html immediately.