Bubble breaker!

Bubble breaker!

It is a HTML5 canvas game.

_____HOW TO PLAY__

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:

<link rel=”stylesheet” href=”bubble.css”> <script src=”lib/easeljs-NEXT.combined.js”></script> <script src=”lib/tweenjs-NEXT.min.js”></script> <script src=”lib/soundjs-NEXT.min.js”></script> <script src=”lib/preloadjs-NEXT.min.js”></script> <script src=”Orb.js”></script> <script src=”Main.js”></script>

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”]


INFO: The codes are commented for your guidance.

There is also a css file named “bubble.css”. Edit this css file to change the outline of the html5 file.
  • You do not need to buy any software or anything extra to run this game.
  • No programming knowledge needed to change the graphics or to re skin.
  • The game screen scales to any device screen.The maximum witdh is 1360px and height is 650px.

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.