Show HN: Play brick breaker using webcam and hand tracking (open source)
collidingscopes.github.ioI 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.
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.)
This is great feedback, thank you for playing and let me know these comments.
Yes I definitely need to improve the mechanic of pausing / restarting the game when hand tracking is lost. I'll try to implement it the way you suggested.
Cheers!
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!
Thanks for playing! Good feedback. I'll try to improve the mobile performance, the fps seems lower vs. Destkop at the moment
Very cool!
Thank you! Mediapipe is quite neat, I'd like to try some other projects with their hand tracking / face tracking