paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 9-10-13

JavaScript Primer & paper.js tutorial

BEG: Beg To Differ Bubble Drop Game - 04


Dropping the Balls - Bubble Game Logic


This is the complete gameControlCircle function code (up to now, we'll be adding more in a bit).  Areas of special interest are highlighted in red, but I believe most of this has been covered before, so probably not much commentary today.

The game above has an error/bug in it as explained below.  I'll remove the comments on that code next time (it's written, just commented out) to place it back in the program prior to loading the next page in the series).


function checkGameControlCenterCircle(event){

    if (gameControlCircle.contains(event.point)){
   
        var hitCount = 0;
        var dropCircle = true;
        var dropTempCircle = new Path.Circle(CP, 1);

       // this area of code counts the number of bubbles highlighted
        for (i = 0; i <= gTNV; i++){
            for (j = 0; j <= gTNH; j++){
                if (gameCircle[i][j].strokeWidth === 10){
                hitCount += 1;
                }
            }
        }
   
        // if two or more gameCircles highlighted, this block fires
        if (hitCount > 1){
            for (i = 0; i <= gTNV; i++){
                for (j = 0; j <= gTNH; j++){
                    // resets strokeWidth to zero, visible is new Marker
                    if (gameCircle[i][j].strokeWidth === 10){
               
                        gameCircle[i][j].strokeWidth = 0;
                        gameCircle[i][j].visible = false;
                        gameCircle[i][j].strokeColor = gameCircle[i][j].fillColor;               
                    } 
                }  // at this point, the strokeWidth is no longer the marker, visible is
            }  // close outside for, no marked, those that were are now visible=false

            // dropCircle    // this code drops the circle, I'll review in depth below  
            // dropCircle code, visible = false, is the marker;
            while (dropCircle){
                dropCircle = false;

                for (j = 0; j <= gTNH; j++){    // notice reverse order H vs V
                    for (i = gTNV; i >= 1; i--){    // notice reverse countdown
   
                        if (gameCircle[i][j].visible === false){
                            if (gameCircle[i - 1][j].visible === true){
                                dropCircle = true;
                            }
                            gameCircle[i][j].fillColor = gameCircle[i - 1][j].fillColor;
                            gameCircle[i][j].visible = gameCircle[i - 1][j].visible;
                            gameCircle[i - 1][j].visible = false;
                        }
                    }
                }
            } // end bubbleDrop, wrapping while   
       
          // this code eliminates an error whereby selecting an invisible circle, activates code
          // we haven't really resolved all the areas of conflict for this item, but program works
          // and with no scoring, the side-effects don't matter
          // (it would be possile to select all black circles at this point and score massive points at the end game
            // if any point scoring system were in place)
            // takes visible = false Bubbles and sets color to black
            // thereby taking them out of the game
            // eliminates last row error
            for (i = 0; i <= gTNV; i++){
                for (j = 0; j <= gTNH; j++){
                    // TODO, REINSERT THIS CODE\
                    // SOLVES ERROR
                    //if (gameCircle[i][j].visible === false){
                        //gameCircle[i][j].fillColor = 'black';
                    //}
                }
            }
       
        }  // end hitCount if

    }  // end wrapping contain(event) if
}  // end centerCircle Control function  // and this is the end of the function



So, let's go over the dropCircle part of the code in greater depth:
            // dropCircle  
            // dropCircle code, visible = false, is the marker
            while (dropCircle){
                dropCircle = false;  // this was declared as true earlier, so while fires at least once

                for (j = 0; j <= gTNH; j++){    // notice reverse order H vs V
                    for (i = gTNV; i >= 1; i--){    // notice reverse countdown
                                               //   running the for's differently isn't requirement,
                                              // but for most conditions, run this way, the while code only fires twice
                        if (gameCircle[i][j].visible === false){  // Vertical is counted backwards, so higher number = lower ball
                            if (gameCircle[i - 1][j].visible === true){  // checks to make sure the gameCircle we are dropping is visible
                                dropCircle = true;          // it drops either way, but dropCircle toggle is only resel if it's visible
                            }                                        // otherwise, while would loop indefinitely
                            gameCircle[i][j].fillColor = gameCircle[i - 1][j].fillColor;  // the lower ball takes on higher ball's fillColor
                            gameCircle[i][j].visible = gameCircle[i - 1][j].visible;  // the lower ball takes on the higher ball's visibility
                            gameCircle[i - 1][j].visible = false;  //the characteristics of the upper gameCircle have been transfered to the lower one
                                                                                  // so upper ball is removed by making it invisible
                        }
                    }
                }
            } // end bubbleDrop, wrapping while 

After the above code fires, the following code will fire (once we remove the comments), which changes all invisible gameCircles fillColor to black.  I'm sure we can still select black gameCircles sight unseen off the board (under cloak of invisibility).  But for now, it's good enough.  I'm sure this will come back to bite us when we implement scoring, at which point I'll have to add a notIf to bubbleSelector code.

            // takes visible = false Bubbles and sets color to black
            // thereby taking them out of the game
            // eliminates last row error
            for (i = 0; i <= gTNV; i++){
                for (j = 0; j <= gTNH; j++){
                    // TODO, REINSERT THIS CODE\
                    // SOLVES ERROR
                    //if (gameCircle[i][j].visible === false){
                        //gameCircle[i][j].fillColor = 'black';
                    //}
                }
            }


Next thing to do is slide the dropped balls over to right whenever the bottom slot of any vertical stack is 'empty'.
Also, I changed the coloring down to two, so I have a target first goal of creating the variation of this game in which the only object is to clear the board.  (Clear it with two colors, then three, then four, etc.)



previous  -- BEG: Beg to Differ - Bubble Drop #3      paper.js tutorial index       next -- BEG: Beg to Differ - Bubble Drop #5




Back to BrettCode Home



Brett Words
my writing site (Home to the writing of Celli the Happy Go Lucky Celaphopod, Eddie Takosori, Fritz Heinmillerstein, Morgan Feldstone, Kevin Stillwater, and of course, me, your host, Brett Paufler)

paper.js official site = http://www.paperJS.org

© Copyright 2013 Brett Paufler