Tetris - AI-Assisted Development Log

A complete record of how I created Tetris from scratch using AI tools, and how I leveraged AI to solve problems encountered during testing.

Project Overview

Tetris is a classic HTML5 Tetris game developed with AI assistance. This document records how to use AI tools to create a game from scratch, and how to leverage AI to solve problems encountered during testing.

Tech Stack:

• Vanilla JavaScript (ES6+)
• HTML5 Canvas
• CSS3 Responsive Design

Core Features:

• Classic Tetris gameplay
• Single-player mode
• Touch/mouse drag controls (left/right movement, tap to rotate)
• Downward drag for accelerated drop
• Quick swipe down for hard drop
• Power-up system (hole filling)
• Particle effects and screen shake
• Sound effects system (line clear, collision, rotation)
• Mobile and desktop compatibility

---

AI Usage Workflow

Phase 1: Creating the Base Game

Goal: Get AI to help build a playable game prototype

Prompt Example:

Help me create a Tetris game using HTML5 Canvas and JavaScript.

AI Output Highlights:

• Created complete game loop
• Implemented block rotation and movement
• Collision detection (boundaries and locked blocks)
• Scoring and leveling system

---

Phase 2: Mobile Touch Controls

Problem: PC keyboard controls don't work on mobile, touch controls are needed.

How to Describe to AI:

Please add mobile touch controls:
- Left/right drag to move blocks
- Tap screen to rotate blocks
- Quick swipe down for hard drop
- Compatible with mouse operations

AI Results:

• Implemented drag control based on touch coordinate differences: records last touch position, calculates horizontal difference, triggers left/right movement when threshold is exceeded
• Implemented tap-to-rotate logic: in touchend, determines if finger had significant movement; if displacement is minimal and press duration is short, treats as tap and triggers rotation
• Also compatible with mouse events through unified event mapping for PC use
• Status: ⚠️ First generation had "one tap triggers twice" issue, requires Phase 3 fix
• Prompt Optimization Suggestion: Initial prompt could add "note that mobile browsers simulate mouse events, please implement event isolation to avoid duplicate triggers"

---

Phase 3: Fix Double-Trigger Bug

Problem: One tap on mobile causes block to rotate or move twice.

How to Describe to AI:

One touch on mobile counts as two operations.
In the touch control code, both touch and mouse events might be triggered.
Please help me fix this issue.

AI Analysis:

• Issue 1: Browser simulates mouse events after touch events
• Issue 2: Both touchstart and touchend can trigger operations

AI Results:

• Registered touch events with { passive: false } option to allow preventDefault() to block default behavior
• Called stopPropagation() in touch event handlers to prevent event bubbling
• Added isTouching flag variable, set to true on touch start and false on touch end
• Checked isTouching flag in mouse event handlers; if true, return immediately to ignore mouse events triggered by touch
• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Directly state "might be duplicate triggering from touch and mouse events" helps AI quickly locate event bubbling and browser compatibility mechanisms

---

Phase 4: Fix Accidental Trigger at Game Start

Problem: After clicking start, finger still on screen immediately triggers movement or hard drop, causing instant game over.

How to Describe to AI:

After game starts, if finger is still on screen, it immediately triggers movement or hard drop,
causing block to lock instantly and game to end.
How to ignore touch input when game just starts?

AI Results:

• Added gameJustStarted boolean flag, initially false
• In game start event (touchstart), if game hasn't started, set gameJustStarted = true
• Used setTimeout to reset gameJustStarted to false after 1000ms (1 second)
• Checked this flag at the beginning of all touch event handlers; if true, return immediately to ignore touch input
• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Clearly describe the specific scenario of "finger not leaving screen triggers operation", AI can accurately provide "protection period/cool-down time" design pattern

---

Phase 5: Downward Drag for Accelerated Drop

Problem: Need to add downward drag for accelerated drop, but finger lift after drag triggers hard drop.

How to Describe to AI:

Please add downward drag for accelerated drop:
- Start acceleration when dragging down more than 30px
- Continue acceleration while finger stays in downward position
- Don't trigger hard drop when finger lifts after drag

AI Results:

