Arkanoid Game ported to React

In this Arkanoid conversion I’ve ported it from the pure JavaScript code using HTML5 Canvas featured on Mozilla Dev Net to React JS. It has the basic building blocks to make more advanced 2D scrolling game engines. You can add more levels or increase the difficulty by playing with the draw functions and settings. Maybe even add a bonus round!

Play the game demo


I’m impressed with the initiative. Good job. I noticed that the only way to “accelerate” the ball seems to be to hit it “directly” (within some hit box) on the corner of the paddle. IIRC, the OG game accelerated in proportion (to the square root?) of how far from the center the ball collided with the paddle. Also, when a “corner bounce” does happen, the paddle’s position jumps suddenly. The ball doesn’t miss the paddle, but it’s pretty hair-raising for the user.

Thanks. You’re right there’s a lot more polish that can be added and to be fair I only spent an hour of refactoring the code to make it work like the MDN tutorial. I’m actually using it as a stepping stone to figure out game mechanics for my isometric game project.

Well, I still enjoyed playing it for 3 rounds (the first one doesn’t count :wink: ). I’m in the middle of a refactoring, I-will-finish-you-and-finally-put-you-to-rest-so-I-can-move-on-to-what-I-really-want-to-do project myself. I understand. Good luck with that!

1 Like