Number Guessing Game 1-100 — Free JS Snippet

The classic "guess the number between 1 and 100" game is a staple first project for learning conditional logic, but it's also a surprisingly direct, hands-on demonstration of binary search — one of the most important algorithms in computer science. This snippet builds the full game loop with real input validation, a persistent guess history so players can visually trace their own narrowing strategy, and an explicit callout connecting the gameplay to the underlying algorithm once the player wins.

The core game loop

On load, newGame() picks a secret target with Math.floor(Math.random() * 100) + 1, which produces a uniformly random integer from 1 to 100 inclusive (the + 1 shifts Math.random()'s natural 0-to-0.999... range up by one so 0 is never a possible target and 100 is reachable). Every submitted guess runs through submitGuess(), which first validates the input — rejecting empty submissions, non-numeric input via isNaN(), and anything outside the 1-100 range — before comparing the guess to target and branching into exactly one of three outcomes: a win, "too high," or "too low." Each guess increments a live attempts counter displayed at the top of the game, so players always know exactly how many tries they've used.

Visualising the narrowing range

Beyond the pass/fail feedback, the game tracks a running low/high bound: any guess that comes back "too high" tightens high down to that guess (since the target must be below it), and any "too low" guess raises low up to that guess. This bound is rendered live as a "Range" stat (e.g. "34 - 67") that visibly shrinks after every guess, making the search space contraction — the entire idea behind binary search — directly visible rather than something the player has to track mentally.

The guess history as a strategy mirror

Every guess, right or wrong, is appended as a small coloured chip to a running history list: red chips with a down arrow for "too high," blue chips with an up arrow for "too low," and a green checkmark chip for the final correct guess. Because the chips accumulate in submission order, a player can look back at their own sequence after finishing and immediately see whether they played efficiently — someone who bounced between 1, 100, 2, 99, 3 played essentially randomly, while someone who went 50, 75, 62, 68 was narrowing the interval in half each time, which is precisely optimal play.

Why binary search guarantees a win in at most 7 guesses

Binary search always guesses the midpoint of the remaining possible range, which discards roughly half of the remaining candidates with every single guess regardless of whether the result is "too high" or "too low." Starting from 100 possible values, repeatedly halving gives 100 → 50 → 25 → 13 → 7 → 4 → 2 → 1, which takes ceil(log2(100)) = 7 halvings to guarantee narrowing down to exactly one possible value. This is why the win panel explicitly states that optimal play — always guessing the midpoint of what's left, i.e. Math.floor((low + high) / 2) on each turn — solves any 1-100 instance of this game in at most 7 guesses, no matter how unlucky the target number is. It's a concrete, playable way to feel why binary search is O(log n) rather than O(n): doubling the range to 1-200 only adds one more guess in the worst case (8, since ceil(log2(200)) = 8), not twice as many.

Input handling details worth noting

The number <input> is cleared and refocused after every guess (input.value = ''; input.focus();) so players can keep typing rapid guesses without touching the mouse, and both the input and submit button are disabled once the game is won to make it unambiguous that the round has ended and "Play again" is the only next action.