JavaScript 2D Brick Breaker Game

Hosted Project

JavaScript Brick Breaker Game

GitHub Source Files

https://github.com/JS-Beginners/brick-breaker-game

Project Objective

The objective of this project is to code a two dimensional JavaScript brick breaker game using the HTML Canvas Web API.

JavaScript Used

• HTML Canvas Web API
• JavaScript functions
• 2 dimensional arrays
• event listeners
• control structures

My Personalize Summary

I don't think this is a beginner project, so I tagged it as intermediate. The code itself is beginner because the project doesn't use any JavaScript that I haven't used before, but the logic of making the game work is what's intermediate to me. This project uses math to manipulate the bounces off the wall and paddle and also uses math to create the bounce rate of the ball. If someone were to ask me to create this game from scratch, it would take me a very long time. So, for this game, I ended up watching the JavaScript Brick Breaker video solution and implementing as the instructor explained the game. Luckily, this same Brick Breaker Tutorial can also be found, in full, on the MDN website, if you want a step-by-step solution on how to get it done.

New Things Learned or Refreshed

I haven't used the HTML Canvas for many projects, so it was good to refresh my memory on how to draw shapes with the HTML Canvas. The instructor also had a mini-lesson on how the coordinate system work in HTML. There were concepts that together made the project intermediate for me. Concepts like 2-dimensional arrays, nested for loops, and nest if statements. I found myself writing a lot of notes. When I go through this project again, hopefully I'll have sufficient notes to help me complete this project. The most interesting thing about the project was the collision detection. I still have to go back through the code to understand exactly why and how the bricks disappear.

Time to Code

This project took me about 4 hours to follow the instructor and research my own solution when I found that my code wasn't quite correct at times.

Lines of Code

This project uses around 175 lines of JavaScript code, including white space and my code comments.

Your Turn!

What to Accomplish

1. Download the source code from the github repository above.
2. Delete the contents of the app.js file.
3. Implement the JavaScript code in your own app.js file.
4. If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
5. Add a link to your finished project below!

What You Should See

Visit the hosted github page to see this JavaScript Brick Breaker Game in action.

Need to see the video solution for this project?

Get BlueLime's JavaScript for Beginners: Create 27 Projects from Scratch Course