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

Posted by getToTheChopin on Thursday January 16, 2025 @10:56PM
from the show-hn dept.

https://collidingscopes.github.io/manual-brick-breaker/

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 | 2 points | on HN )

Re:Show HN: Play brick breaker using webcam and hand trackin... by nimzoLarsen on Thursday January 16, 2025 @11:15PM (#42734007)

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!

[ Parent | on HN ]

Re:Show HN: Play brick breaker using webcam and hand trackin... by getToTheChopin on Thursday January 16, 2025 @11:19PM (#42734028)

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

[ Parent | on HN ]

Re:Show HN: Play brick breaker using webcam and hand trackin... by heyrikin on Thursday January 16, 2025 @11:49PM (#42734209)

Very cool!

[ Parent | on HN ]

Re:Show HN: Play brick breaker using webcam and hand trackin... by getToTheChopin on Friday January 17, 2025 @01:31AM (#42734689)

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

[ Parent | on HN ]

Re:Show HN: Play brick breaker using webcam and hand trackin... by gus_massa on Friday January 17, 2025 @09:44AM (#42738001)

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.)

[ Parent | on HN ]

Re:Show HN: Play brick breaker using webcam and hand trackin... by getToTheChopin on Friday January 17, 2025 @10:45PM (#42745633)

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!

[ Parent | on HN ]