3 ms·

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

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 https://github.com/collidingScopes/manual-brick-breaker Hope it's fun for you -- would love to hear feedback and suggestions for improvement.

nimzoLarsen 2y 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!
- getToTheChopin 2y ago
  Thanks for playing! Good feedback. I'll try to improve the mobile performance, the fps seems lower vs. Destkop at the moment
heyrikin 2y ago
Very cool!
- getToTheChopin 2y ago
  Thank you! Mediapipe is quite neat, I'd like to try some other projects with their hand tracking / face tracking
gus_massa 2y 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.)
- getToTheChopin 2y ago
  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!

nimzoLarsen 2y 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!

getToTheChopin 2y ago
Thanks for playing! Good feedback. I'll try to improve the mobile performance, the fps seems lower vs. Destkop at the moment

heyrikin 2y ago

Very cool!

getToTheChopin 2y ago
Thank you! Mediapipe is quite neat, I'd like to try some other projects with their hand tracking / face tracking

gus_massa 2y 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.)

getToTheChopin 2y ago
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!