[{"data":1,"prerenderedAt":13},["ShallowReactive",2],{"$fNHKqLNyVhQ1hlAaYNX8LP-8lhrFJl3oxGk-kLGO5h9A":3},{"title":4,"description":5,"date":6,"category":7,"icon":8,"coverImage":9,"contentHtml":10,"_path":11,"_id":12},"Tetris - AI-Assisted Development Log","How I built a mobile-first Tetris game using AI assistance, from prototype to polished game with touch controls and power-up system.","2026-04-27","Tutorial","🧱","\u002Fblog\u002Ftetris-dev-cover.svg","\u003Ch1>Tetris - AI-Assisted Development Log\u003C\u002Fh1>\n\u003Cp>A complete record of how I created Tetris from scratch using AI tools, and how I leveraged AI to solve problems encountered during testing.\u003C\u002Fp>\n\u003Ch2>Project Overview\u003C\u002Fh2>\n\u003Cp>\u003Cstrong>Tetris\u003C\u002Fstrong> 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.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Tech Stack:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Vanilla JavaScript (ES6+)\u003C\u002Fli>\n\u003Cli>HTML5 Canvas\u003C\u002Fli>\n\u003Cli>CSS3 Responsive Design\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>Core Features:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Classic Tetris gameplay\u003C\u002Fli>\n\u003Cli>Single-player mode\u003C\u002Fli>\n\u003Cli>Touch\u002Fmouse drag controls (left\u002Fright movement, tap to rotate)\u003C\u002Fli>\n\u003Cli>Downward drag for accelerated drop\u003C\u002Fli>\n\u003Cli>Quick swipe down for hard drop\u003C\u002Fli>\n\u003Cli>Power-up system (hole filling)\u003C\u002Fli>\n\u003Cli>Particle effects and screen shake\u003C\u002Fli>\n\u003Cli>Sound effects system (line clear, collision, rotation)\u003C\u002Fli>\n\u003Cli>Mobile and desktop compatibility\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch2>AI Usage Workflow\u003C\u002Fh2>\n\u003Ch3>Phase 1: Creating the Base Game\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Goal:\u003C\u002Fstrong> Get AI to help build a playable game prototype\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Prompt Example:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Help me create a Tetris game using HTML5 Canvas and JavaScript.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Output Highlights:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Created complete game loop\u003C\u002Fli>\n\u003Cli>Implemented block rotation and movement\u003C\u002Fli>\n\u003Cli>Collision detection (boundaries and locked blocks)\u003C\u002Fli>\n\u003Cli>Scoring and leveling system\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 2: Mobile Touch Controls\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nPC keyboard controls don't work on mobile, touch controls are needed.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Please add mobile touch controls:\n- Left\u002Fright drag to move blocks\n- Tap screen to rotate blocks\n- Quick swipe down for hard drop\n- Compatible with mouse operations\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Implemented drag control based on touch coordinate differences: records last touch position, calculates horizontal difference, triggers left\u002Fright movement when threshold is exceeded\u003C\u002Fli>\n\u003Cli>Implemented tap-to-rotate logic: in \u003Ccode>touchend\u003C\u002Fcode>, determines if finger had significant movement; if displacement is minimal and press duration is short, treats as tap and triggers rotation\u003C\u002Fli>\n\u003Cli>Also compatible with mouse events through unified event mapping for PC use\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ⚠️ First generation had "one tap triggers twice" issue, requires Phase 3 fix\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Initial prompt could add "note that mobile browsers simulate mouse events, please implement event isolation to avoid duplicate triggers"\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 3: Fix Double-Trigger Bug\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nOne tap on mobile causes block to rotate or move twice.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>One touch on mobile counts as two operations.\nIn the touch control code, both touch and mouse events might be triggered.\nPlease help me fix this issue.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Analysis:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Issue 1: Browser simulates mouse events after touch events\u003C\u002Fli>\n\u003Cli>Issue 2: Both \u003Ccode>touchstart\u003C\u002Fcode> and \u003Ccode>touchend\u003C\u002Fcode> can trigger operations\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Registered touch events with \u003Ccode>{ passive: false }\u003C\u002Fcode> option to allow \u003Ccode>preventDefault()\u003C\u002Fcode> to block default behavior\u003C\u002Fli>\n\u003Cli>Called \u003Ccode>stopPropagation()\u003C\u002Fcode> in touch event handlers to prevent event bubbling\u003C\u002Fli>\n\u003Cli>Added \u003Ccode>isTouching\u003C\u002Fcode> flag variable, set to \u003Ccode>true\u003C\u002Fcode> on touch start and \u003Ccode>false\u003C\u002Fcode> on touch end\u003C\u002Fli>\n\u003Cli>Checked \u003Ccode>isTouching\u003C\u002Fcode> flag in mouse event handlers; if \u003Ccode>true\u003C\u002Fcode>, return immediately to ignore mouse events triggered by touch\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Directly state "might be duplicate triggering from touch and mouse events" helps AI quickly locate event bubbling and browser compatibility mechanisms\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 4: Fix Accidental Trigger at Game Start\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nAfter clicking start, finger still on screen immediately triggers movement or hard drop, causing instant game over.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>After game starts, if finger is still on screen, it immediately triggers movement or hard drop,\ncausing block to lock instantly and game to end.\nHow to ignore touch input when game just starts?\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Added \u003Ccode>gameJustStarted\u003C\u002Fcode> boolean flag, initially \u003Ccode>false\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>In game start event (\u003Ccode>touchstart\u003C\u002Fcode>), if game hasn't started, set \u003Ccode>gameJustStarted = true\u003C\u002Fcode>\u003C\u002Fli>\n\u003Cli>Used \u003Ccode>setTimeout\u003C\u002Fcode> to reset \u003Ccode>gameJustStarted\u003C\u002Fcode> to \u003Ccode>false\u003C\u002Fcode> after 1000ms (1 second)\u003C\u002Fli>\n\u003Cli>Checked this flag at the beginning of all touch event handlers; if \u003Ccode>true\u003C\u002Fcode>, return immediately to ignore touch input\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Clearly describe the specific scenario of "finger not leaving screen triggers operation", AI can accurately provide "protection period\u002Fcool-down time" design pattern\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 5: Downward Drag for Accelerated Drop\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nNeed to add downward drag for accelerated drop, but finger lift after drag triggers hard drop.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Please add downward drag for accelerated drop:\n- Start acceleration when dragging down more than 30px\n- Continue acceleration while finger stays in downward position\n- Don't trigger hard drop when finger lifts after drag\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Added \u003Ccode>isFastDropping\u003C\u002Fcode> boolean flag and \u003Ccode>fastDropY\u003C\u002Fcode> position tracking variable\u003C\u002Fli>\n\u003Cli>During touch move, detected vertical drag distance: when exceeding 30px,判定为 downward acceleration drag\u003C\u002Fli>\n\u003Cli>After triggering acceleration, set flag to \u003Ccode>true\u003C\u002Fcode> and execute drop movement every 50ms, while updating reference Y coordinate\u003C\u002Fli>\n\u003Cli>In \u003Ccode>handleTouchEnd\u003C\u002Fcode>, checked flag: if \u003Ccode>true\u003C\u002Fcode>, prevent event bubbling and return directly, skip hard drop logic\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ⚠️ After initial implementation, horizontal movement during acceleration caused misalignment, requires Phase 6 fix\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Prompt could pre-constrain "please disable horizontal movement during acceleration to avoid player misoperation causing block misalignment"\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 6: Disable Horizontal Movement During Acceleration\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nHorizontal movement during accelerated drop causes sudden block misalignment.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>During accelerated drop, left\u002Fright movement causes sudden block misalignment,\nmaking it easy for players to place blocks incorrectly.\nHow to disable horizontal movement during acceleration?\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Added \u003Ccode>isFastDropping\u003C\u002Fcode> check at the beginning of touch move handler\u003C\u002Fli>\n\u003Cli>If flag is \u003Ccode>true\u003C\u002Fcode>, prevent event bubbling and return directly, skip all horizontal movement logic\u003C\u002Fli>\n\u003Cli>Only continue horizontal drag detection when not in acceleration state\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Directly describe "side effects of current state" (like misalignment, poor experience), AI will prioritize state isolation solutions\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 7: Power-Up System Design\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nWant to add power-up system to increase game fun.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Please add power-up system:\n1. 15% chance to get power-up when clearing lines\n2. Hole-fill power-up: automatically fills gaps in bottom row\n3. Power-ups can stack, show power-up bar at bottom\n4. Tap power-up to use\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Defined power-up type array with type identifier, name, color, and icon emoji\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Hole-fill power-up\u003C\u002Fstrong>: searches from bottom row upward for incomplete rows, records empty positions, uses animation to fill each gap every 100ms\u003C\u002Fli>\n\u003Cli>Power-up acquisition: 15% random chance each line clear, uses array storage to support stacking\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ⚠️ After initial implementation, power-up bar showed duplicate icons, requires Problem 5 optimization\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Specify in requirements "power-up bar should merge same-type power-ups and show quantity", can avoid subsequent UI rework\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Phase 8: UI Layout Optimization\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Problem:\u003C\u002Fstrong>\nTop UI info overlaps with music toggle in top-right corner.\u003C\u002Fp>\n\u003Cp>\u003Cstrong>How to Describe to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Score, level, and lines in top UI bar are all center-aligned,\noverlapping with music toggle in top-right corner.\nHow to align content to the left?\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Results:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Applied left-align, center-align, and right-align layout for score, level, and lines respectively\u003C\u002Fli>\n\u003Cli>Score left-aligned at left padding, level centered at canvas horizontal center, lines right-aligned on right side\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> When describing layout issues, directly state "positions of overlapping elements" and "expected distribution", AI can directly provide coordinate allocation solution\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch2>Testing Issues and AI Solutions\u003C\u002Fh2>\n\u003Ch3>Issue 1: Double-Trigger on Touch\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Symptom:\u003C\u002Fstrong> One tap on mobile causes block to rotate twice\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Question to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>One touch on mobile counts as two operations.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Solution:\u003C\u002Fstrong> Used \u003Ccode>{ passive: false }\u003C\u002Fcode> option when registering touch events, called \u003Ccode>stopPropagation()\u003C\u002Fcode> in touch handlers to prevent event bubbling, added \u003Ccode>isTouching\u003C\u002Fcode> flag variable to prevent touch events from triggering subsequent mouse events\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Adding "confirmed simultaneous triggering of touchstart\u002Ftouchend and mousedown\u002Fmouseup" helps AI directly provide event isolation solution\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Issue 2: Accidental Trigger at Game Start\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Symptom:\u003C\u002Fstrong> After clicking start, finger still on screen immediately triggers movement causing game over\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Question to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>After game starts, finger still on screen immediately triggers movement, causing instant game over.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Solution:\u003C\u002Fstrong> Added \u003Ccode>gameJustStarted\u003C\u002Fcode> boolean flag, set to \u003Ccode>true\u003C\u002Fcode> on game start, used \u003Ccode>setTimeout\u003C\u002Fcode> to reset to \u003Ccode>false\u003C\u002Fcode> after 1 second; checked flag in all touch event handlers, ignored touch input during protection period\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Stating "start button and game canvas share same touch area" helps AI prioritize state cooling mechanism over simply hiding button\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Issue 3: Accidental Hard Drop on Drag Release\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Symptom:\u003C\u002Fstrong> After downward drag acceleration, finger lift triggers hard drop\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Question to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>After downward drag acceleration, finger lift triggers hard drop.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Solution:\u003C\u002Fstrong> Added \u003Ccode>isFastDropping\u003C\u002Fcode> flag, set to \u003Ccode>true\u003C\u002Fcode> when downward drag exceeds threshold (30px); in \u003Ccode>handleTouchEnd\u003C\u002Fcode>, checked flag, if \u003Ccode>true\u003C\u002Fcode> prevented event bubbling and returned directly, skipped hard drop logic\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> 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\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Issue 4: Misalignment During Accelerated Horizontal Movement\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Symptom:\u003C\u002Fstrong> Horizontal movement during accelerated drop causes sudden block misalignment\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Question to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Horizontal movement during accelerated drop causes sudden block misalignment.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Solution:\u003C\u002Fstrong> Added \u003Ccode>isFastDropping\u003C\u002Fcode> check at beginning of touch move handler, if \u003Ccode>true\u003C\u002Fcode> returned directly, skipped all horizontal movement logic, ensured horizontal drag completely ignored during accelerated drop\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Directly pointing out "visual jumping caused by state conflict" helps AI prioritize mutual exclusion logic over coordinate calculation modification\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Issue 5: Duplicate Power-Up Display\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Symptom:\u003C\u002Fstrong> Same power-up shows multiple icons, not concise enough\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Question to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>Power-up bar should show quantity with numbers, not multiple icons.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Solution:\u003C\u002Fstrong> Counted quantity of each power-up type, only show one icon in power-up bar, display \u003Ccode>×count\u003C\u002Fcode> label at top-right of icon to show quantity, avoid displaying multiple same icons\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Directly providing UI expectation in prompt ("merge display + quantity badge like inventory system") helps AI output complete rendering logic in one shot\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch3>Issue 6: Click Doesn't Restart After Game Over\u003C\u002Fh3>\n\u003Cp>\u003Cstrong>Symptom:\u003C\u002Fstrong> Clicking canvas after game over has no response\u003C\u002Fp>\n\u003Cp>\u003Cstrong>Question to AI:\u003C\u002Fstrong>\u003C\u002Fp>\n\u003Cpre>\u003Ccode>After game over, clicking canvas cannot restart game.\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Cp>\u003Cstrong>AI Solution:\u003C\u002Fstrong> In canvas click event handler, checked \u003Ccode>isGameOver\u003C\u002Fcode> state; if game ended, called \u003Ccode>reset()\u003C\u002Fcode> method to reset and restart game instead of executing normal game operations\u003C\u002Fp>\n\u003Cul>\n\u003Cli>\u003Cstrong>Status:\u003C\u002Fstrong> ✅ Fixed in one attempt\u003C\u002Fli>\n\u003Cli>\u003Cstrong>Prompt Optimization Suggestion:\u003C\u002Fstrong> Stating "current click event only handles in-game logic, doesn't cover end state" helps AI supplement state branch handling\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch2>Tips for AI Collaboration\u003C\u002Fh2>\n\u003Ch3>1. Describe Problems Clearly\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>❌ Vague: "Touch control has issues"\u003C\u002Fli>\n\u003Cli>✅ Specific: "When game starts and I tap, finger still on screen immediately triggers movement causing game over"\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>2. Provide Context\u003C\u002Fh3>\n\u003Cul>\n\u003Cli>Explain project structure (e.g., GameBase class inherited)\u003C\u002Fli>\n\u003Cli>Attach relevant code snippets\u003C\u002Fli>\n\u003Cli>Mention attempted solutions\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>3. Iterate Step by Step\u003C\u002Fh3>\n\u003Cp>Don't ask AI to complete all features at once, instead:\u003C\u002Fp>\n\u003Col>\n\u003Cli>First implement core features (base Tetris)\u003C\u002Fli>\n\u003Cli>Test and discover issues\u003C\u002Fli>\n\u003Cli>Describe issues to AI\u003C\u002Fli>\n\u003Cli>Apply solutions\u003C\u002Fli>\n\u003Cli>Continue testing next feature\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Ch3>4. Verify AI Code\u003C\u002Fh3>\n\u003Cp>AI-generated code needs to be:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Tested on real devices (especially mobile)\u003C\u002Fli>\n\u003Cli>Checked for edge cases (like touch at game start)\u003C\u002Fli>\n\u003Cli>Verified for performance (particle count, animation smoothness)\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Ch3>5. Keep Iteration Records\u003C\u002Fh3>\n\u003Cp>Record each conversation with AI and solutions, for:\u003C\u002Fp>\n\u003Cul>\n\u003Cli>Tracing problem origins\u003C\u002Fli>\n\u003Cli>Understanding modification reasons\u003C\u002Fli>\n\u003Cli>Future maintenance reference\u003C\u002Fli>\n\u003C\u002Ful>\n\u003Chr>\n\u003Ch2>Development Timeline\u003C\u002Fh2>\n\u003Ctable>\n\u003Cthead>\n\u003Ctr>\n\u003Cth>Phase\u003C\u002Fth>\n\u003Cth>Issue\u002FRequirement\u003C\u002Fth>\n\u003Cth>AI Solution\u003C\u002Fth>\n\u003Cth>Status\u003C\u002Fth>\n\u003Cth>Iterations\u003C\u002Fth>\n\u003C\u002Ftr>\n\u003C\u002Fthead>\n\u003Ctbody>\u003Ctr>\n\u003Ctd>1\u003C\u002Ftd>\n\u003Ctd>Create base game\u003C\u002Ftd>\n\u003Ctd>Complete game framework\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>2\u003C\u002Ftd>\n\u003Ctd>Touch control\u003C\u002Ftd>\n\u003Ctd>Drag + tap\u003C\u002Ftd>\n\u003Ctd>⚠️ Need fix for double trigger\u003C\u002Ftd>\n\u003Ctd>2\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>3\u003C\u002Ftd>\n\u003Ctd>Double-trigger bug\u003C\u002Ftd>\n\u003Ctd>Prevent bubbling + flag\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>2\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>4\u003C\u002Ftd>\n\u003Ctd>Accidental trigger at start\u003C\u002Ftd>\n\u003Ctd>Protection flag\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>2\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>5\u003C\u002Ftd>\n\u003Ctd>Downward drag acceleration\u003C\u002Ftd>\n\u003Ctd>Continuous acceleration logic\u003C\u002Ftd>\n\u003Ctd>⚠️ Need disable horizontal movement\u003C\u002Ftd>\n\u003Ctd>3\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>6\u003C\u002Ftd>\n\u003Ctd>Disable horizontal during acceleration\u003C\u002Ftd>\n\u003Ctd>State check\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>7\u003C\u002Ftd>\n\u003Ctd>Power-up system\u003C\u002Ftd>\n\u003Ctd>Hole fill\u003C\u002Ftd>\n\u003Ctd>⚠️ Need UI display optimization\u003C\u002Ftd>\n\u003Ctd>3\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>8\u003C\u002Ftd>\n\u003Ctd>Power-up bar UI optimization\u003C\u002Ftd>\n\u003Ctd>Merge display + quantity badge\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>2\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>9\u003C\u002Ftd>\n\u003Ctd>Speed curve adjustment\u003C\u002Ftd>\n\u003Ctd>Reduce level-up speed\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>10\u003C\u002Ftd>\n\u003Ctd>UI layout optimization\u003C\u002Ftd>\n\u003Ctd>Left-center-right distribution\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>1\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003Ctr>\n\u003Ctd>11\u003C\u002Ftd>\n\u003Ctd>Mobile layout optimization\u003C\u002Ftd>\n\u003Ctd>Responsive font and spacing\u003C\u002Ftd>\n\u003Ctd>✅\u003C\u002Ftd>\n\u003Ctd>2\u003C\u002Ftd>\n\u003C\u002Ftr>\n\u003C\u002Ftbody>\u003C\u002Ftable>\n\u003Chr>\n\u003Ch2>Common Prompt Templates\u003C\u002Fh2>\n\u003Ch3>Create New Feature\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>Help me implement [feature description], need to include:\n1. [specific requirement 1]\n2. [specific requirement 2]\n3. [specific requirement 3]\n\nPlease use [tech stack\u002Fframework], follow [project standards].\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Fix Bug\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>Encountered an issue:\n[Symptom description]\n[Occurrence conditions]\n[Expected behavior]\n[Actual behavior]\n\nHere's relevant code: [attach code]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Code Optimization\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>Please optimize this code:\n[Goal: performance\u002Freadability\u002Fmaintainability]\n[Constraints]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Ch3>Code Explanation\u003C\u002Fh3>\n\u003Cpre>\u003Ccode>Please explain how this code works:\n[attach code]\n\nSpecifically:\n1. [specific point of interest 1]\n2. [specific point of interest 2]\n\u003C\u002Fcode>\u003C\u002Fpre>\n\u003Chr>\n\u003Ch2>Lessons Learned\u003C\u002Fh2>\n\u003Col>\n\u003Cli>\u003Cp>\u003Cstrong>AI is assistant, not replacement\u003C\u002Fstrong> - Need to understand code principles, especially core logic like touch control and collision detection, must understand yourself.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Test-driven development\u003C\u002Fstrong> - Test on real devices after every modification. Mobile issues are especially important, PC simulator cannot completely replace real device testing.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>More specific problem description, more effective AI help\u003C\u002Fstrong> - Vague problems get vague answers. Include in problem description: symptom, conditions, expectations, actual results.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Keep conversation records\u003C\u002Fstrong> - Convenient for tracing back and knowledge accumulation. Record every important modification in documentation.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Multiple iterations are normal\u003C\u002Fstrong> - Rarely have perfect solution in one attempt. Both touch control and power-up system iterated multiple times before refinement.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>Protection period mechanism\u003C\u002Fstrong> - For touch start, adding brief protection period (like 1 second after game start) can effectively prevent accidental touches.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003Cli>\u003Cp>\u003Cstrong>State management\u003C\u002Fstrong> - Using clear state flags (like \u003Ccode>isFastDropping\u003C\u002Fcode>, \u003Ccode>gameJustStarted\u003C\u002Fcode>) makes logic clearer and avoids state conflicts.\u003C\u002Fp>\n\u003C\u002Fli>\n\u003C\u002Fol>\n\u003Chr>\n\u003Ch2>Play the Game\u003C\u002Fh2>\n\u003Cp>Ready to try it yourself? \u003Ca href=\"\u002Fplay\u002Ftetris\">Play Tetris now\u003C\u002Fa>!\u003C\u002Fp>\n\u003Cp>Want to build your own game? Check out our \u003Ca href=\"\u002Ftools?category=code\">AI Coding Tools\u003C\u002Fa> and \u003Ca href=\"\u002Ftools?category=art\">AI Art Tools\u003C\u002Fa> collections.\u003C\u002Fp>\n","\u002Fblog\u002Ftetris-dev","tetris-dev",1778833534758]