Tetris · deepseek-v4.1-flash

Let me build the Tetris game. Let me create index.html in /tmp/job-wEVcHG.

I'll write a complete self-contained implementation.

Key features:
- 10x20 board canvas
- 7 tetrominoes with SRS-ish spawn
- Controls: Left/Right move, Up rotate CW, Down soft drop, Space hard drop, P pause, R restart
- Score, lines, level, next preview
- Line clear scoring 100/300/500/800 * level
- Level up every 10 lines
- Game over
- Pause/Resume, Restart

Let me write clean code. I'll use requestAnimationFrame with gravity timing.

Let me implement rotation with basic wall kick attempts (try offsets) but reject if none work — that's allowed. Actually spec says wall kicks optional; I'll do simple kicks to be robust but must reject if blocked. Simple kicks are fine.

Let me write it.

Design: single canvas for board, small canvas for next.

Use standard tetromino shapes as matrices.

Piece colors.

Let me code.

Gravity: level 1 -> drop interval ~ 800ms, decrease. interval = max(80, 800 - (level-1)*70).

Implement soft drop: Down moves down, resets gravity timer. Hard drop: move to bottom, lock immediately.

Lock delay: simple immediate lock when can't move down after gravity tick. Soft drop just moves, if can't move, lock (classic).

Actually to feel responsive: on moveDown, if collision, lock.

Let me write.

State: board 20 rows x 10 cols, initialized 0.

Spawn position: piece at top. Use matrix and x = floor((10 - width)/2), y = -? For I piece etc. To keep legal spawn and avoid hidden rows, I'll spawn with y such that piece is at top visible rows. For I piece vertical rotation, matrix is 4x4 with fill on row 1 -> spawn y=0. Let's just use y=0 and ensure board has enough. For pieces 3x3 with top row empty, y=0. Let me define shapes each with matrix and spawn offset.

Standard tetromino matrices:
I = [[0,0,0,0],[1,1,1,1],[0,0,0,0],[0,0,0,0]] 4x4
J = [[1,0,0],[1,1,1],[0,0,0]]
L = [[0,0,1],[1,1,1],[0,0,0]]
O = [[1,1],[1,1]]
S = [[0,1,1],[1,1,0],[0,0,0]]
T = [[0,1,0],[1,1,1],[0,0,0]]
Z = [[1,1,0],[0,1,1],[0,0,0]]

Spawn x = floor((10 - cols)/2), y = 0. For I, matrix 4 wide, x=3. Row 1 is filled so appears at y=1. Fine. O at x=4.

Game over check: if spawn position collides.

Rotation: rotate matrix clockwise: newM[r][c] = m[n-1-c][r]. With kick offsets [0,0],[-1,0],[1,0],[0,-1],[...]. Try each, if valid use.

Let me now write the file.

Score display and next preview canvas.

Also show controls text.

Let me write.

I'll add keyboard handling preventDefault for arrows/space to avoid scroll.

Let me write full file.

Next piece sequence state: bag randomizer. Restart resets bag and sequence. Use 7-bag.

Let me write.

For rendering, block size 30 -> board 300x600. Next canvas 120x120.

Let me write the code carefully.

I'll include a start state? Game starts immediately.

Let me write.

Let me write the file.

Let me test in the browser.

Initial render looks good. Now let me verify behavior via the debug hook. Let me use browser evaluate? There's no evaluate action. I can use key presses. Let me do keyboard checks.

First piece is L (orange), next is J (blue). Let me move right, rotate, hard drop, then inspect state.

Actually I want to verify via DOM/state. The inspect only gives DOM text, not the board. Let me use keyboard then screenshot. To check state I could add visible output... Alternatively, I can use the debug hook via a script? The browser tool doesn't offer evaluate. Hmm.

I could temporarily display state in DOM, but the debug hook exists. I could check board via screenshot visually.

Let me press ArrowRight, ArrowUp, then Space, then inspect/screenshot.

Use key action. Note key action likely accepts text like "ArrowRight". Let me try.

Moved right. Now rotate up.

Rotation worked (L rotated). Now hard drop with Space.

The key tool needs text for space. Maybe "Space" or " ". Let me try "Space".

Hard drop worked: orange L locked at bottom (note it landed at column 3-5 area, but earlier it looked col 4-6; anyway). New piece J (blue) spawned at top, next preview advanced to T (purple). 

Now test pause/resume and restart. Press P.

Pause works. Resume with p.

Paused state resumed. The current J piece is still at top and hasn't dropped — fine because pause. Now restart. Press r. Also I want to verify scoring/line clear. Let me test restart first, then maybe create a line clear scenario using debug hook? Hard to via keyboard. But at minimum restart resets.

Let me also verify level-up logic by code inspection — it's fine.

Test restart with 'r'.

