Creating simple block breaking game using CreateJS

Breaking bricks is the most popular game you may played sometime online or offline and you would like to make it as a beginning of game development.
Creating simple block breaking game using CreateJS
Here I am going to show you how simply you can create break it game in HTML5 using CreateJS. CreateJS is the collection of libraries which allow us to create interactive content on HTML5.
Understanding game and development flow.
Before start code the game. We need to first understand how game will be played and what will be the development flow.
The game is simple. The player must be prevent the ball to go out the stage by moving paddle left and right .


And the flow of development . . .

  1. Setting up game file structure and interface
  2. Declaring game constants and variables
  3. Initializing the Game
  4. Creating Rest of the Game Elements
  5. Moving Paddle with Mouse Input
  6. Creating Game Loop
  7. Run and Test the Game

Setting up game file structure and interface

Now we have complete understanding of game and its flow. Let’s create first HTML file and include createjs cdn into it. Add game souce code file and name it game.js file. Add canvas into HTML, set canvas width 800 and height 600 which background color black.

Now style the game fontend interface by adding css style.

After setup html file you must see something like below on browser.

Creating simple block breaking  game using CreateJS

Now move into the game logic…

Declaring game constants and variables

Before start write game logic lets declair required constants and variables which will be used in throughout the game. Generaly constants and variables are declaired at the top of the script.

Constants represents the value won’t change during the game play. The first two constants are defined for side wall thickness and its color. Then paddle width, blocks distance from wall and block size. And lastly ball speed and its radius.

Then variables

In the first set of variables is created for stage and other visual elements such as paddle and ball. The blocks array will initally start with empty and will be used to store all the blocks while creating, reading and deleting each individual block runtime.

Initializing the Game

Here we will initialize the game from init function which we call after load all the essantial assets and game elements which we required in game.

Since we are not using any image graphics elements or sounds in this game, so there will be no content to preload. Lets call call init function after load html body.

And now init function.

CreateJS has its own methods to create stage by getting canvas reference, that you can see first two lines of code in above function. The third line of code is for add the listner to stage on mouse move, so user can move the paddle by moving mouse left and right. Other four functions to create game elements like side walls, paddle, ball and blocks. And the startGame function will trigger the gameLoop and handle all the animations of game. See the function below.

Creating Rest of the Game Elements

Now its time to create all game elements like we discussed above, that is side walls, paddle, ball and blocks.

First we need to build the walls all the sides of the stage as a boundry of game so ball will no go outside the stage.

In above code we have created four walls on left, right, top and bottom edge of the stage one by one. And below is the result you can see.

Creating simple block breaking  game using CreateJS

Now create paddle and ball.

Creating simple block breaking game using CreateJS

Now we have created paddle as wel ball. You can see in createBall function we have set x and y velocity for ball to control the ball x and y speed with its direction on the stage. We will see this in next section.

Let’s see how to create all blocks. See the function below.

Here I am going to create all the blocks and place them in two rows with alternate color. Simultaneously I will store each block into blocks array so I can access each block later in game loop to check collision between block and the ball.

Creating simple block breaking game using CreateJS

Now it’s time to move paddle on mouse move.

Moving Paddle with Mouse Input

You might be seen in this kind of games generally paddles are moved by left and right key or keyboard inputs. But what about moving paddle on mouse left right movement. To do this first of all we have to add listener mouse move listener to stage to get mouse x co-ordinates when mouse will move on stage.

The above line of code we have added in init() function after created the stage.

Now create the movePaddle() function which will call on mouse move event.

As you already know we just want to move paddle left and right. So we will only use mouse X coordinates. Add the above logic in your code and see the result.

Creating simple block breaking game using CreateJS

Creating Game Loop

Now we have created all the elements with moving paddle. Now it’s time to create game loop and check ball collision with walls blocks and paddle one by one and change the ball direction.

Run and Test the Game

Finally the game is ready to test. So let’s run the game and test it.
Creating simple block breaking game using CreateJS

0 replies

Leave a Reply

Want to join the discussion?
Feel free to contribute!

Leave a Reply

Your email address will not be published. Required fields are marked *