Hosted Project
JavaScript Brick Breaker GameGitHub Source Files
https://github.com/JS-Beginners/brick-breaker-gameProject 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
- Download the source code from the github repository above.
- Delete the contents of the
app.js
file. - Implement the JavaScript code in your own
app.js file.
- If you think you need to see a video solution first, be sure to pick up Bluelime's 27 JavaScript Projects Beginner Course .
- 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
When I initially commented I clicked the “Notify me when new comments are added” checkbox and now each time a comment is added I get four e-mails with the same comment.
Is there any way you can remove me from that service?
Thanks!
You can just click the unsubscribe link at the bottom on your email.
Best Books December 2018 Bser 12th Result 2019 By Name Wise
Have a look at my web blog … bog
I like the valuable information you provide on your articles. I will bookmark your blog and check once more here frequently. I am quite certain I will be told lots of new stuff right right here! Best of luck for the following!