Bug Hunt Game — Free HTML CSS JS Snippet

Reading code for defects is a skill nobody is explicitly taught — it is absorbed slowly through code review, usually after shipping the same bug once. This snippet compresses that loop into something playable: a short function with a stated purpose, a file-window UI with numbered lines, and one click to say where the defect is. Every round ends by showing the corrected line and explaining exactly how the original fails, so a wrong guess costs nothing but still teaches the pattern.

Seven defects that are real, not typos

The bugs are chosen because each represents a class of failure rather than a one-off slip: seeding a maximum at 0 so all-negative input returns a value that was never in the array; the <= off-by-one that reads one past the end and throws on property access; dot notation used for a dynamic property so state.key looks up a literal "key"; return inside a forEach callback, which exits the callback and is silently discarded, making the function always return false; a debounce that never calls clearTimeout, so every event still fires — just late; assigning an object and mutating the "copy", which writes through to the caller's original; and a stray semicolon after if (...) that empties the conditional's body so the discount applies to every order. Each why string names the mechanism, and each fix shows the corrected line ready to read.

Clickable lines built from data, numbered by CSS

Each bug is a data object holding the file name, a brief describing intended behaviour, an array of source lines, the index of the defective line, the corrected line, and the explanation. Lines render as <li> elements carrying a data-index, and line numbers come from a CSS counter-reset/counter-increment pair with the value drawn in a ::before pseudo-element — so the numbers are presentational only. That matters more than it sounds: a player who selects and copies the code gets the code, not a column of numbers glued to it, which is exactly how a real editor behaves.

A brief that makes the bug findable

Every level states what the function is *supposed* to do before showing the code, because a defect is only a defect relative to an intention. Without the brief, the max = 0 seed and the forEach return are unfalsifiable — the code is internally consistent and syntactically fine. Giving the intent first is also the honest model of real review: you cannot review code whose purpose you do not know.

One guess, then the answer

A locked flag makes each round single-shot: the first click resolves it. The correct line is always highlighted green whether or not the player found it, and a wrong pick is marked red simultaneously, so both pieces of information are on screen at once. The container also gets a locked class that removes the hover affordance and the pointer cursor, which is the visual signal that the round is over — state expressed through a class on the parent rather than by unbinding listeners, so nothing has to be re-bound on the next render.

Shuffled rounds over an index array

start() shuffles an array of indices with Fisher-Yates and walks that, leaving BUGS itself untouched, so a replay presents the same seven defects in a new order. Finishing the last bug reports the round score and restarts automatically after a short pause.