javascript - Creating a frozen bubble clone

This photo illustrates the environment: http://i.imgur.com/V4wbp.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;
                }


                //Check
                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);
else

    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?

Answer

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

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.