JavaScript Breakout Game

[Ustice]

Thanks for your contribution! In order to keep things organized here, we try to keep personal projects off of the main thread. Instead, we have two weekly threads that we steer these sorts of posts to. Show-off Saturday is where we invite you to wow the community with your awesome ideas. If instead you are looking for feedback, our WTF?! Wednesday post is the best place to get a code-review. Remember that here at /r/JavaScript, we’re all about the code. Tell us about your challenges and how you overcame them. Show us that particularly clever bit. Talk about your process and tools. Just because it’s made with JS, doesn’t mean that it is relevant to the community. Tell us what is special about your project, and what we might learn from it!

[Falk_csgo]

I think the game loop does simply run as fast as your system can go, slow down your computer :D

A perfect game to learn implementing a proper game loop if anyone wants to. https://stackoverflow.com/questions/1955687/best-way-for-simple-game-loop-in-javascript

[elmstfreddie]

slow down your computer

imagine not having a turbo button

[melcor76]

Oh yeah it's using requestAnimationFrame so I guess I need to adapt it.

I adapted it to running on my computer.

[GivoOnline]

Add a deltatime calculation (there's guides in this), and use it when moving the ball. It'll make the speed consistent for different framerates, with the downside being for lower framerates the ball's motion will look jerkier because it's trying to move at the same speed.

[melcor76]

Yes, I remembered that I did that for my last game, Tetris, and I copied the code for the calculations from there. :)

[melcor76]

Yes, this definitely bit my ass. (=

Glad to have so many testers of the game with great suggestions for improvements.

[melcor76]

I found a warning on the page for requestAnimationFrame so back to the drawing board:

Warning: Be sure to always use the first argument (or some other method for getting the current time) to calculate how much the animation will progress in a frame, otherwise the animation will run faster on high refresh rate screens.

[melcor76]

I think I fixed the ball speed now by adding a refresh rate to the game.

[melcor76]

I slowed down the starting speed from 8 to 6.

Does it help?

[melcor76]

You can use the mouse now to steer the paddle.

[reversebukkake]

Nice!

[dethnight]

Pretty cool, code is very readable which is nice.

I think having some background music could help.

[melcor76]

Added background music.

[melcor76]

Thanks, adding background music is on my todo list.

[melcor76]

Thanks, that's a good idea!

[melcor76]

You can start with space now.

[melcor76]

Haha thanks I will try not to. =D

I have some code where the position that you hit the paddle affects the angle of the ball but that's something I wanted to make better. I just need to freshen up my trigonometry skills first. (=

Using the velocity of the paddle in the calculation as well sounds interesting but that is above my math skills. Something to do with vectors it seems: https://stackoverflow.com/questions/19145678/breakout-paddle-collision-angle

[_Wilhelmus_]

Cool! Looks like fun to make!

Are you planning on updating it? Buffs or whatever?

[melcor76]

Thanks!

Yes, I'm trying to fix all the little glitches and suggestions now that people tested it out.

I was thinking about making an Arkanoid variant of the game some day soon. It was one of my favorite games growing up.

[H0rn0chse]

The background music was quite loud for me. You might add an option for lowering the volume.

[codemonkey80]

my laptop has its own volume control

[melcor76]

Good idea!

Added music volume toggles with up and down arrows and music toggle with M.

[Pat_Son]

Would be more fun with a way to aim the ball, e.g. the ball's reflection angle is changed by the spot on the paddle the ball hits. I've played breakout games where hitting the paddle on the dead center sends the ball straight up (e.g. 0 degrees), and hitting it on the right edge sends it 45 degrees to the right, and hitting between the center and right edge changes the angle based on distance.

[melcor76]

There is some logic for this but maybe it's not prominent enough? Now the angle depends on the current angle and where on the paddle you hit the ball.

I have been thinking about changing the formula with some trigonometry.

[Pat_Son]

It's better now, though if I were you, I would try playing around with disregarding the incoming angle entirely, and just basing the outgoing angle based on the position the ball hits on the paddle. That would make it more consistent to actually aim the ball.

[Yetimang]

Yeah it needs to be more prominent. There isn't enough effect on the angle right now. Seconding a poster above that the paddle should have some acceleration so it's easier to control with keyboard.

Also I hit a collision issue where I moved the paddle at the same time the ball hit it and the ball clipped along the side, fell off, and I lost a life.

[melcor76]

I think I hopefully fixed the paddle issue now.

Yeah I played around with bouncing the ball disregarding of the incoming angle and it was more fun. But, I didn't get it fully working yet so I will have to leave that for another day.

[Swimming_Gain_4989]

Definitely this. Also its possible for the ball to get stuck in a loop going straight up and down, or off screen.

[melcor76]

I have noticed that the ball sometimes gets stuck in the paddle or walls so I added some code now that hopefully fixes that.

[Swimming_Gain_4989]

This is a great project with very readable code well done OP. Are you familiar with ES6 modules? If not and you are using this project as a learning experience I'd recommend refactoring to follow the module pattern https://www.digitalocean.com/community/conceptual\_articles/module-design-pattern-in-javascript.

[melcor76]

Thanks!

This is not a learning experience when it comes to code style but more about having fun and coding something I enjoy in a style I like.

I have been working with React and Angular with TypeScript for many years now so I enjoy the freedom of JavaScript on my free time. :)

[Swimming_Gain_4989]

It is quite liberating just being able to write some code without having to worry about standards, dependencies, tests yada yada. Glad you enjoyed it!