Frogger

About Frogger

Frogger is a crossing game on a grid 14 squares wide and 12 rows tall. Your frog starts on the bottom bank and hops one square per press: across four lanes of road traffic, a strip of safe grass, five lanes of river logs and turtles, and into one of five homes along the top. Filling a home sends the frog back to the start for the next crossing, and filling all five clears the level.

A car or truck costs you a frog. On the river you must stand on a log or a row of turtles: open water drowns you, and a log that carries you off the screen takes you with it. The top bank is solid between the homes, so line up with an empty home before the last hop: landing on the bank, or in a home that is already full, also costs a frog. Each frog has 30 seconds to get home, shown by the bar under the board. You get three frogs per run.

Scoring, levels and tips

• Every hop onto a row closer to home than that frog has reached before is worth 10 points.
• Each home you fill is worth 100 points, plus 10 for every second left on the timer.
• Filling all five homes adds a 1,000 point bonus and starts the next level, where every lane moves 15% faster, up to double speed.
• On level 1, road lanes run at 1.6 to 3 squares per second, and trucks are longer than cars.
• River lanes drift at 1.3 to 2.4 squares per second, with logs three to five squares long and turtle rows two or three long, all carrying you at their own speed.
• Each lane keeps one direction, with neighbouring lanes flowing opposite ways, and the gaps between vehicles, logs and turtles are randomised, so no two crossings play out the same.
• Your best score and total number of runs are saved in your browser.
• Tip: the grass strip and the starting bank are the only places nothing can hit you. Stop there and read the next section.
• Tip: every hop snaps you back onto the grid, so your first hop off a log lines you up with a column again.
• Tip: tap the board and the frog hops one square toward the tap.

How it's built

Frogger is written from scratch in TypeScript on an HTML canvas, with no game framework. Traffic, river and scoring rules live in a world module with no canvas or DOM code, stepped at a fixed 60 Hz inside requestAnimationFrame.

Collision is one-dimensional: the frog is hit when it shares a lane with a vehicle and its hit box overlaps the vehicle's body, the same box that is drawn on screen. On the river the game looks for a log or turtle row under the frog's centre, then moves the frog along with it. Sound is synthesised with the Web Audio API.

This is an unofficial tribute written from scratch for the browser. It is not affiliated with or endorsed by the owners of the original game.