Christmas Breakout (classic Breakout with an xmas theme)

[Little Sharky]

About

Christmas Breakout - Snowman edition (available on itch.io) is the classic Breakout game decorated with Christmas festivities (including the projects mascot 'Snowman').

In a nutshell, Breakout is a game where you  hit a ball with a paddle and aim to destroy bricks that lay above. The  balls trajectory changes during game play so lining up the paddle in time to strike is where the challenge is set.

Aim for a high score but beware the ball moves pretty fast as you level up!

How to play

Use your keyboards left and right keys to move the paddle.

Clicking the Restart level button will reset the bricks and score you have achieved for that level.

Clicking the Reset to level one button will reset the game back to level 1.

When you have completed a level, click the Next level button that appears to move onto the next level.

Note

The game runs best using Chrome.

[Little Sharky]

Hi all

I shall be looking to make enhancements such as mobile friendly game play and 'non-seasonal' mode. If anyone has ideas on what enhancements they would like, feel free to get in touch.

Thoughts and feedback more than welcome : )

LS.

[Wolfsbane]

Oh, come on, that's not a game over yet! It's clearly hitting the paddle!

I guess this is one of your first game, so congrats! That's not too much to talk about for the game.. It's the type of game that's pretty simple. You've got the basic mechanics down which is great, but there's also lots of room to improve if you're wanting to put the time in. I'd add the ability to mouse control.

It sucks if you don't get any feedback just because it's a bit simple. So we may as well just have a chat. What are your plans for the game (or just for the game design in general?) If you just want to learn how to build a basic game with javascript, then congrats, you've done a good job. The first few games are the hardest, and it'll only get easier for the next game (technically, anyway). 

Did you code it all from scratch, or are you using an engine?

If you want to keep building on the design for this game, then I can try give some feedback and pointers.

I've built a breakout myself, so I've done a lot of digging and research on the genre. It's still possible to do something unique, and pretty cool in it. Or even something not that unique, but still cool. 

I'd recommend giving this article a read:

https://www.gamasutra.com/view/feature/1630/breaking_down_breakout_system_and_.php?print=1

It's.. basically, fantastic! The article is about 12 years old, but a lot of the stuff it talks about is completely relevant for today. It talks about a lot of the different design options there are to go for.

For me(personal preference): I dislike the style of ball movement that you have in this one. The player(me) has no control over where the ball goes. It can lead to levels where the ball is just bouncing almost up/down and constantly missing the last brick for a good minute or two. 

I like it when I can control the balls movements by hitting the ball on the right or left side of the paddle. I.e. ball hits the right most corner of my panel, I know theball will then bounce to the right, etc.

Some breakout games have fixed ball movement (ball moves at a hard 45/35 degree angle) but it works out ok due to their level design. The ball bounces around, and gets in behind the various places on the level. Nice.

But this is just a personal preference for ball movement. If you stick with this, then I'd suggest you have a think about the level design, or add some kind of feature to stop the player getting bored if they just have to get the last few bricks, and the ball is just bouncing up and down.. not challenging.

One idea for this: Is you could add a condition. Once you're down to the last few bricks, then a present? (or a few presents) can fall from the sky for the player to grab. This add's something interesting.. the player still has to knock the ball around while he waits for the ball to hit the last brick, but the player now has to time the bat, so he can hit the ball, scoot off to grab a present, then get back in time to knock the ball again. 

It's a small idea, but it's a little something extra you can add to the design to keep the player going. The player knows that at the end of each level, they'll get a short challenge to grab the bonus present before the end.

Long post, but.. keep at it! ?

P.s. also: powerups, and bonus items falling from bricks are always fun!

 

[8Observer8]

I did not see the third row of blocks.

[Little Sharky]

On 1/3/2019 at 8:53 AM, Wolfsbane said:

Oh, come on, that's not a game over yet! It's clearly hitting the paddle!

I guess this is one of your first game, so congrats! That's not too much to talk about for the game.. It's the type of game that's pretty simple. You've got the basic mechanics down which is great, but there's also lots of room to improve if you're wanting to put the time in. I'd add the ability to mouse control.

