Javascript lesson seven. Arcanoid game. Finally, Arcanoid!

Hello there,

today we eventually make the our code behave like the real Arcanoid game. Since we have the backbone ready, we will only polish some aspects of logic. All the general concepts are left untouched.
Ok folks, let’s go!

Ball behavior

Well, during the previous lesson we made the ball moving inside the playground. The algorithm of reflecting from walls inside the rectangular box is relatively simple:
branch lesson/06 → file ball.js → method .move().

Now we have to improve the logic:

  • if the ball hits vertical borders or the ceiling, leave the logic as is;
  • if the ball is going to hit the ground,
    • if the ball hits the racket, do reflect,
    • else Game Over, Looser!
  • If the ball hits the brick,
    • reflect the ball (respecting which side the ball hit!),
    • destroy the brick.

So how we can do it?

The branch lesson/07 contains following amendments:

  • the constructor GameObject now accepts two optional parameters: dx and dy. We need ’em to make the .reset() method work fine.
  • Some logic added to the reflect-ball-from-top/bottom conditions. The logic distinguishes behavior for hitting the racket and for hitting the brick.
  • The reflect-ball-from-racket is realized in following way:
if (ball.bottom >= {
  if (/* the ball is over the racket */) {
    // reflect the ball up
  } else {
    // The ball falls on the ground.
    // Die, die, die my darling!
  • The reflect-from-brick is realized using GameObject.prototype.intersect() method. We got it from previous lessons. The principle is very easy:
if (
  /* distance between two X-centers */ <= width_1 / 2 + width_2 / 2
  && /* same about Y and heights */
) {
  return true;
} else {
  return false;
  • There is some sick magic in this area detecting where the ball came from: does it hit the brick from the top/bottom, or from the left/right.
    This is important for reflecting the ball in horizontal or in vertical way.


  • The .bottomLine property was added to the Bricks array.
    If the ball is below the Bricks.bottomLine, we don’t even try to traverse all the bricks and check if the ball hits any.
  • The reflect-from-racket logic takes into accounting which part of the racket was hit by the ball:
    • the central part behaves like the straight mirror,
    • peripheral parts of the racket change the ball movement angle like curved mirror does.

New events

I put both conditions for you-won and for you-lose to the ball movement logic. It looks like we are going to get rid of Actor.winsWhen() methods. Why? — it’s more effective to check these conditions in the Ball.move() because we can do precise checking (not during every frame).

For instance, the user cannot win when the ball is below the Bricks.bottomLine and they cannot lose when the ball is high enough.

Both you-won and for you-lose events are listened by GAME.doScenario(). Currently only console.log() appear but you can design any response you wish.

So folks we made our code look like the real Arcanoid. Next time we will add some game stats, levels and will improve the gameplay.


One thought on “Javascript lesson seven. Arcanoid game. Finally, Arcanoid!

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s