Restart works: board cleared (fresh Z piece at top), score/lines/level reset, new next piece.

Now I should verify line clearing and scoring. This is hard via keyboard but I can simulate via the debug hook. There's no evaluate tool. However, I can temporarily add a test harness? Actually, I can create a separate test by injecting code via a data URL? No network. 

Alternative: use the debug hook and drive with keyboard is too tedious to clear a line. But I can reason: clearLines logic. Let me double-check the splice/unshift logic with r++.

Loop r from ROWS-1 down to 0. If row full, splice(r,1) removes it, unshift adds empty at top; net rows count stays ROWS. Then r++ then loop's r-- -> same r re-checked. Since rows shifted down by one at indices < r, the row now at r is what was at r-1. So re-checking same index is correct. Good.

Scoring table multiplied by level. Level up every 10 lines. Good.

Game over: spawn collision -> nextPiece sets gameOver. But it references renderNext() after? Actually in nextPiece, if piece===null, sets gameOver and current=null, showOverlay, render, return. Good. But nextType was advanced before check. Fine.

One issue: in nextPiece, if gameOver, we don't update stats. Fine.

Potential bug: reset() sets started=true then calls nextPiece(). But `started` variable is used in game loop and pause. Fine.

Let me test a line clear using the debug hook by injecting a click? The browser tool has no JS eval. But I can temporarily modify the file to auto-run a test that clears a line and logs to console, run, then revert. That's a reasonable verification. Actually simpler: I can add a temporary query-based self-test? But reload uses same URL. Let me just temporarily add a script that drives board to a near-complete state and hard drops, then check. But I'd have to revert.

Given time, let me do a quick test harness: append to window.__tetris a function and use it via... no eval.

Actually the browser tool might refresh with the same file. I can temporarily inject an auto-test at the end of the script guarded by a global, reload, inspect console. Let me do that.

I'll add a temporary block: populate board bottom row with a gap, set current to an I piece positioned to fill gap, hardDrop. Then console.log state. But this changes initial game. Let me add it temporarily and then remove.

Actually simpler and safe: I'll write a temporary copy test.html with the same code plus test, run browser? The browser tool runs index.html presumably. It says "Run index.html". So must modify index.html.

Let me add a temporary IIFE test after reset at the bottom, using console.log, then check console via inspect. Then remove it.

Test: fill board row 19 (all but col 0), set a piece to fill col0. But hardDrop uses current. Let me directly manipulate via a new debug function. I'll just add code inside the script that sets board and current then hardDrop and logs.

But board/current are closure vars; my test code must be inside the IIFE. Let me add right before `reset();` at the end? Actually after reset call.

Let me insert test before window.__tetris assignment or after. I'll edit, test, then remove.

Plan test:
```
// TEMP TEST
(function(){
  board = makeBoard();
  for (var c=1;c<COLS;c++) board[ROWS-1][c]="I";
  current = { type:"O", matrix:[[1,1],[1,1]], x:-1, y:ROWS-3 };
  // need to fill col0 on bottom row: use O? O fills two columns. 
})();
```
Hmm to clear exactly one row with an O piece occupying two columns, fill bottom row cols 2..9 (8 cells) with garbage, then O at x=0 lands rows 18,19 cols0,1. Clears bottom row only (O occupies row19 cols0,1 plus row18 cols0,1). One line clear -> 100 pts * level1 = 100. lines=1.

Let me do that. Set board bottom row cols 2..9 = "I". current O x=0, y=100 (hard drop will move down until collision). hardDrop -> locks, clears row19, score 100, lines 1, level 1. Then log.

Also test 4-line (tetris) scoring perhaps. One test enough for line clear/score.

Let me apply temporary edit.

Wait, for the I piece matrix [[1],[1],[1],[1]] is 4x1, x=0. hardDrop will drop it into col0 rows 16-19. Fill other cols for last 4 rows. That clears 4 rows -> 800 * level 1 = 800, lines 4, level 1. Good.

But note after TEST1 hardDrop calls lockPiece -> clearLines -> nextPiece, which spawns a new current and modifies nextType. Then TEST2 resets board and current. Fine.

Reload and inspect console.

TEST1: score=100, lines=1. TEST2: score=800, lines=4. Note level stayed 1 after 4 lines — correct (needs 10). Also note the "next" preview advanced and a new O piece spawned after TEST2 (shown yellow O). Wait after TEST2 hardDrop, lockPiece clears 4 lines then nextPiece spawns new current (O) and next preview. The screenshot shows yellow O at top, red Z next. Good.

Now remove the temp test and restore.

Clean final state, no console errors (only sandbox warning). 

Let me verify the file has no leftover temp code and view final around the end.

No temp code, no external references. The exit code 1 is from grep -c finding 0 matches. Good.

The task done. Let me write brief report.