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