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.