This photo illustrates the environment: https://i.stack.imgur.com/uLPNp.png

I'll shoot the cannon, it'll bounce off the wall and it's SUPPOSED to stick to the bubble. It does at pretty much every other angle. The problem is always reproduced here, when hit off the wall into those bubbles. It also exists in other cases, but I'm not sure what triggers it.

What actually happens: The ball will sometimes set to the wrong cell, and my "dropping" code will detect it as a loner and drop it off the stage.

**There are many implementations of "Frozen Bubble" on the web, but I can't for the life of me find a good explanation as to how the algorithm for the "Bubble Sticking" works. **

I see this: http://www.wikiflashed.com/wiki/BubbleBobble https://frozenbubblexna.svn.codeplex.com/svn/FrozenBubble/

But I can't figure out the algorithims... could anyone explain possibly the general idea behind getting the balls to stick?

Code in question:

    //Counstruct our bounding rectangle for use
    var nX = currentBall.x + ballvX * gameTime;
    var nY = currentBall.y - ballvY * gameTime;
    var movingRect = new BoundingRectangle(nX, nY, 32, 32);
    var able = false;

    //Iterate over the cells and draw our bubbles
    for (var x = 0; x < 8; x++) {
        for (var y = 0; y < 12; y++) {
            //Get the bubble at this layout
            var bubble = bubbleLayout[x][y];
            var rowHeight = 27;

            //If this slot isn't empty, draw
            if (bubble != null) {
                var bx = 0, by = 0;

                if (y % 2 == 0) {

                    bx = x * 32 + 270;
                    by = y * 32 + 45;

                } else {
                    bx = x * 32 + 270 + 16;
                    by = y * 32 + 45;

                var targetBox = new BoundingRectangle(bx, by, 32, 32);
                if (targetBox.intersects(movingRect)) {
                    able = true;




   cellY = Math.round((currentBall.y - 45) / 32);

if (cellY % 2 == 0)
    cellX = Math.round((currentBall.x - 270) / 32);
    cellX = Math.round((currentBall.x - 270 - 16) / 32);

Any ideas are very much welcome.

Things I've tried:

Flooring and Ceiling values Changing the wall bounce to a lower value Slowing down the ball

None of these seem to affect it. Is there something in my math I'm not getting?


1 Answer 1


Model the playing field as a hexagon grid. Each bubble is actually a hexagon shape for its connections:

enter image description here

Each flat side is where a bubble can connect. When a bubble touches another bubble, snap the bubble in motion to the nearest hexagon grid location.

Finding the nearest is essentially a picking operation, so the math for finding where the bubble will stick is the same. You can find some great answers for that here.

  • \$\begingroup\$ I learned this a while back (this was asked in August of last year) and this was pretty much the solution. Flooring the coordinate was simply not enough, the math was off. Thanks for taking the time to reply, anyway. I'm sure it'll be helpful to someone in the future who was a bit naive like me. :) \$\endgroup\$ Mar 15, 2013 at 20:14
  • \$\begingroup\$ No worries, I saw that it was unanswered, so I took a shot at it. I figured you'd already solved it, you should answer it yourself! You can still provide another answer with how you actually solved it. \$\endgroup\$
    – House
    Mar 15, 2013 at 23:58

Not the answer you're looking for? Browse other questions tagged .