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


Click any gameBubble and the appropriate grouping of gameBubble's will hightlight.
Click the centerCircle at top and if more than one gameBubble is highlighted, the gameBubbles will disappear.
(And next, we'll make them fall down.)

Bubble Game Game Logic - Selecting Circles

Once again, onMouseDown is the critical function that controls input:
function onMouseDown(event){
    //checkClickBox(event);
    checkGameControlCenterCircle(event); // order matters  (this button accepts the current selection)  
    checkGameCircle(event); // any other gameCircle changes the current selection
}
As I've coded it, if the two internal functions are reversed in order, nothing ever happens, as the first thing the second function does is uncheck all of the gameBubbles.  It does this to insure that no two groups are ever checked at the same time.  But having done that, there are never checked boxes for the checkGameControlCenterCircle function to activate if the order is reversed.

Here's the code I added to the second function, the remainder was covered in the last tutorial:

function checkGameCircle(event){
        // elimates all strokeWidth Markings
       // like I said, to insure no two groupings are ever selected at the same time
       // the first thing this function does is wipe all of the control markings
        for (i = 0; i <= gTNV; i++){
            for (j = 0; j <= gTNH; j++){ // double for loop to loop through all gameBubbles
                gameCircle[i][j].strokeWidth = 0;  // eleminate the strokeWidth marking
                gameCircle[i][j].strokeColor = gameCircle[i][j].fillColor;
            }
        }
.... // function continues, my coverage on this webPage does not
    // suffice to say, after the control markings are wiped, the function then goes through and
    // marks the array anew based on the current event

Having marked the selected gameBubbles with the previous function, this next function is fired whenever the player clicks on the board, but nothing ever actually happens of interest unless the topCenterCircle contains the onMouseDown(event).

// Button to Accept the Play is Activated on any onMouseDown event
function checkGameControlCenterCircle(event){
    // First IF wraps entire function
    // the entire function is wrapped in this function, so it's a short call if the event doesn't take place in the topCenter circle
    if (gameControlCircle.contains(event.point)){
   
        // following code checks for number of selected circles
        var hitCount = 0;
        for (i = 0; i <= gTNV; i++){
            for (j = 0; j <= gTNH; j++){ // cycles all game circles
                if (gameCircle[i][j].strokeWidth === 10){ 
                hitCount += 1;
                } // if closed    // this grouping of code counts the number of currently selected gameBubbles
            }                         // and assigns that number to hitCount
        }  // outside for closed
   
        // applies invisible if hitCount 2 or higher
        if (hitCount > 1){   // no two or more gameBubbles, this code does not fire
            for (i = 0; i <= gTNV; i++){
                for (j = 0; j <= gTNH; j++){  // cycles all gameCircles
               
                    // remember, strokeWidth of 10 is marker for gamePlay
                    if (gameCircle[i][j].strokeWidth === 10){
                   
                        // so if yes, this activates
                        gameCircle[i][j].strokeWidth = 0;  // stroke reset
                        gameCircle[i][j].visible = false;  // disappears circle
                        gameCircle[i][j].strokeColor = gameCircle[i][j].fillColor;   
                                               
                    }  // close if
           
                } // inside for
            } // outside for
           
            // TODO  // note the TODO, a useful shorthand to get into
            // TODO    // TODO marks future code
            // DROP CIRCLES GAME CODE
                      

        }  // ends if that indicates there was a play
    }  // end if/contains wrapper
}  // end function

TODO

I use the phrase 'TODO' to mark future work in code.  I always use this phrase, so I can do a text word search and find what items of code I still feel are required.  When taking a break between coding sessions (a day, weekend, or whatever) a list of TODO's helps me identify what's next.  In the above, the TODO's are located EXACTLY where I think the future code should go.  I might be wrong about the location, but it's my best guess.  And if I'm right, I won't have to reread the code or even think about the nested if/then or for loops present.

Also, not written anywhere or discussed, but my list of remaining objectives for this code is amazingly short.

My Bubble Game TODO List

The last thing I have to say, is that to debug (or test run) a program, I recomend clicking like a madman -- like you're trying to break it.  If you only click things in the 'right order' that's the only condition you'll test for.  Trust me, probably no one else but you is ever going to hit the controls in the 'right order'.





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




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