Jake Running Game

• 

  Quiz Question Example

• 

  Running Game

• 

  Leaderboard

Inspiration

We wanted to make safety training engaging instead of forgettable. Everyone knows PSAs like “Turn Around, Don’t Drown” — but they don’t always stick until you’re in danger. We thought: why not turn those lessons into reflexes with a fun, fast-paced game?

What We Built

Jake Runner — Hazard Zone Quiz is an endless runner where your avatar (Jake from State Farm) faces real-world hazards: floods, fires, hail, earthquakes, and road risks. At impact, the game pauses for a quick multiple-choice safety quiz. Answer correctly to score points and keep momentum; answer wrong and you lose speed or lives. Dynamic backgrounds (fire sparks, flood waves, hail particles, quake cracks) bring each hazard to life.

How We Built It

Frontend: HTML, CSS, and vanilla JavaScript canvas rendering

Character + Art: Custom SVG avatar and hazard-themed backgrounds

Game Loop: Simple physics for jumping, obstacle spawning, collision detection

Quiz System: Modular pool of questions tied to hazard types

Challenges

Balancing gameplay vs. learning — too many quizzes slowed momentum, too few weakened the teaching.

Making quizzes feel like “teachable moments” at the right time.

Keeping performance smooth across desktop and mobile while rendering animations and handling input.

What We Learned

How to blend education + engagement: players remember actions better when they practice under pressure.

Designing modular systems (obstacles, hazards, quizzes) makes it easy to extend with new lessons.

Accessibility matters: the game works in-browser with no installs, making it highly shareable.

Built With

• css
• html
• javascript