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 - 02



Bubble Drop Game -- Game Piece Selector Logic

In truth adding animations for this game (which I likely won't do, even though paper.js is an animations library) would be the harder part of this program (for me).  But that said, this next function is at the heart of a Bubble Drop Game.

Here's the function in full:
(But Note: I've pasted some of the relevant sections down below the first past a second time, so I could go over in full; so if you don't understand anything, maybe I'll cover in greater depth a bit further into the page.)
Anyhow, here's the full code:

// this function checks for adjacent same Color Circles
function highlightSameColorCircles(){

    // a variable to kill the while loop
    var hadHit = true; // initially set to true means the while loop will exectue at least once
   
    while (hadHit){  // while wrapper starts
        hadHit = false; // loop variable toggled to false (no hit and the loop stops)
        for (i = 0; i <= gTNV; i++){
            for (j = 0; j <= gTNH; j++){ // this pair of for loops should be getting familiar by now
                                                        // the complete board is cycled through
           
                // Vertical Below           // the next four if/then's form a group, that is repeated three more times
                if (i >= 1){                    // I'll comment on this section after the end of the function
                    if (gameCircle[i - 1][j].strokeWidth === 10){ 
                        if (gameCircle[i - 1][j].fillColor == gameCircle[i][j].fillColor){ 
                            if (gameCircle[i][j].strokeWidth === 0){
                                gameCircle[i][j].strokeColor = 'black';
                                gameCircle[i][j].strokeWidth = 10;
                                hadHit = true;
                            }
                        }
                    }
                }   
                   
                // Vertical Above
                if (i <= gTNV - 1){
                    if (gameCircle[i + 1][j].strokeWidth === 10){
                        if (gameCircle[i + 1][j].fillColor == gameCircle[i][j].fillColor){
                            if (gameCircle[i][j].strokeWidth === 0){
                                gameCircle[i][j].strokeColor = 'black';
                                gameCircle[i][j].strokeWidth = 10;
                                hadHit = true;
                            }
                        }
                    }
                }   
               
                //Horizontal Left
                if (j >= 1){
                    if (gameCircle[i][j - 1].strokeWidth === 10){
                        if (gameCircle[i][j - 1].fillColor == gameCircle[i][j].fillColor){
                            if (gameCircle[i][j].strokeWidth === 0){
                                gameCircle[i][j].strokeColor = 'black';
                                gameCircle[i][j].strokeWidth = 10;
                                hadHit = true;
                            }
                        }
                    }
                }   
                   
                // Horizontal Right
                if (j <= gTNH - 1){
                    if (gameCircle[i][j + 1].strokeWidth === 10){
                        if (gameCircle[i][j + 1].fillColor == gameCircle[i][j].fillColor){
                            if (gameCircle[i][j].strokeWidth === 0){
                                gameCircle[i][j].strokeColor = 'black';
                                gameCircle[i][j].strokeWidth = 10;
                                hadHit = true;
                            }
                        }
                    }  // no need to remark the closing if's as the structure should make that obvious
                }   
               
            } // close inner Horizontal for loop
        } // close outer Vertical for loop
           
       
    } // end wrapping while
} // end highlightSameColorCircles();


As promised, here's a more in depth look at the first if/then game logic grouping.

// Vertical Below      // this group appears (more or less) four times, and each works about the same way
                               // the inner workings could be removed to a function, but probably at little code savings or ease of readability
                               // then again, what do I know

if (i >= 1){
       // each of the if's adds a different type of circle (by location, above the current, below the current, etc)
                       // above or below a certain point, and we go off the board (check for a value not in the array) and that will throw an error
                       // this IF checks for that error condition and prevents it
         
    if (gameCircle[i - 1][j].strokeWidth === 10){  // Is the gameCircle Below the one we are checking outlined in black?
                                                                           // Yes = continue
                                                                           // No = stop

        if (gameCircle[i - 1][j].fillColor == gameCircle[i][j].fillColor){  // Is the gameCircle below the same color as this one?
                                                                            // Yes = continue, No = stop

            if (gameCircle[i][j].strokeWidth === 0){    // Has this gameCircle already been marked?
                                                                              // If we didn't include this, the while loop would never terminate
                                                                              // we only want new hits

                // And if all of the forgoing if statements are true, the following code fires

                 gameCircle[i][j].strokeColor = 'black';  // THIS gameCircle is marked, outline = black
                 gameCircle[i][j].strokeWidth = 10;    // thickness = 10

                 hadHit = true;   // and we had a hit, so we will have to run the loop again to see if this gameCircle connects to anything else
            }
        }
    }
}   
// and then we close it all off


This caused the program to crash at first, because strokeWidth was not defined on all the gameCircles:
if (gameCircle[i - 1][j].strokeWidth === 10)
So, I went back to where the gameCircles were constructed and game them all a default strokeWidth = 0;

And this, also (suprising to me), cause the program to crash until I deleted one of the '='
if (gameCircle[i - 1][j].fillColor === gameCircle[i][j].fillColor) // CRASH
if (gameCircle[i - 1][j].fillColor == gameCircle[i][j].fillColor) // No Crash

'===' means an exact match.
'==' has some sluff (sloppiness) to it (as in, 'Yeah, they're sort of the same).

And I do believe that's it.  No rant for today.

EAT YOUR VEGETABLES!
Before they eat you?
Or who knows?

Next time, let's make those bubbles drop like... like... like,er, well, I suppose, the bubble they are.





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




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