Turn a symptom into repeatable steps
“The cards broke” is difficult to investigate. “Start Pixel Pairs, reveal two different tiles, restart before they close, then wait one second” is a test you can repeat. Write the expected result beside the actual result. Use the original downloaded template as a comparison so you can tell whether a problem began with your changes.
Keep a copy before investigating. Reproduce the smallest sequence that still causes the problem and remove unrelated steps. A reproducible case is also a useful regression check: after the fix, run the same sequence again without changing its conditions.
Read the first useful error
Open the browser's developer tools and find the Console. Reload the game and look for the earliest error that belongs to your file. Later errors may be consequences of that first failure. A syntax error can prevent all of the game's JavaScript from running, which makes working buttons appear broken even when their HTML is correct.
Click the reported file and line to inspect it. A missing bracket or quote can be just before the reported position. If you changed a symbol containing a quote inside a JavaScript string, check how that string is escaped. Restore the last known working version of the edited block to narrow the search.
Pause where the state changes
Set a breakpoint at the start of pick in Pixel Pairs. Select a tile and inspect running, locked, and first. Step through one statement at a time to see which branch runs. The first selection should set an index; the second valid selection should increment moves and either match or lock the board.
For Snake, pause in step and inspect the proposed head before collision is checked. Compare its coordinates with the food and body. For Breakout, inspect ball position and velocity immediately before a bounce. Watching the actual values is more useful than guessing from an animation that happens many times a second.
Check units and pending work
A large class of movement bugs comes from mixing milliseconds and seconds. The shared animation loop passes seconds as dt. Orbit multiplies a pixels-per-second speed by that value. Snake converts it to milliseconds before adding it to the accumulator. If a new feature expects milliseconds, make the conversion explicit and document the unit in the variable name.
Delayed problems often come from a callback left over from another round. Inspect each setTimeout and decide when it must be cancelled. Check that reset clears both the timer and the state the timer would have modified. Do not fix a stale callback by adding another timeout; remove or invalidate the obsolete work.
Use a compact regression checklist
- Start, play a normal round, finish, and restart.
- Restart during active movement or a pending mismatch delay.
- Press a control before Start and after the result.
- Hold a key, leave the window, release it, and return.
- Resize the page and test pointer positions at the edges.
- Open the deployed URL and check any changed asset paths.
Choose the cases relevant to your change. Editing a page heading does not require replaying every collision. Changing reset behavior does require checking pending timers and active input. Keep the test proportionate to the code it can affect.
After the bug is fixed, write one sentence about the cause and one about the check that catches it. For example: “Restart left an old mismatch timer active; restart during a mismatch now keeps the new deck closed.” That note explains the behavior much better than “various fixes.”