Post Format

Bubble breaker! (Games)

It is a HTML5 canvas game.

<i><em>________HOW TO PLAY_____</em></i>

Description: The player select one of same colored bubbles to make them disappear and thus earns points.But the player needs to be carefull if he wants to earn bonus points by eliminating all the bubbles.

Also the player can rotate the window containing the bubbles to get the bubbles to move and thus forming new lines with same color.

To do this, the player needs to click the “rotate” button.

Click “reset” button to reset the game and the board.

So if there is any bubbles left without a match at the end of the game, no bnous points is earned.
The tick is to eliminate the bubbles in a way to make sure there is no bubbles left.

  1. You can use the “bubble.html” file provided with the source files as the container html or page for the game. Simply copy and paste the source files in your desired web location or directory.
2. If you do not want to use the “bubble.html” file provided, and if you want to embed the game in an existing web page, just put in the javascript and css links in the webpage as below:

SO inside the “head” tag of the html file, after the “title” tag, add the following lines:


Make sure the “Orb.js” the “Main.js” and the “bubble.css” is in the same directory as the html file that will contain the game.

Also make sure the “lib”,”images”,and “sounds” folders are also in the same directory as the html file.

You can edit the “bubble.css” file easily with notepad.You can also edit the “Main.js” file same way.


3. To embed the game in wordpress website, make sure you have “iframe” plugins installed in your wordpress web site.

Then load the game in your www directory or web site, copy the url and paste the url inside the “iframe” tag.

[iframe src=”url address of the game”]



<strong>Source files included, in HTML5 and Javascript format.The “Main.js” file is the javascript file that contains all the game mechanism. So you can edit this file easily in notepad.

The codes are commented for your guidance.

You can easily change the graphics and sounds of this game from the attached “images” and “sounds” folder in the source files.

<strong>The game runs in all the devices that supports a web browser with HTML5.</strong>

It has local device high score system. SO the highest score is recorded.

<li>Easy installation. Just copy and paste the source files in you desired location. In the “bubble.html” file there is links to the library files and the javascript files.

There is also a css file named “bubble.css”. Edit this css file to change the outline of the html5 file.

<li>You do not need to buy any software or anything extra to run this game.</li>

<li>No programming knowledge needed to change the graphics or to re skin.</li>

<li>The game screen scales to any device screen.The maximum witdh is 1360px and height is 650px.</li>

Software used: A javascript library called the “Createjs”. It is open source and free to use. The library is included with the source files in the “lib” folder.

Leave a Reply