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


Assigning Random Colors to the Game Board

We already did color in the previous tutorial, so changing the color to something random (as apposed to a 'top of the head' mathematical equation') isn't really all that difficult.

This is the old code:
gameHex[gTNV][gTNH].fillColor.hue += gTNV*gTNH;

This is the new code:
gameHex[gTNV][gTNH].fillColor = randomColor();

Of course, randomColor() is nothing more than a user defined function, so it's a placeholder for a whole lot more:
// randomly color the circles
var numColors = 5;  // if I want to vary the number of game colors later, it's already hard-coded in, also, no magic number
function randomColor(){
    // random number from 1 to numColors (5 in this case)
    var rNum = Math.floor(Math.random()*numColors + 1);
                             //Math.random() yields from 0.001 to 0.999 (essentially)
                            // * that by numColors, which equals 5, yields, .0001 to 4.999
                            // + 1 yields 1.001 to 5.999
                            // Math.floor rounds it down (chops it off at the knees) yields 1 to 5
                            // formula will always yield 1 to numColors
    switch (rNum){
       case 0:
          return 'white';  // I should have coded this in as a front end test condition/  But I didn't.  So, I'll go back and do that now.
        case 1:
            return 'blue';
        case 2:
            return 'red';
        case 3:
            return 'green';
        case 4:
            return 'yellow';
        case 5:
            return 'purple';
        case 6:
            return 'black';  // a black circle is an error // this is a test condition, black is an error
    } // end switch
} // end randomColor  // closing bracket remarks help keep track of it all


Rather than jump through a bunch of hoops, to make the the gameBoard not fill (or tile) the entire screen, I arbitrarily changed the for loop parameters.  It's not very interesting or important.  All the same, these are the relevant lines of code:
function createHexaGonBoard(){
    for (hexCenter.y = 150; hexCenter.y <= (screenHeight - 50); hexCenter.y + hexSize){
        for (hexCenter.x = 50; hexCenter.x <= (screenWidth - 50); hexCenter.x + hexSize){
Other solutions might be more elegant (and might provide more functionality across a greater number of devices), but this gets the code out the door, now.  And now, is sometimes what counts.  Also, this provides a perfect example of what is meant by a 'Magic Number'.  Without a comment or explanation, there is absolutely no way to know why I chose 150 (I want room for header controls) or 50 (it seemed like it would work).  They truly are magic random numbers.  100 & 25 would work just as well,

Game Piece Selection -- onMouseDown check for .contains()

We've done .contains before.  There's a whole tutorial on it.  So, this should be review.  Same with the onMouseDown(event).


This is the onMouseDown(event) handler function code.  onMouseDown, these two functions are called, because that's what this code is telling the programe to do:
function onMouseDown(event){
    checkClickBox(event);
    checkGameCircle(event);
}

And of the two, the one of interest is this one:
function checkGameCircle(event){
    for (i = 0; i <= gTNV; i++){  // we'll see a lot of these two loops in the pages to come
        for (j = 0; j <= gTNH; j++){  // between the two, every gameHex (gamePieceCircle) is checked
            if (gameHex[i][j].contains(event.point)){  // condition we are looking for, did the onMouseDown, happen here?
                                                                           // If yes, the code contained within the if brackets fires

                gameHex[i][j].strokeColor = 'black';  // And this specific circle is marked with a black outline ring
                gameHex[i][j].strokeWidth = 10; 
               
                // future game logic will go HERE = TODO  // I label all future work TODO, so I can word search for it later
                                                                                  // no TODO's left and the program might be done

            }  // close if/contains check  // I don't always label the closing brackets, but on larger functions, it really does help
        } // close inner Horizontal for loop
    } // close outer Vertical for loop
} // close checkGameCircle function

Getting the for loop to fire correctly (and then assigning the i & j variables to the correct items) was the hardest part.  But then, once I know the general nature of the solution, the plug and chug method tends to work.

Prototype Development

This project is an example of Prototype Development -- or at least, it's an example of what I understand Prototype Development to be all about.  In the simplest terms, The Prototype Method is all about getting results, now.  Get something on the screen.  Get the code to do something.  And then, mold that something until it's either good enough (the commercial world) or where you want it to be (hello fellow hobbyists).

Notice on how every page of the tutorial, there's something, some progression towards a goal (perhaps ill defined, but assumed to be understood in essence)?  Well, that's Prototype to a 'T' (or should that be 'P'?).  And as we continue this project, I'm going to be satisfied with what some might consider to be an amazingly small degree of functionality at every step, but functionality that is critical to the success of the project.  And that's because, there's another design philosphy (probably several of them) that I pay homage to, which I'll call I'll call Critical Path Development.

In Critical Path Development, one does the hard stuff first.  Bells and whistles are all fine and dandy, but you don't have a Bubble Drop Game until the bubbles drop.  And if you never get that, you'll never have a game.  So, best to get that functionality coded as early as possible.

Hence, the next thing I will code (or attempt to code, but I'm pretty sure I have this covered) is how to 'expand' the selection to the surrounding bubbles.  A player selects one ball and all the other balls that connect to it are supposed to highlight (with a black ring for now).  And although at first, I thought I was going to have to write a bunch of nesting  (and/or iterating) loops, the actual solution is way simpler to code -- perhaps not as elegant, but way simpler to code.  And if you like riddles, give it a go and see how you would code such a solution.

In the meantime (and as you think), I will just make one final coding observation.  I made a lot of changes under the hood from the last tutorial to this one.  But to start this tutorial, I simple copied and pasted the CircleBubbleGameBoard Tiling Tutorial, saved it under a new name, and started to modify that.  Which means, the template I used for this page has a lot of extraneous code that we won't need for this project.  So, I went through it and commented out all the extra stuff.  Checked to see that the code still ran.  And next time, when I copy this page, paste and rename it, and start on the next tutorial, I will go through and delete all the commented out garbage to clean up the codeSpace.

Hardly rocket science, but the pertinent idea is that if I get over-zealous in my cuts, the code is right there, a simple uncomment away.  And as long as we're on the idea, I write these commentaries using KompoZer, while edit code in Notepad++.  And at the beginning and end of each session, I save the web page under a different name -- just in case.  (Time to do that, now.)





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




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