It sucks if you don't get any feedback just because it's a bit simple. So we may as well just have a chat. What are your plans for the game (or just for the game design in general?) If you just want to learn how to build a basic game with javascript, then congrats, you've done a good job. The first few games are the hardest, and it'll only get easier for the next game (technically, anyway). 

Did you code it all from scratch, or are you using an engine?

If you want to keep building on the design for this game, then I can try give some feedback and pointers.

I've built a breakout myself, so I've done a lot of digging and research on the genre. It's still possible to do something unique, and pretty cool in it. Or even something not that unique, but still cool. 

I'd recommend giving this article a read:

https://www.gamasutra.com/view/feature/1630/breaking_down_breakout_system_and_.php?print=1

It's.. basically, fantastic! The article is about 12 years old, but a lot of the stuff it talks about is completely relevant for today. It talks about a lot of the different design options there are to go for.

For me(personal preference): I dislike the style of ball movement that you have in this one. The player(me) has no control over where the ball goes. It can lead to levels where the ball is just bouncing almost up/down and constantly missing the last brick for a good minute or two. 

I like it when I can control the balls movements by hitting the ball on the right or left side of the paddle. I.e. ball hits the right most corner of my panel, I know theball will then bounce to the right, etc.

Some breakout games have fixed ball movement (ball moves at a hard 45/35 degree angle) but it works out ok due to their level design. The ball bounces around, and gets in behind the various places on the level. Nice.

But this is just a personal preference for ball movement. If you stick with this, then I'd suggest you have a think about the level design, or add some kind of feature to stop the player getting bored if they just have to get the last few bricks, and the ball is just bouncing up and down.. not challenging.

One idea for this: Is you could add a condition. Once you're down to the last few bricks, then a present? (or a few presents) can fall from the sky for the player to grab. This add's something interesting.. the player still has to knock the ball around while he waits for the ball to hit the last brick, but the player now has to time the bat, so he can hit the ball, scoot off to grab a present, then get back in time to knock the ball again. 

It's a small idea, but it's a little something extra you can add to the design to keep the player going. The player knows that at the end of each level, they'll get a short challenge to grab the bonus present before the end.

Long post, but.. keep at it! ?

P.s. also: powerups, and bonus items falling from bricks are always fun!

 

Thanks for the post appreciate you going into so much depth!

I wanted to get the game working on mobile devices for day of release but decided against and thought best to add post-release. Hadn't considered mouse support but sounds a good idea to supplement the keys.

Cheers yeah I'd like to make some enhancements, mobile as mentioned above, different themes so not Xmas (which made sense considering the release date) and toyed with the idea of save game files to import/export on different devices, I'm using browser local storage so shouldn't be too tricky to implement.

Its all hand coded but used Mozilla tutorials (massive thanks to them for such awesome tutorials and documentation). I decided to use a different code style (function expression over function declaration) as a challenge and means to learn so am chuffed with that.

Its quite inspiring to get something finished to be honest, iv looked briefly at Phaser and Babylon, but fancy the new version of Phaser as its ES6 style (so I get to learn that plus the engine). 

I really like the idea of power ups, like you say it does get a bit repetive when waiting for the ball to navigate toward the bricks. I agree the ball movement could be better as feels a little stiff, so I'll try power ups to add some more dimension.

I considerd the idea of a 'rumble' feature which would alter the balls path, I kind of thought it would be similar to a pinball machine.

Thanks for the link to the article I haven't checked it out yet but iv read a few on Gamasutra and usually really good.

If you have any links to your Breakout / others feel free to pass on. Have you any experience with Phaser / other engines?

Thanks again for taking the time to feedback, really helpful.

LS.

[Little Sharky]

1 hour ago, 8Observer8 said:

I did not see the third row of blocks.

Hi

Thanks for checking out the game. Thats weird i haven't seen that before, was it the bottom or top row? What browser was you using? I have found it works best in Chrome, but Firefox and Edge also appear to work.

Feel free to take a screenshot, would be interesting to see if i can replicate.

Cheers. LS.

[8Observer8]

I am using

• Chrome Version 71.0.3578.98 (Official Build) (64-bit)
• Notebook with a size of a monitor 15'

Ok, I will make a screenshot.

See:

[8Observer8]

Music and Snowman are scary. Especially if you play at night. I feel that Krampus somewhere near.

[Little Sharky]

