Tetris · hy3
Build a playable Tetris on a canvas with all seven tetrominoes, rotation, line clears, increasing speed, a next-piece preview, and score.
transcript · 4 messages
Build a playable Tetris on a canvas with all seven tetrominoes, rotation, line clears, increasing speed, a next-piece preview, and score.
thinking
I need to build a complete Tetris game in a single HTML file with: 1. Canvas for the game 2. All seven tetrominoes (I, O, T, S, Z, J, L) 3. Rotation 4. Line clears 5. Increasing speed 6. Next-piece preview 7. Score The game should be self-contained with no external resources. Let me structure this: - HTML structure with canvas and UI elements - CSS for styling - JavaScript for game logic Key components: 1. Game board (grid) 2. Tetromino definitions with rotation states 3. Game loop 4. Input handling (keyboard) 5. Collision detection 6. Line clearing logic 7. Score calculation 8. Next piece preview 9. Level/speed increase Let me write this out completely
I'll build a complete Tetris game in a single index.html file with all the requested features.
/workspace/index.html (8335 bytes)Successfully wrote 8335 bytes to /workspace/index.html
thinking
The user asked me to build a playable Tetris game with specific features. Let me review what I've created to make sure it has everything they requested: 1. ✅ All seven tetrominoes (I, O, T, S, Z, J, L) - Yes, defined in SHAPES and COLORS 2. ✅ Rotation - Yes, the rotate() method uses matrix rotation 3. ✅ Line clears - Yes, clearLines() function handles this 4. ✅ Increasing speed - Yes, dropInterval decreases with level 5. ✅ Next-piece preview - Yes, using nextCanvas 6. ✅ Score - Yes, with points for line clears and drops Let me verify the file was written correctly and check if there are any issues. The code looks complete and should work. Let me verify the file exists.
I've created a complete Tetris game in `/workspace/index.html` with all the requested features: **Features implemented:** - **All 7 tetrominoes**: I (cyan), O (yellow), T (purple), S (green), Z (red), J (blue), L (orange) - **Rotation**: Arrow Up key rotates pieces with collision detection - **Line clears**: Detects complete rows and clears them with proper scoring - **Increasing speed**: Level increases every 10 lines, drop speed increases - **Next-piece preview**: Shows the upcoming piece in a side panel - **Score system**: Points for line clears (100/300/500/800 per 1/2/3/4 lines) multiplied by level, plus points for soft/hard drops **Controls:** - `← →` Move left/right - `↑` Rotate - `↓` Soft drop (+1 point per cell) - `Space` Hard drop (+2 points per cell) - `P` Pause **Scoring:** - Single line: 100 × level - Double: 300 × level - Triple: 500 × level - Tetris: 800 × level The game is fully self-contained with no external resources - just open `index.html` in a browser to play!
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Functional Tetris with piece falling, stacking, next-piece preview, score/level tracking, and responsive controls.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.