• Added isFastDropping boolean flag and fastDropY position tracking variable
• During touch move, detected vertical drag distance: when exceeding 30px,判定为 downward acceleration drag
• After triggering acceleration, set flag to true and execute drop movement every 50ms, while updating reference Y coordinate
• In handleTouchEnd, checked flag: if true, prevent event bubbling and return directly, skip hard drop logic
• Status: ⚠️ After initial implementation, horizontal movement during acceleration caused misalignment, requires Phase 6 fix
• Prompt Optimization Suggestion: Prompt could pre-constrain "please disable horizontal movement during acceleration to avoid player misoperation causing block misalignment"

---

Phase 6: Disable Horizontal Movement During Acceleration

Problem: Horizontal movement during accelerated drop causes sudden block misalignment.

How to Describe to AI:

During accelerated drop, left/right movement causes sudden block misalignment,
making it easy for players to place blocks incorrectly.
How to disable horizontal movement during acceleration?

AI Results:

• Added isFastDropping check at the beginning of touch move handler
• If flag is true, prevent event bubbling and return directly, skip all horizontal movement logic
• Only continue horizontal drag detection when not in acceleration state
• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Directly describe "side effects of current state" (like misalignment, poor experience), AI will prioritize state isolation solutions

---

Phase 7: Power-Up System Design

Problem: Want to add power-up system to increase game fun.

How to Describe to AI:

Please add power-up system:
1. 15% chance to get power-up when clearing lines
2. Hole-fill power-up: automatically fills gaps in bottom row
3. Power-ups can stack, show power-up bar at bottom
4. Tap power-up to use

AI Results:

• Defined power-up type array with type identifier, name, color, and icon emoji
• Hole-fill power-up: searches from bottom row upward for incomplete rows, records empty positions, uses animation to fill each gap every 100ms
• Power-up acquisition: 15% random chance each line clear, uses array storage to support stacking
• Status: ⚠️ After initial implementation, power-up bar showed duplicate icons, requires Problem 5 optimization
• Prompt Optimization Suggestion: Specify in requirements "power-up bar should merge same-type power-ups and show quantity", can avoid subsequent UI rework

---

Phase 8: UI Layout Optimization

Problem: Top UI info overlaps with music toggle in top-right corner.

How to Describe to AI:

Score, level, and lines in top UI bar are all center-aligned,
overlapping with music toggle in top-right corner.
How to align content to the left?

AI Results:

• Applied left-align, center-align, and right-align layout for score, level, and lines respectively
• Score left-aligned at left padding, level centered at canvas horizontal center, lines right-aligned on right side
• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: When describing layout issues, directly state "positions of overlapping elements" and "expected distribution", AI can directly provide coordinate allocation solution

---

Testing Issues and AI Solutions

Issue 1: Double-Trigger on Touch

Symptom: One tap on mobile causes block to rotate twice

Question to AI:

One touch on mobile counts as two operations.

AI Solution: Used { passive: false } option when registering touch events, called stopPropagation() in touch handlers to prevent event bubbling, added isTouching flag variable to prevent touch events from triggering subsequent mouse events

• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Adding "confirmed simultaneous triggering of touchstart/touchend and mousedown/mouseup" helps AI directly provide event isolation solution

---

Issue 2: Accidental Trigger at Game Start

Symptom: After clicking start, finger still on screen immediately triggers movement causing game over

Question to AI:

After game starts, finger still on screen immediately triggers movement, causing instant game over.

AI Solution: Added gameJustStarted boolean flag, set to true on game start, used setTimeout to reset to false after 1 second; checked flag in all touch event handlers, ignored touch input during protection period

• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Stating "start button and game canvas share same touch area" helps AI prioritize state cooling mechanism over simply hiding button

---

Issue 3: Accidental Hard Drop on Drag Release

Symptom: After downward drag acceleration, finger lift triggers hard drop

Question to AI:

After downward drag acceleration, finger lift triggers hard drop.

AI Solution: Added isFastDropping flag, set to true when downward drag exceeds threshold (30px); in handleTouchEnd, checked flag, if true prevented event bubbling and returned directly, skipped hard drop logic

• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Clarifying "expected behavior at end of acceleration drag (only stop acceleration, no hard drop)" helps AI accurately distinguish drag end from click end boundary conditions

---

Issue 4: Misalignment During Accelerated Horizontal Movement

Symptom: Horizontal movement during accelerated drop causes sudden block misalignment

Question to AI:

Horizontal movement during accelerated drop causes sudden block misalignment.

AI Solution: Added isFastDropping check at beginning of touch move handler, if true returned directly, skipped all horizontal movement logic, ensured horizontal drag completely ignored during accelerated drop

• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Directly pointing out "visual jumping caused by state conflict" helps AI prioritize mutual exclusion logic over coordinate calculation modification

---

Issue 5: Duplicate Power-Up Display

Symptom: Same power-up shows multiple icons, not concise enough

Question to AI:

Power-up bar should show quantity with numbers, not multiple icons.

AI Solution: Counted quantity of each power-up type, only show one icon in power-up bar, display ×count label at top-right of icon to show quantity, avoid displaying multiple same icons

• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Directly providing UI expectation in prompt ("merge display + quantity badge like inventory system") helps AI output complete rendering logic in one shot

---

Issue 6: Click Doesn't Restart After Game Over

Symptom: Clicking canvas after game over has no response

Question to AI:

After game over, clicking canvas cannot restart game.

AI Solution: In canvas click event handler, checked isGameOver state; if game ended, called reset() method to reset and restart game instead of executing normal game operations

• Status: ✅ Fixed in one attempt
• Prompt Optimization Suggestion: Stating "current click event only handles in-game logic, doesn't cover end state" helps AI supplement state branch handling

---

Tips for AI Collaboration

1. Describe Problems Clearly

• ❌ Vague: "Touch control has issues"
• ✅ Specific: "When game starts and I tap, finger still on screen immediately triggers movement causing game over"

2. Provide Context

• Explain project structure (e.g., GameBase class inherited)
• Attach relevant code snippets
• Mention attempted solutions

3. Iterate Step by Step

Don't ask AI to complete all features at once, instead:

1. First implement core features (base Tetris)
2. Test and discover issues
3. Describe issues to AI
4. Apply solutions
5. Continue testing next feature

4. Verify AI Code

AI-generated code needs to be:

• Tested on real devices (especially mobile)
• Checked for edge cases (like touch at game start)
• Verified for performance (particle count, animation smoothness)

5. Keep Iteration Records

Record each conversation with AI and solutions, for:

• Tracing problem origins
• Understanding modification reasons
• Future maintenance reference

---

Development Timeline

Phase	Issue/Requirement	AI Solution	Status	Iterations
1	Create base game	Complete game framework	✅	1
2	Touch control	Drag + tap	⚠️ Need fix for double trigger	2
3	Double-trigger bug	Prevent bubbling + flag	✅	2
4	Accidental trigger at start	Protection flag	✅	2
5	Downward drag acceleration	Continuous acceleration logic	⚠️ Need disable horizontal movement	3
6	Disable horizontal during acceleration	State check	✅	1
7	Power-up system	Hole fill	⚠️ Need UI display optimization	3
8	Power-up bar UI optimization	Merge display + quantity badge	✅	2
9	Speed curve adjustment	Reduce level-up speed	✅	1
10	UI layout optimization	Left-center-right distribution	✅	1
11	Mobile layout optimization	Responsive font and spacing	✅	2

---

Common Prompt Templates

Create New Feature

Help me implement [feature description], need to include:
1. [specific requirement 1]
2. [specific requirement 2]
3. [specific requirement 3]

Please use [tech stack/framework], follow [project standards].

Fix Bug

Encountered an issue:
[Symptom description]
[Occurrence conditions]
[Expected behavior]
[Actual behavior]

Here's relevant code: [attach code]

Code Optimization

Please optimize this code:
[Goal: performance/readability/maintainability]
[Constraints]

Code Explanation

Please explain how this code works:
[attach code]

Specifically:
1. [specific point of interest 1]
2. [specific point of interest 2]

---

Lessons Learned

1. AI is assistant, not replacement - Need to understand code principles, especially core logic like touch control and collision detection, must understand yourself.

2. Test-driven development - Test on real devices after every modification. Mobile issues are especially important, PC simulator cannot completely replace real device testing.

3. More specific problem description, more effective AI help - Vague problems get vague answers. Include in problem description: symptom, conditions, expectations, actual results.

4. Keep conversation records - Convenient for tracing back and knowledge accumulation. Record every important modification in documentation.

5. Multiple iterations are normal - Rarely have perfect solution in one attempt. Both touch control and power-up system iterated multiple times before refinement.

6. Protection period mechanism - For touch start, adding brief protection period (like 1 second after game start) can effectively prevent accidental touches.

7. State management - Using clear state flags (like isFastDropping, gameJustStarted) makes logic clearer and avoids state conflicts.

---

Play the Game

Ready to try it yourself? Play Tetris now!

Want to build your own game? Check out our AI Coding Tools and AI Art Tools collections.