HOCKEY GAME 5000
Dodge skaters. Score goals. Grab bonus items. No installation, just a webcam.
WHAT IT IS
A color-tracking hockey game that runs in your browser. Students control a puck by moving a bright object (their hand, a ball, a marker, anything colorful) in front of the webcam. Goals drop from the top, skaters try to wreck them, and every 30 seconds a random bonus item appears — the Stanley Cup, a purple octopus, or a rubber chicken.
Built for Chromebooks, iPads, and phones. Works offline after the first load. No downloads, no logins for students.
HOW TO PLAY
Setup (takes 30 seconds)
- Open the game on the device (laptop, iPad, or phone)
- Tap “Start Camera” — browser asks for webcam permission, allow it
- Hold your tracking object (bright green ball works great, but any solid color works) in the small tracking square at top-right
- Tap “Pick Puck Color (Auto)” — the game samples whatever color is in that square and tracks it
- Move the object left/right — the puck on screen follows
That’s it. Game starts immediately.
During the game
- Goals (the nets) drop from the top following drill patterns — alternating left-right or catch-and-recover wide-to-center movements. Score 5 points per goal.
- Skaters appear after a 7-second warm-up. If they hit your puck, you lose a life. You start with 1 life.
- Bonus items appear every 30 seconds (rotates randomly):
- Stanley Cup (+50 points) — the big payoff, gold confetti explosion
- Octopus (extra life, max 5 lives) — purple ink splatter, floating hearts
- Rubber chicken (+30 points, squeaks) — yellow feather burst
- Lives shown as hearts below the scoreboard. Octopus adds lives. When you lose a life, you get 2 seconds of invincibility (puck blinks with a gold ring).
- Game over at 0 lives — shows final score for 2 seconds, then auto-restarts with a 5-second countdown
Controls
- Move the puck: move your tracking object left/right in front of the camera
- Pause: P key or the ⏸ Pause button
- Mute: M key or the 🔊 Mute button
- Manual restart: Space bar during game over (skips the countdown)
SETTINGS & ADJUSTMENTS
All in the HUD at top-left (minimize it with the _ button if it’s in the way):
Camera adjustments
- Brightness / Contrast — if the room is dim or washed out
- Sensitivity — if tracking is jumpy, lower it; if it’s not picking up movement, raise it
- Camera Zoom — crop the tracking area (useful if the object is far from camera)
Color picker
- Auto — samples whatever’s in the tracking square when you tap the button
- Manual — opens a color swatch picker if auto-pick isn’t working in your lighting
Other buttons
- Fullscreen — hides browser chrome
- Reset High Score — red button, confirms before wiping
TIPS FOR CLASSROOMS
What to use as the tracking object
- Best: bright green tennis ball, nerf ball, or foam ball (high contrast, easy to see)
- Works: colored markers, pencils, erasers, index cards, your hand (if wearing a bright sleeve/glove)
- Avoid: skin tone (too close to background), white (gets washed out), small objects (harder to track consistently)
Pick something that’s a solid, bright color that doesn’t match the walls/floor/clothes. The game tracks color blobs, so bigger and brighter = more reliable.
Lighting matters
The webcam color picker works best with even, bright lighting. Overhead fluorescents are fine. Avoid:
- Backlighting (window behind the student)
- Spotlights that create harsh shadows
- Dim corners
If tracking is wonky, adjust Brightness and Contrast sliders in the HUD before re-picking the color.
Station setup
- One device per station (Chromebook on a desk, iPad propped up, phone in a stand)
- Camera facing the movement area — students stand/sit ~2–3 feet back
- Camera doesn’t need to see their whole body, just the tracking object moving left/right across the frame
- Mute it if the rubber chicken squeak gets too hype (🔊 button or M key)
Difficulty scales automatically
- Goals drop faster as score increases
- Skaters spawn more frequently every 50 points
- Phones/small screens auto-scale everything smaller so it’s playable
No need to adjust difficulty manually — it ramps naturally.
Teaching moments
The game follows real stickhandling drill patterns:
- Center Weave (goals alternate R-L-R-L) — rhythmic side-to-side control
- Catch & Recover (wide right → stop → wide left → stop) — reach and control back
Students won’t know the names, but their movement will mirror actual hockey edge work. You can call it out if you want (“Notice how the nets are making you go wide then pull back — that’s a catch drill!”) or just let them feel it.
TROUBLESHOOTING
“The puck isn’t following my object”
- Re-pick the color (tap “Pick Puck Color (Auto)” with the object in the tracking square)
- Try the Manual color picker if auto isn’t working
- Raise Sensitivity slider
- Make sure the object is a solid, bright color
“Tracking is too jumpy”
- Lower Sensitivity slider
- Use a bigger tracking object (small objects create jittery blobs)
- Improve lighting (turn on overhead lights, close blinds if backlit)
“The camera preview is too zoomed in/out”
- Use the Camera Zoom slider — it crops the tracking area to match what you see
“Everything is too big on my phone”
- The game auto-scales based on screen size. If it’s still too big, that’s a bug — let me know.
“Game won’t start / camera button does nothing”
- Browser needs webcam permission. Check browser settings (usually a camera icon in the address bar).
- Some school networks block webcam access — IT needs to whitelist the domain.
“Sound is annoying”
- Tap 🔊 Mute or press M. Mute state saves across sessions.
