2D breakout game using pure JavaScript - MDN Game Development Tutorials
This is a step-by-step tutorial offered by MDN Web Docs.
It's just a repository for practicing and studying Vanilla JavaScript. In this tutorial we create a simple MDN Breakout game written entirely in pure JavaScript and rendered on HTML5 <canvas>.
Every step has editable, live samples available to play with so I can see what the intermediate stages should look like.
The level of this tutorial requires intermediate JavaScript knowledge. After working through this tutorial I should be able to build my own simple Web games.
The tutorial is divided in 10 sections:
- Create the Canvas and draw on it
- Move the ball
- Bounce off the walls
- Paddle and keyboard controls
- Game over
- Build the brick field
- Collision detection
- Track the score and win
- Mouse controls
- Finishing up
I will practice the basics of using the <canvas> element to implement fundamental game mechanics like:
- rendering and moving images;
- collision detection;
- control mechanisms;
- and winning and losing states.
Each topic will be studied in 2 days, one day for reading and developing and another for practicing the concepts. Thus, the whole tutorial will be completed in 20 days or less.
1. Create the Canvas and draw on it
2. Move the ball
3. Bounce off the walls
4. Paddle and keyboard controls
5. Game over
5 (Bonus). Increasing the difficulty and creating a SCORE
6. Build the brick field
7. Collision detection
8. Track the score and win
9. Mouse controls
10. Finishing up
I've been learning many canvas features this last days, and I learned how to draw and make movements using canvas. Now it's time to improve the game and code a new one from scratch.
This game can be improved adding movement angle depending on the paddle side the ball hits it, if the ball hits centre to left side the ball movement is to the left, if the ball hits centre to right the ball moves to the right.
Another thing is creating a start button, that makes the start game only when we click the button.
Changing the number of bricks or giving "lives" to the bricks is another game improvement.
Today the game has normal to hard difficulty, but it's possible creating a difficulty button in the very game beginning as well.
Canvas is not something hard to learning, but depending on what we want to do it's not so simple. Because of this project I decided draw the logo of an online school that taught me the basics of JavaScript, CSS, and HTML, the Ingate Educa logo. It was too hard, specially because I needed drawing each Bézier curve one by one. It's not impossible, but... it's not the best thing to do, I did it only for learning, because we have many tools and things better than canvas today.