Bubble Breaker, The Web Version

Download source - 29.69 KB

Introduction

I love to play Bubble Breaker on my Windows Mobile cell phone, especially when I am waiting in line, etc. The game is fun and does not take too much effort, it is not easy on your eyes, however. I wondered if I can write a web version of this game and before I knew it, I was deep into coding and here is the result of my one day's work.

Note: The game is part of Windows Mobile, all I did is create a web version which I doubt I am the first person to do. Anyway, I do not have the original source code of the game, some features such as sound effect are left out and the algorithm I used to calculate the score is apparently different from the original game.

I apologize in advance to all color-challenged readers.

The Game

When starting a new game, you will see bubbles (balls) of 5 different colors placed into a 12x11 grid on the screen. If there are a set of at least two bubbles of the same color next to each other in horizontal or vertical lines, you can click anyone in the set to make the whole set break/disappear, and your score will be increased as a result.

The key to get a high score in this game is pick a color and make your moves to move as many bubbles of this color together and then break the whole set with one click. This is because the way the score is calculated favors sets of higher counts. For example, if you break two sets of 8 bubbles each, you will get a much lower score than if you break a set of 16 bubbles.

Whenever there is no more possible move you can make, you will be prompted to enter your name, which will be recorded in the internal score list XML file.

One new feature I added to improve the game over the Windows Mobile version is you can undo as many game steps as you would like to (my cell phone only allows me to undo one step). Another is you can view the list of the last 30 high scores. See picture below.

The Tricky Code

As you can see, the project is very simple, but the code is tricky, to say the least. One thing I loved while working on this project is, I get to make recursive function calls. I don't remember when was the last time I did that!

The function IsConnected checks two bubbles on the screen to see if they can be "connected" by bubbles of the same color. This is where recursive function calls saved the day. If the two bubbles are not next to each other, how do I know programmatically if they can be connected by bubbles of the same color?

Let's say we want to check Bubble A and Bubble B. The strategy is, if Bubble A and Bubble B are next to each other, then we check the colors directly. Otherwise, we check if there exists a bubble next to Bubble A (a neighbor) that is connected to Bubble B. If one such neighbor exists and Bubble A is connected to that neighbor (they have the same color), then we can conclude that Bubble A is connected to Bubble B. This part is accomplished by recursive function calls. Who said mathematics is not useful in solving real world problems? :-)

However, the above strategy is not enough. In fact, it can lead you to go around in circles and eventually, stack-overflow! Now, engineering skill is needed. Basically, we need to mark the bubbles the program has already visited to prevent it from going around in circles with recursive function calls. And that's exactly what I did.

Another thing you might learn from the code, if you are a beginner, is the simple use of ASP.NET session, which saves a lot of coding.

How to Use the Source Files

I did not include any binary. To use the code, you need to:

Unzip source files into a folder.
Start Visual Studio 2005.
Select menu "open website", then navigate to the source file folder, and open it.
Start play, or code if that's more interesting to you.

History

01/14/2010: Initial version posted
01/15/2010: Improved how score for each bubble is calculated. Previously it was done one bubble at a time, now it is done one set at a time. This makes it visibly faster. Also fixed a hole of cheating using by "undo last move".
01/16/2010: Added bonus in score calculation. At the end of game, eliminating each color completely will cause total score to increase by 20%.
01/21/2010: Fixed a problem with "undo last move", modified article text.