Frog Crossing Game: Traffic, Logs and Diving Turtles

Frog Crossing is the classic road-and-river arcade game: hop up through four lanes of traffic, cross a river by riding logs and turtles, and land the frog in each of the five lily-pad homes at the top. This snippet builds a complete version on one HTML5 <canvas> with no libraries and no image files. Every car, truck, bulldozer, log, turtle, fly and the frog itself is drawn with canvas paths, and the scenery (hedge, grass with flowers, asphalt with lane lines and curbs) is painted once into an off-screen canvas. It plays with the arrow keys or WASD, an on-screen D-pad, or swipes and taps on the game.

Hops are tweens between tiles

The frog lives on a 9 by 11 grid of 40-pixel tiles. A hop is a 0.11-second tween from one tile to the next: frogX() and frogY() interpolate the position, the sprite lifts and stretches its legs at the top of the arc, and it rotates to face the way it jumped. A key pressed during a hop is queued and fires the moment the frog lands, so quick double-taps feel responsive. On land the frog snaps back to the nearest column; on water it keeps its exact position so it can ride.

Lanes that wrap forever

Each lane is a row of evenly spaced items (cars, trucks, logs or turtle groups) moving at its own speed. When an item leaves one side it jumps back by the lane's full repeat length, so traffic never runs out and the spacing never changes. Cars are tested every frame, even in mid-hop, against a slightly smaller hitbox. In the river the rule is reversed: the frog must be standing on a log or a turtle, and it drifts with it. Drifting off the edge of the screen is a splash.

Diving turtles, flies and the timer

Some turtle groups dive on a 7-second cycle: they float, blink while sinking (still safe), vanish under ripples (not safe) and rise again, so you have to time your crossing. Every life has 30 seconds, shown as a bar that turns yellow and red and ticks in the last five seconds, and the time you have left becomes a bonus when you reach a home. Now and then a fly lands in an empty home, worth 200 more points if you get there in time. Hitting the hedge between homes, or a home that is already full, costs a life.

Levels and scoring

Every new row you reach is worth 10 points, a home 50 plus the time bonus, and filling all five homes 1000 and the next level. Each level makes the traffic faster and denser, spaces the logs further apart and makes more turtles dive. An extra life comes at 5000 points. Deaths have their own animation (a squashed frog on the road, splash rings in the river), and sound effects for hops, homes, flies, splats, splashes and the level fanfare are made with the Web Audio API, with a mute button. The game pauses on P, a button or a tab switch, and the best score is kept in localStorage.