On 1/10/2019 at 5:37 AM, 8Observer8 said:

I am using

• Chrome Version 71.0.3578.98 (Official Build) (64-bit)
• Notebook with a size of a monitor 15'

Ok, I will make a screenshot.

See:

 

On 1/10/2019 at 5:55 AM, 8Observer8 said:

Music and Snowman are scary. Especially if you play at night. I feel that Krampus somewhere near.

Thanks for pointing out. I have the canvas set to 620px high and 900px wide so the browser should display a scrollbar when the viewport cant display everything it needs in one go. Its not great having to rely on the scrollbar in my opinion so i may move the stats box on the left to win back more vertical space for desktop gameplay.

Im currently working on a mobile friendly version so i will probably touch on canvas rendering for different screen sizes as part of that work.

Ha yes i might create a 'scary' mode actually, make the theme scarier / darker, and see if i can throw in some strange things to make it a little more interesting.

Cheers 8Observer8.

[ShrewdPixel]

Great going making what appears to be one of your first games! Play tested using Chrome on MacOS Mojave.

After looking over the responses to the post and playing the game for a bit, there's not a lot for me to add. But one thing I can definitely recommend from making a breakout style game myself is adding directional aim with the paddle. (Basically, adding code so that if the ball hits the center of the paddle it goes straight up, but if it hits the sides of the paddle it goes flying off at the angle it's on, allowing the player to aim their shots with it.) It cannot be overstated how much this adds to the fun and strategy to the gameplay. 

I've attached a screenshot that illustrates that a bit. (FYI, it's from the book Hands-On Intro to Game Programming). Also, here's a code snippet from when I last made a breakout game to illustrate how to write such a function:

function paddleHitsBall() { // Handle the paddle sending the ball away after a bounce
    ballSpeedVertical *= -1; // Send the ball back upwards at the same speed
    var centerOfPaddleHorizontal = paddleHorizontal + PADDLE_WIDTH/2; // compute what the center of the player paddle is
    var ballDistFromPaddleCenter = ballHorizontal - centerOfPaddleHorizontal; // compute the distance from center the ball hit the paddle
    ballSpeedHorizontal = ballDistFromPaddleCenter * 0.25; // Left/Right speed of ball is determined by distance from center with 1/4 modifier
  }

Basically, you measure where the center of the paddle is, and base the horizontal speed on how far the ball hit from that center.

I hope that feedback helps with your progress, and most all Good Luck!

[Little Sharky]

On 1/29/2019 at 3:44 PM, ShrewdPixel said:

Great going making what appears to be one of your first games! Play tested using Chrome on MacOS Mojave.

After looking over the responses to the post and playing the game for a bit, there's not a lot for me to add. But one thing I can definitely recommend from making a breakout style game myself is adding directional aim with the paddle. (Basically, adding code so that if the ball hits the center of the paddle it goes straight up, but if it hits the sides of the paddle it goes flying off at the angle it's on, allowing the player to aim their shots with it.) It cannot be overstated how much this adds to the fun and strategy to the gameplay. 

I've attached a screenshot that illustrates that a bit. (FYI, it's from the book Hands-On Intro to Game Programming). Also, here's a code snippet from when I last made a breakout game to illustrate how to write such a function:

function paddleHitsBall() { // Handle the paddle sending the ball away after a bounce
    ballSpeedVertical *= -1; // Send the ball back upwards at the same speed
    var centerOfPaddleHorizontal = paddleHorizontal + PADDLE_WIDTH/2; // compute what the center of the player paddle is
    var ballDistFromPaddleCenter = ballHorizontal - centerOfPaddleHorizontal; // compute the distance from center the ball hit the paddle
    ballSpeedHorizontal = ballDistFromPaddleCenter * 0.25; // Left/Right speed of ball is determined by distance from center with 1/4 modifier
  }

Basically, you measure where the center of the paddle is, and base the horizontal speed on how far the ball hit from that center.

I hope that feedback helps with your progress, and most all Good Luck!

Thanks ShrewdPixel, ill be looking to jump back into the game and make some more updates (working life and a baby have certainly taken up lots of time!).

Appreciate you taking a look over the game, definitely agree the directional aim will add some more fun to the gameplay so ill look to add that in see how it goes. Cheers for the code snippet too!

LS.