Frog Crossing Game — Free HTML CSS JS Snippet

Frogger is the definitive grid-hop game, and its brilliance is that it has *two opposite* hazard rules on the same board: on the road, touching a moving object kills you, and on the river, *not* touching one kills you. Teaching a player to read which rule applies to the row they're on — while every row scrolls at a different speed and direction — is the whole game, and it maps perfectly onto a four-way D-pad of discrete hops. This snippet builds it on one HTML5 <canvas>: hop up through four road lanes and four river lanes, ride the logs across the water, and fill all four homes at the top.

Discrete grid hops, not continuous movement

Unlike a runner or a platformer, the frog doesn't move smoothly — each button press is one hop of exactly one tile, fired on pointerdown through a tiny tap() helper. The frog tracks a grid row and a pixel x; hopping up or down changes the row, hopping left or right shifts x by one tile clamped to the board. Keyboard arrows and WASD call the same hop() function. Because movement is discrete, timing your hop into a gap is the core skill — you commit to a tile and can't take it back.

Two collision rules, chosen by row type

Every row carries a type — road, water, safe or goal — and update() branches on the frog's current row. On a road row, the frog dies if its rectangle overlaps any car (standard AABB overlap). On a water row, the logic inverts: the frog dies *unless* its centre is on a log, and when it is on one, the log's velocity is added to the frog's x every frame so it rides along — and if a log carries it off the edge of the screen, it drowns. That single inversion is the entire risk/reward of the river.

Independently scrolling lanes with wrap-around

Each moving row is configured with a signed speed, a piece length and a gap, and buildLanes() fills it with evenly spaced items that scroll and wrap: an item leaving one side re-enters on the other so the traffic and log flow is continuous and endless. Alternating lane directions and varied speeds create the staggered timing windows that make the crossing a puzzle rather than a straight sprint.

Homes, lives and scoring

The top row has four home slots. Landing the frog in an *empty* home fills it and resets the frog to the start; landing on the bank between homes, or on an already-filled one, costs a life. Filling all four wins the round. The frog has three lives, deaths reset it to the bottom, and the score rewards forward hops, reaching a home, and completing the board. The best score persists to localStorage, and all motion is delta-time scaled so lane speeds are consistent across refresh rates.