Show HN: Play brick breaker using webcam and hand tracking (open source)

collidingscopes.github.io

16 points · getToTheChopin · 4 days ago

I built this game to test out the MediaPipe hand-tracking API. Play brick breaker using your webcam + hand movement -- levels get progressively harder with faster speed / smaller paddle.

All processing is done in real-time within your browser. This project is built using javascript, html canvas, and mediapipe hand tracking.

This game is free and open source, offered under an MIT license.

Github repo: https://github.com/collidingScopes/manual-brick-breaker

Hope it's fun for you -- would love to hear feedback and suggestions for improvement.

6 comments

gus_massa · 3 days ago

Nice.

I had low contrast between my hand and my t-shirt, so I had to keep my hand over my head and it's very tiring. I don't know how you can solve this, I probably need better illumination.

When I remove the hand from the camera view, the balls go back to the middle of the paddle. I expected the ball to freeze and a short countdown when the hand is visible again. I tried to cheat removing my hand on purpose but there is a big lag between the time I hide my hand and the game stops.

After a few tries, I discovered that I can hide my hand when the ball is going up at 75% and the game will freeze after the ball hits the block and the ball is going up at 50%, so I don't have to catch the ball!

(Yes, I know cheating in a single player game is stupid.)

Show replies

nimzoLarsen · 4 days ago

Pretty fun — feels quite natural to play by moving my hand.

I noticed a bit of lag while playing on mobile (iPhone Chrome).

Nice work!

Show replies

heyrikin · 4 days ago

Very cool!

Show replies