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