paperJS (paper.js) JavaScript Library walk through by Brett Paufler - 9-10-13

JavaScript Tutorial & paper.js primer

Bubble Circle Game Board - Wallpaper Tiling

For the most, this is the same code as per the previous tutorial in which a HexaGram Game Board tiled the screen.

The changes to the key areas of code are highlighted in red below, with accompanying comments:

// createHexaGonBoard
var boardType = 'star'; // added two new Global variables to Hold the relevant switching information
var hueMod = 1;
var gameHex = [];
var hexSize = 10;
var hexCenter = new Point(0,0);
var gTNH = 0;  // horizontal - gameTileNumberHorizontal
var gTNV = 0;  // vertical
function createHexaGonBoard(){
    gTNV = 0;
    for (hexCenter.y = 0; hexCenter.y <= (screenHeight + pushHeight); hexCenter.y + hexSize){
        gameHex[gTNV] = [];
        hexCenter.x = 0;
        gTNH = 0;
        for (hexCenter.x = 0; hexCenter.x <= (screenWidth + pushWidth); hexCenter.x + hexSize){
            //if (gTNH === 0){hexCenter.x += (gTNV % 2) * hexSize;}  // no shift for circles
                                                            // If uncommented, this would shifts the circles by half a size, every other line
            gameHex[gTNV][gTNH] = {};

// The two if/then statements in red below cause the board to be tiled in either circles or stars
// I'm assuming this is pretty self explanatory
// The first 'switching variable' is utilized here (i.e. boardType)
          
            if (boardType === 'circle'){
                gameHex[gTNV][gTNH] = new Path.Circle(hexCenter, hexSize);
            }
           
            if (boardType === 'star'){
                gameHex[gTNV][gTNH] = new Path.Star(hexCenter, 10, hexSize, hexSize/3);
            }
           
            //gameHex[gTNV][gTNH].strokeColor = 'black';
            gameHex[gTNV][gTNH].fillColor = 'red';

// And here is where the second 'switching variable is utilized (i.e. hueMod).
// Everything else remains the same.
          
            if (hueMod === 1){
                gameHex[gTNV][gTNH].fillColor.hue += gTNV*gTNH;
            }
           
            if (hueMod === 2){
                gameHex[gTNV][gTNH].fillColor.hue += gTNV + gTNH;
            }
    
            hexCenter.x += (2 * hexSize);
            gTNH += 1;
        } // end inner for/next loop
        gTNV += 1;
        hexCenter.y += 2 * hexSize;
    } // end outer for/next loop
} // create createHexaGonBoard()
createHexaGonBoard();


Honestly, I don't have much to say about this code.  If I didn't want to add a choice selector, it would have been a simple cut and paste replacement.  So for the most, it's the height of code re-usage.

Also, despite what I've been saying about PointText's, the feedback on this page is fairly minimal.  So instead, I'm going to do some forward looking.  And propose that we (or at least, I) work on one of those color matching bubble games.

Color Match Bubble Game Design

Just in case you don't know what I'm talking about.  By a Bubble Game, I mean one of those games where the player tries to clear a board of bubbles, circles, or other objects, getting as many points in the process (more points for larger size patterns), wherein, groups of adjacent bubbles of the same type or pattern are selected and all of them are destroyed, with all other bubbles in the area 'dropping down' to fill the hole.  Or if that's not clear, let's just say it's strategy matching game and leave it at that for now.

In my mind, the game to beat in this genre is Bubble Crackle by Ramalur Studio.  They're not paying me, so you can do a search in the Apple store for the app if you're interested.  Who knows what other platforms it exists on.  Highlights of this game include:
Yeah, that's right.  The top app (in my opinion) in this category goes for a paltry $0.99 -- as in, almost free.  So, there is NO MONEY to be made in this endeavor.  None whatsoever.  If I were a real programmer, I'd immediately go on to something else.  But I'm not a real programmer, I like this sort of game, I need the coding practice, and I think I can do this, so I'm going to give it a go.  (We'll see how far I get, which probably won't be very.)

First, let's think of a name (the most important part of any coding project).  My notes for this endeavor includes such terms as Bubble Cap Pogs Gem Blitz Puzzle Star Hopper Connect Blast Elimination Game, which by taking the first three letters of the last three words, I come up with BEG: Beg To Differ, which shall be my working title.

And then, since there is no hope from any money in selling this thing (and the whole point of a tuturial is to 'give it away', anyway), I will mention that I am surprised at the lack of bottle cap themed 'Bubble Games'.  Seems like this sort of thing would be cheap advertising for Coke, Pepsi, or any number of other drink vendors, if you catch my drift.

From there, I'll just post my notes from playing every version of this game that I could get my hands on for free in the app store.  Outside of the basic design, these are my design guidelines:
And although this is really a rant by another name, it does provide some sort of idea as to my hopes and dreams for the pages ahead, which I glibly present to you, even though I know that I have almost no intention of coding anything close to that level.  (Really, I don't.  Let's not fool ourselves.)





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




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