Exploding Boxes Of Color


Ebocs is a browser-based "Same-Game" clone. This was a weekend project I created to try out the then-new raphael.js library for manipulating SVG. The result was a fun, addicting game which worked well in most browsers.

Screenshot of the first level
Ebocs runs really well in webkit browsers and Firefox. I have never tried to run it in IE and my Android 2.2 browser doesn't support SVG. While it does work on the iPhone and iPad, the framerate is only around 19fps. There is a lot of room for optimization and cleanup, however.


More colors and/or number of boxes as difficulty increases
This style of game has numerous clones - the idea is to remove boxes by selecting adjacent groups of two or more having the same color. My intent was not to create a new type of game, but to make a lightweight browser version with minimal interface, quick load time, rewarding animations, and challenging leveling. The game rewards users for clearing large groups of boxes with multipliers and encouraging comments.

Mouseover highlights the group
If the player fails to clear every box, each box is counted against his total score. A negative score results in a loss. Early levels are easy to build confidence. Levels which follow add colors and number of boxes to increase the difficulty of clearing every box. Difficulty increases occur in two phases with a easy "bonus" level between phases, in hopes of delaying discouragement. The final level is a rewarding surprise for the few that get that far.

As a group is cleared, each box breaks up into four smaller pieces which fly off at random as if the box had exploded. Large groups result in big explosions. The boxes above the now disintegrated boxes drop down and bounce to stop. If an entire column is cleared, the columns to the right of the cleared column slide left.


Clicking explodes the group. Large groups result in score multipliers and encouraging comments.
Raphael.js' API was a lot of fun to work with. SVG's built in animations support and vector shapes were a good match for this type of game.

The boxes are stored in a multidimensional array, the first index being the column index, then the row index from bottom up. If the configuration of boxes change, all adjacent groups of colors are marked with group numbers using a recursive method.

As an anti-cheating measure, the intial configuration is stored along with a history of each move. This allows a server based version of the game to be played when the score is posted and detect any invalid moves, or different final score.

Future Plans

I have no plans to continue working on this. It would be interesting, however, to modify the game to only use CSS3 transformations and compare performance, especially on mobile devices.