Arkanoid in 5 minutes

About

Arkanoid is a classic game developed in 1986. It's a block breaking game. Goal of the game is to control a paddle (or a bat) to control a ball that can clear the formation of colorful blocks.
The ball can deflect from left, rigth and top sides of game field, but it's not allowed to leave from the bottom side.

Link to Wikipedia: https://en.wikipedia.org/wiki/Arkanoid

Live coding

Here is a live coding session that shows how it can be done.

Duration: 4:25 (coding - 4:21)

Disclaimer: never use this code in production. It was created for fun.

Breakdown

Let's break down the solution and comment on some complex or interesting things.

0:00 - As usual starting with template for the game - HTML canvas element plus a placeholder for script.

0:08 - define a couple of constants that will be used in the game:

• w and h - dimensions of the game field
• ballSize - the size of the ball
• brichW and brickH - size of the bricks
• batW and batH - size of the bat that will hit the ball back

0:15 - some variables that will determine the game state:

• ballX and ballY - location of the ball. Note that it will be the center of the ball
• dx and dy - direction of the ball movement
• bricks - array of the bricks. It will contain 3 properties: x and y will represent top-left corner of the brick on the screen, active flag will tell if the brick is still in the game or not
• batX and batY - coordinates of the center of the bat

0:29 - everything will be drawn on HTML canvas. We need to get ctx - it will be canvas' context. Also resize the canvas to x and y.

0:32 - define the template for the game. These are 4 main functions:

• init - initialization of the game, like bricks creation and placement
• draw - responsible for drawing current game state on the screen
• move - handle all actions related to ball movements, deflections and hitting the bricks
• game - basically calls move and draw

Also we schedule game function to be executed every millisecond (or less often - depends on the browser's performance).

0:48 - initialize the bricks. Bricks will be located on the top of the screen in 4 rows, each row will contain by 2 bricks less than a row above. It is not crucial, but I think it will make initial game field more interesting.
Also locate the ball in the middle of bottom part of the screen and define dx and dy so that it will first move to the top right.

1:09 - define couple of helper functions to draw the field:

• drawRect will draw a rectangle filled with a defined color plus a border around it
• drawCircle will draw a circle filled with a defined color

Then drawing the game state has the following step:

• Draw grey background as a rectangle
• Draw the ball as red circle
• Draw all visible (active) bricks as green rectangles
• Draw the bat as blue rectangle

2:07 - checking the first results in the browser.

2:12 - start implementation of move function.
First of all we handle deflections from left, right and top sides of the game field. In this case we only need to change dx or dy to opposite value.
Remember that ballX and ballY represent center of the ball - so we need to take care of ballSize as well to find one when the deflection actually happens.
When ballY is bigger than batY this means that the ball cannot be deflected back to the field - it will mean that the player has lost. We will handle this situation later.
Deflection from the bat is more complex - we need to make sure that the ball hits the bat within bat's coordinates.
Finally - move the ball by dx and dy

2:47 - again checking the results in the browser. Expect that the ball will bounce from 3 walls (left, right and top) and will accidentaly hit the bat.
Note that for now ball goes through the bricks. We will fix it right away.

2:56 - breaking the bricks is somewhat similar to hitting the bat. We need to check (for every active brick) if ball hits any of brick's sides (it can be left, right, bottom or top part of the brick).
If so - brick should disappear and the ball should bounce back.
Here I made a shortcut that in case a brick is hit the ball bounces back by dy. This means that if ball hits a brick from the left or from the right - it will still bounce back to the top or to the bottom.

3:28 - again checking results - now the ball should break the bricks.

3:37 - there are 2 things left:

• check if the game is over
• ability to move the bat

For "game over" functionality we have everything in move function: it returns false if the ball is outside of game field and true if it was a good move. So if move returns false we just show an alert window and start the game again.

3:46 - moving the bat requires to have keydown event handled.
We are interested in key codes 37 (move left) and 39 (move right).

This finishes the implementation of the game.
Few things that can be improved - I will leave it as a homework:

• Require to hit a brick multiple times before it disappears
• Lives for the player
• Game score - how many bricks are hot

Resources

Sources: https://github.com/5minute/examples/tree/main/arkanoid

See live results:https://jsfiddle.net/mg4anteq/