Breakout Blocks
Click here to go back to main page
Breakout Game (w/ Advanced Features)
Hack #1 (90%): Change Colors
Look in the javascript and change the paddle and brick colors.
- Pick a new color for the paddle and the bricks.
- Change the Colors to update the game design.
- Tip: High-contrast colors look best on a light background.
Hack #1 (100%): Go Further with Colors
- Try creating a color picker below the game script to change the color of the ball or blocks on the fly.
- Extra challenge: Try using gradients.
Hack #2 (90%): Change Ball Speed
Look in the javascript and change the ball speed.
- Pick a new speed for the ball.
- Change the ball speed to update the game design.
- Tip: Don't make the speed to high! It will be too hard!
- Hint: Early in the script, certain variables determine the speed of the ball. You will need to increase/decrease these numbered values to increase the speed of the ball.
Hack #2 (100%): Advanced Ball Speed
- Make the ball speed up each time it hits a brick or the paddle.
- You may do this by changing the variable used in the 90% hack by set increments each time.
- Also, try adding a "slow motion" mode where pressing a button halves the speed of the ball during the play session.
Breakout Game Lesson
Learn the Basics
Learn the basics of building a Breakout-style game in JavaScript.
In this lesson set, you’ll code the paddle, control it with the keyboard, and then add power-up bricks with timers to make the game more dynamic.
- Understand how the paddle and ball mechanics work.
- Learn how to create interactive bricks and power-ups.
- Practice using timers to make the game more engaging.