Day 12,590 :: Card of the week

So today I picked out a transformation card from my wife’s “The Nature of Infinite Love & Gratitude‘ set. We try to pull out one card a week to see what we should focus on to better improve our lives. This week’s card for me was spot on. I am in the process of moving my Freelance business into an s-corp so lots of changes (and the accompanying challenges) are happening. I though I would share it here 🙂 I hope you enjoy!

I do not really have “problems”; I only think I do by the way I interpret my circumstances. A “problem” is an illusion. It is a limiting perception without gratitude.

Advertisements

The Guild: I’m the One That’s Cool – Lyrics

Loving the new song from The Guild. Reposting the lyrics from youtube 🙂

Here is a link to the youtube video: http://youtu.be/jFhgupR565Q

1ST VERSE:
Oh, no. Don’t pretend I didn’t see
You roll your eyes at my gaming tee
Don’t know if you can read or if you’ve seen
The sweet piece in this week’s Wired magazine
The latest trend has hit its peak
They say that geek’s becomin’ chic
So now you’re out of style as you can be
And I’m in vogue, so you can bite me

To all the ass-hat jocks who beat me up in school
Now I’m the one that’s cool
I’m the one that’s cool
To all the prom queen bitches thinking they still rule
Now I’m the one that’s cool
I’m the one that’s cool

2ND VERSE:
Try to cop my style but I’m the real thing
While you played sports, I played Magic the Gathering
Never earned your part in nerd society
My Aquaman pajamas prove my pedigree
Watched my Next Gen every night
Wore a headgear to fix my overbite
Your black-rimmed glasses are prescription free, where as me
I literally can’t see my hand in front of my face

To all the asshat jocks who beat me up in school
Now I’m the one that’s cool
I’m the one that’s cool
To all the prom queen bitches thinking they still rule
Now I’m the one that’s cool
I’m the one that’s cool
And to my eighth-grade crush who pushed me in the pool
Now I’m the one that’s cool
I’m the one that’s cool
You may be tan and fit and rich but you’re a tool
And I’m the one that’s cool
I’m the one that’s cool

3RD VERSE:
Role reversal must be a total drag
But there’s no point, no point for me to humblebrag
I appreciate you for being cruel
I’m burning bright thanks to your rejection fuel
Have my in-jokes you won’t get
Like Honey Badger, Troll Face and Nyan Cat
So now your ballin’ parties seem so dumb
You can Evite me, and I’ll say yes, but I won’t really come

Got my comics
Got my games
All the things you thought were lame
Got my cosplay
Fanfic too
Got you pegged
STFU You
CHORUS

Outro

And I’m the one thats cool, I’m the one that… I’m the one thats cool
And I’m the one thats cool, I’m the one that… I’m the one thats cool
And I’m the one thats cool, I’m the one that… I’m the one thats cool
And I’m the one thats cool, I’m the one that… I’m the one thats cool

Tutorial: Craps… A Game of Dice

Hello. In this tutorial post I am going to show you how I made my simplified version of Craps. The purpose of this tutorial is to show the basics of using the HTML5 canvas tag and drawing simple 2D shapes. You can see the game in action on my website.

To start off lets lay out the simple rules so we know what we are trying to accomplish.

The player rolls two dice. The sum of the dice is the only thing that matters. (i.e. 1 and 3 is the same as 2 and 2)

Initial Roll

  • On a roll of 7 or 11 the player wins.
  • On a roll of 2, 3, or 12 the player looses.
  • Any other roll is stored as the players ‘Point’ and a Follow Up Roll is played.

Follow Up Roll

  • On a roll of 7 the player looses
  • On a roll of the players ‘Point’ the player wins.
  • Any other roll is discarded and play continues with another Follow Up Roll.

This is a very simplified version that only takes into account one player. If you want to expand this simple game with the full rules you can check out the wikipedia article for more info.

With the rules in place lets start digging into the code. On the first part we will go over the HTML and CSS that I use. Lastly I’ll go over the Javascript needed to implement the game logic and display the appropriate text when needed.

HTML/CSS

The HTML is pretty basic. We have a series of nested divs to control layout. Here is the full HTML:

<div id="craps_demo_wrapper" class="clearfix">

	<div id="craps_game_canvas_wrapper">
		<div>Your Roll</div>
		<canvas id="craps_game_demo" width="275" height="150"></canvas>
		<div id="craps_roll_button">
			<button type="button" onclick="igz_crapsRollDice();">Roll Dice!</button>
		</div>
		<div id="craps_setbet_button">
			$ <input type="text" id="craps_bet_input" value="10" size="3" /> &nbsp;&nbsp;
			<button type="button" onclick="igz_crapsSetBet();">Set Bet!</button>
		</div>
		<div id="craps_newGame_button">
			<button type="button" onclick="igz_crapsNewGame();">New Game!</button>
		</div>
	</div>
	<div id="craps_demo_infopanel">
		<div>Game Stats</div>
		<div id="craps_current_roll_div">
			<strong>Roll:</strong> <div id="craps_current_roll">&nbsp;</div>
		</div>
		<div id="craps_point_div"><strong>Point:</strong> <div id="craps_point">&nbsp;</div></div>

		<div id="craps_round_stage">&nbsp;</div>
		<div id="craps_winlose">YOU LOSE!</div>
	</div>

	<div id="craps_bet_loot">
		<div id="craps_bet">
			<strong>Current Bet:</strong> $<span id="craps_bet_span">???</span>
		</div>
		<div id="craps_loot">
			<strong>Total Loot:</strong> $<span id="craps_loot_span">???</span>
		</div>
	</div>

</div>

The most interesting part of this and the part that we will be focusing on is line 5:

<canvas id="craps_game_demo" width="275" height="150"></canvas>

This is the canvas tag. This is where we will be drawing out the dice when the player makes a roll. You can use the canvas tag to draw anything you need be it simple 2D graphics, 3D scenes, or just about anything you can think of. We will be covering how to draw basic 2D shapes.

I do not use anything out of the ordinary for the CSS so I won’t go over that in detail but for completeness here is the CSS code I use.

#craps_demo_wrapper { height: 210px; margin-top: 20px; margin-bottom: 20px; position: relative; border: 1px solid #CECECE; padding: 2px 20px; background-color: #F0F0F0; }
#craps_game_canvas_wrapper { width: 275px; height: 150px; float: left; margin-right: 35px; }
#craps_game_demo { }
#craps_demo_infopanel { width: 300px; float: left; height: 150px; position: relative; }

#craps_roll_button, #craps_setbet_button, #craps_newGame_button { text-align: center; border-top: 1px solid #CECECE; padding-top: 5px; }
#craps_roll_button button, #craps_setbet_button button, #craps_newGame_button button { width: 100px; }
#craps_roll_button, #craps_setbet_button { display: none; }

.craps_title { font-weight: bold; text-align: center; margin-bottom: 5px; border-bottom: 1px solid #CECECE; }

#craps_current_roll_div, #craps_point_div { position: absolute; width: 50px; top: 20px; text-align: center; font-size: 1.4em; }
#craps_current_roll_div div, #craps_point_div div { border: 1px solid #CECECE; height: 45px; font-size: 2.0em; padding-top: 5px; text-align: center; }
#craps_current_roll_div { left: 0; }
#craps_point_div { right: 0; }
#craps_round_stage { width: 300px; position: absolute; top: 50px; left: 0; font-size: 1.8em; text-align: center; }

#craps_winlose { width: 300px; height: 50px; position: absolute; top: 110px; left: 0; font-size: 3.0em; padding-top: 10px; text-align: center; display: none; }
#craps_bet_loot { width: 300px; position: absolute; right: 20px; bottom: 38px; border-top: 1px solid #CECECE; }
#craps_bet { width: 150px; position: absolute; left: 0; top: 10px; }
#craps_loot { width: 150px; position: absolute; right: 0; top: 10px; text-align: right; }

Before I move onto the Javascript and how to actually use the canvas element. You will notice one class in the HTML not listed here. It is the clearfix class attached to the main game wrapper div. This class is used to fix floated elements with no extra markup. You can read about it and obtain the CSS here.

Javascript

Now to go over the Javascript used. Before we get to the code lets go over the canvas tag and how to obtain it’s 2D context so you can start drawing.

Getting the canvas context

To get the canvas context you use the getContext method. We need to pass which context we want to use. to obtain the 2D context you pass the function the string ‘2d’. You call this method after obtaining the DOM element. Their are a couple ways of doing this depending on if you are using a javascript library or not. I personally use jQuery but you can use plain old Javascript as well. I will show both methods below.

// Using jQuery
ctx = $('#craps_game_demo')[0].getContext('2d');

// Using plain jane Javascript
ctx = document.getElementByID('craps_game_demo').getContext('2d');

While using jQuery notice the [0] after the selector. This is needed to get the context. If it is missing you will receive a Javascript error saying getContext is undefined. The canvas coordinate system starts with 0, 0, in the top left corner and counts up as you move right and down. Here is an illustration:

HTML5 Canvas Coordinate System
HTML5 Canvas Coordinate System

Now that we know how to obtain the canvas context I’ll go through the rest of the Javascript used in the game. I’ll post it piece by piece and go over each section in turn. The first part of the file is defining all the basic variables used.

var cwidth      = 275;       // Canvas width
var cheight     = 150;       // Canvas height
var dicex       = 25;        // Position of dice (x)
var dicey       = 25;        // Position of dice (y)
var dicew       = 100;       // Dice width
var diceh       = 100;       // Dice height
var dotrad      = 6;         // Radius of dots on dice face
var ctx;                     // Our context object
var roll1       = 0;         // Die 1 roll
var roll2       = 0;         // Die 2 roll
var rolltotal   = 0;         // Total roll
var point       = 0;         // Current 'Point' value
var round       = 'initial'; // The round we are on. Either 'initial' or 'followup'
var total_loot  = 100;       // Current 'loot' total
var current_bet = 0;         // Current bet amount

At the top of our javascript file we define all the variables used. The first two (cwidth, cheight) is the width and height of our canvas element. We use this to clear the canvas of all drawing when the game is reset. The next 5 variables define the dice. We start with dicex and dicey, this is the position on the canvas we will draw each die starting with it’s top left corner. Next we have dicew, and diceh. This defines the width and height of each die. Our dice will each be 100px wide and 100px high. Lastly we have dotrad. This is the radius of each dot on the dice.

Our next variable is ctx. This holds our canvas context object. We use this object to draw the dice onto the canvas. We will learn how to use it in more detail as we go over each function used in the game.

The last 7 variables holds various information needed to process each roll. We start with roll1, roll2, and rolltotal. Each of these store the current die roll and the total of the two. Next is point. This will store the current rounds ‘Point’ value. Then comes round. Here is a simple string to distinguish what round we are on. I could have used a boolean variable here which may be a better choice in the end. It’s not hard to change the code to use a boolean instead of a string so feel free to make the necessary adjustments. Next we store the players ‘total loot’ in a variable called total_loot. This will increase or decrease as the game goes by depending on if the player won or lost a round. The last variable needed is current_bet. This will keep track of the players current bet. The player wil have a chance to change this before each round starts.

After this I have a basic initialize function called when the page is loaded.

function crapsInit() {
	ctx	= $('#craps_game_demo')[0].getContext('2d');

	crapsNewGame(); // Initialize a new game

	// Reset some of the variables to the page open state
	$('#craps_roll_button').hide();
	$('#craps_setbet_button').hide();
	$('#craps_newGame_button').show();
	$('#craps_round_stage').html('');
}

This function gets our context using the jQuery method. It will next call crapsNewGame() (discussed next). Lastly is resets the buttons so only the ‘New Game’ button is displayed and then clears the stage value. (note: You do not have to use jQuery. If you have a preferred library you can easily replace the jQuery calls with the appropriate library calls.)

The next function in our file is crapsNewGame(). The purpose of this function is to set all the default values needed to start a new game of Craps. Below is the complete function:

function crapsNewGame() {

	// Reset the variables
	total_loot  = 100;
	current_bet = 0;
	round       = 'initial';
	point       = 0;
	roll1	    = 0;
	roll2	    = 0;
	rolltotal   = 0;

        // Update all the HTML elements so they will
        // be in their default state.
	$('#craps_bet_input').val('10');
	$('#craps_bet_span').html('???');
	$('#craps_loot_span').html(total_loot);
	$('#craps_point').html('&nbsp;');
	$('#craps_current_roll').html('&nbsp;');
	$('#craps_round_stage').html('Initial Throw');
	$('#craps_winlose').hide();
	$('#craps_newGame_button').hide();
	$('#craps_roll_button').hide();
	$('#craps_setbet_button').show();

        // Clear the canvas of any previous drawing
	ctx.clearRect(0,0,cwidth,cheight);

}

Here we reset all the Javascript variables and HTML layout elements to their default states. The most interesting part of this function is the call to clearRect() at the end of the function. This function is used to clear a rectangle shaped space on a canvas. It will remove any drawing done within that area. The function takes four arguments, the top (x) and left (y) and then the total width and height of the rectangle to clear. You pass the arguments in this order: clearRect(x, y, width, height). In this function we want to clear the entire canvas of any drawing so we can have a clean slate to draw on so we will be passing the following to the function: 0, 0, cwidth, cheight.

The next function used is crapsSetBet(). This function is called when the player sets their bet. Here is the complete function:

function crapsSetBet() {
	round = 'initial';
	current_bet = $('#craps_bet_input').val();

	if (current_bet > total_loot) {
		alert('You cannot bet less then your total loot. Please enter a different bet.');
		return;
	}

	$('#craps_bet_span').html(current_bet);
	$('#craps_point').html('&nbsp;');
	$('#craps_current_roll').html('&nbsp;');
	$('#craps_round_stage').html('Initial Throw');
	$('#craps_winlose').hide();
	$('#craps_newGame_button').hide();
	$('#craps_setbet_button').hide();
	$('#craps_roll_button').show();

	ctx.clearRect(0,0,cwidth,cheight);
}

We start off in this function by setting the round to the ‘initial’ string so we know we are going to be making the Initial Roll. Next we get the value the player inputs for their bet. We then check to make sure the bet is less then the players total_loot. If the player is trying to bet more then what they have available we give them a nice Javascript alert letting them know they cannot bet more then their available loot then return from the function early so the player can enter a new bet value. After this we set the HTML Elements to the state we need them in to have the player make the Initial Roll. Lastly you will notice we make another call to clearRect(). This is to make sure we clear the canvas of any drawing that might have taken place before we make the initial roll.

Our next function crapsRollDice() contains the core logic for the game. Below is the complete function:

function crapsRollDice() {

	// reset the dice x position
	dicex = 25;

	roll1 = 1 + Math.floor(Math.random() * 6);
	roll2 = 1 + Math.floor(Math.random() * 6);
	rolltotal = igz_roll1 + igz_roll2;

	if (round == 'initial') {
		switch (rolltotal) {

			// WIN
			case 7:
			case 11:
				$('#craps_winlose').html('YOU WIN!').show();
				setScore(true);
				break;

			// LOSE
			case 2:
			case 3:
			case 12:
				$('#craps_winlose').html('YOU LOSE!').show();
				setScore(false);
				break;

			default:
				point = igz_rolltotal;
				$('#craps_point').html(point);
				$('#craps_round_stage').html('Follow up Throw');
				round = 'followup';

		}

	} else {

		// LOSE
		if (rolltotal == 7) {
			$('#craps_winlose').html('YOU LOSE!').show();
			setScore(false);
		}
		// WIN
		else if (rolltotal == point) {
			$('#craps_winlose').html('YOU WIN!').show();
			setScore(true);
		}

	}

	if (total_loot <= 0) {
		total_loot = 0;
		$('#craps_roll_button').hide();
		$('#craps_setbet_button').hide();
		$('#craps_newGame_button').show();
	}

	$('#craps_current_roll').html(rolltotal);

	// Display the dice
	crapsDrawface(roll1); 	// Die 1

	dicex = dicew + 50;     // Move over the width plus 50
	crapsDrawface(roll2);	// Die 2

}

We start off this function by setting the dicex variable to it’s default of 25. This will make sure when when actually draw the dice the first die will be drawn in the correct position. Next we get two random numbers and assign them to roll1, and roll2.

We use the Javascript Math functions to do this. Here is the call we make: 1 + Math.floor(Math.random() * 6). Lets break this line down. The Math.random() function will return a value between 0.0 and 1.0. We then multiply this number by 6. For example lets say the function returns 0.4. The final value of the inner expression, Math.random() * 6, will be 2.4. We then use the Math.floor() function to strip away the decimal part of the number leaving us with 2. Lastly to get our random number between 1 and 6 we add 1 to the returned value of Math.floor(Math.random() * 6) giving us a final value of 3.

We repeat the above to get a random value for roll2. Next we add the two rolls together to get the value we will be using to check against for the rest of the function. You may wonder why I am getting two random numbers between 1 and 6 and not one random number between 2 and 12. I could have done this but I would have to split the number somehow in order to display the values of each individual die when we go to draw the dice. This way will make it much easier to call the drawing function to draw each individual die.

The next part of the function we determine what round we are in. If it is the Initial Roll we will be making different checks then if it is the Follow Up Roll. In the Initial Roll part of the if statement we use a switch() to see what the total roll is. If it is a 7 or 11 we display the message YOU WIN! then call the setScore() function to add the players bet to their total loot. If the total roll is either a 2, 3, or 12 we display the message YOU LOSE! then call setScore() to subtract the players bet from their total loot. If any other roll is found we set the point variable to the value of rolltotal and display the number in the Point box. We also update the round text to Follow Up Roll and update the round variable accordingly.

If we are already on the Follow Up Roll we check to see if the rolltotal is equal to 7. If it is we display the YOU LOSE! text and call setScore() to subtract the players bet from their total loot. If this isn’t true we check to see if the rolltotal equals the players point value. If it does we display YOU WIN! and call setScore() to update the score appropriately. If any other number is rolled we ignore it and move on.

Next we check to see if the players total_loot is less then or equal to 0. If it is we set the players total_loot to 0 then update the HTML Elements so the New Game button is showing. We then display the current totalroll in the appropriate spot.

After this we call the crapsDrawFace() function to draw the result of roll1 onto the canvas. Next we move dicex over the width of the die plus 50. Lastly we call crapsDrawFace() again to draw the results of roll2. crapsDrawFace() will take care of drawing the dice. I’ll be going over this function and it’s accompanying functions in a minute.

Before we get to the meat of the drawing code we have one more simple function to go over. The setScore() function. This function takes one argument, a boolean value. If we won the round and want to add the bet to the players total lot we pass true else we will pass false to subtract the bet from the players total loot. Here is the full function:

function setScore(win) {

	if (win) {
		total_loot = parseInt(total_loot,10) + parseInt(current_bet,10);
	} else {
		total_loot = parseInt(total_loot,10) - parseInt(current_bet,10);
	}

	$('#craps_loot_span').html(total_loot);
	$('#craps_roll_button').hide();
	$('#craps_newGame_button').hide();
	$('#craps_setbet_button').show();

}

This function is simple. We check to see if the player has won the round. If so we add the value of current_bet to the players total_loot and update the HTML Elements. I call parseInt() to make sure I am adding integer numbers and not strings as the javascript + operator is used for both addition and concatenation of strings. If you don’t use parseInt() you may end up with a number like 10010 instead of 110 when adding the players bet and total loot together.

Now we get to the fun part, crapsDrawFace(). This function will draw a die onto the canvas at dicex and dicey. This function will call other functions depending on the number we need to draw. These function are crapsDraw1(), crapsDraw2() and crapsDraw2mid(). I’ll go ever each in turn.

function crapsDrawface(n) {

	ctx.lineWidth = 5;
	ctx.clearRect(dicex,dicey,dicew,diceh);

	ctx.fillStyle = "#FFFFFF";
	ctx.fillRect(dicex,dicey,dicew,diceh);

	ctx.fillStyle = "#000000";
	ctx.strokeRect(dicex,dicey,dicew,diceh);

	ctx.fillStyle = "#009966";

	switch (n) {

		case 1:
			crapsDraw1();
			break;

		case 2:
			crapsDraw2();
			break;

		case 3:
			crapsDraw2();
			crapsDraw1();
			break;

		case 4:
			crapsDraw2();
			crapsDraw2(true);
			break;

		case 5:
			crapsDraw2();
			crapsDraw2(true);
			crapsDraw1();
			break;

		case 6:
			crapsDraw2();
			crapsDraw2(true);
			crapsDraw2mid();
			break;

	}

}

The first thing we do inside this function is set the line width we will be drawing with. We do this by setting the lineWidth data member of our ctx variable. This is the complete call: ctx.lineWidth = 5;. This is setting the width to 5px. The next function should look familiar. We used it in two previous functions. It’s the clearRect() function. The difference here is that w are clearing only the space that the dice is occupying. Next will set the fill color we want to use, in this instance #FFFFFF or white. We do this be setting the fillStyle data member of the ctx object. The next function is new, fillRect(). This function is identical to clearRect in all ways except one. the fillRect() function will fill the rectangle provided with the setting of fillStyle. This gives our dice a nice white background (if your game is on a white background you can skip this). Next we change the fillStyle so it is #000000 or black. We want this to be the color of the border for our dice. We create this by calling the function strokeRect(). Once again this takes the exact same parameters as clearRect() and fillRect(). The only difference here is that the function will stroke (put a border) around the outside of the rectangle with a width of lineWidth and the color stored in fillStyle. Lastly we set the fillStyle one last time to a nice green color, #009966. This color wil be used for the dots on the face of the dice.

The function then uses a switch() statement to determine how to draw the dots. It will call one of the crapsDraw?() functions or a combination of them to accomplish this. All of these functions are almost identical besides how they calculate the dot position. I will show all three functions then go over the most interesting parts.

/*
 * This function draws a dot in the center of the die.
 */
function crapsDraw1() {

	var dot_x;
	var dot_y;

	ctx.beginPath();
	dot_x = dicex + .5 * dicew;
	dot_y = dicey + .5 * diceh;
	ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );
	ctx.closePath();
	ctx.fill();

}

/*
 * This function draws a dot in two oposit corners (lower right and upper left).
 * If reverse is true it draws the dots in the oposite corners.
 */
function crapsDraw2(reverse) {

	reverse = typeof(reverse) != 'undefined' ? reverse : false;

	var dot_x;
	var dot_y;

	ctx.beginPath();
	dot_x = dicex + 3 * dotrad;
	dot_y = reverse ? dicey + diceh - 3 * dotrad : dicey + 3 * dotrad;
	ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );

	dot_x = dicex + dicew - 3 * dotrad;
	dot_y = reverse ? dicey + 3 * dotrad : dicey + diceh - 3 * dotrad;
	ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );

	ctx.closePath();
	ctx.fill();

}

/*
 * This function draws two dots on either side (left and right) centered vertically
 * on the y axis. It is used to create the '6'.
 */
function crapsDraw2mid() {

	var dot_x;
	var dot_y;

	ctx.beginPath();
	dot_x = dicex + 3 * dotrad;
	dot_y = dicey + .5 * diceh;
	ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );

	dot_x = dicex + dicew - 3 * dotrad;
	ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true );

	ctx.closePath();
	ctx.fill();

}

There are four functions  that we are concerned with that we need to look at, beginPath(), arc(), closePath(), and finally fill(). I will go over arc() last as that is the more interesting function of the bunch (Don’t forget to add ctx. in front of each function call). To tell the context we want to start drawing a path we use the  beginPath() function: We tell the context we are done when we call closePath(). We then can either use fill() or stroke() to either fill the path or stroke is accordingly. I do not use the stroke() function in this game but the work the same as fillRect() and strokeRect().

Now for the real work. We use the arc() function to create our path. arc() is used as follows: arc(cx, cy, radius, start_angle, end_angle, direction). cx is the center horizontal coordinate and cy is the vertical coordinate of the circle. radius is the radius we want to use. Now the arc method uses radians for the angle arguments. In a circle their are 2 * PI radians (a little more then 6). Luckily Javascripts Math  library has a PI function which returns PI with as many decibles as needed. So if we want to make a half circle we start at 0 and end at Math.PI. For a complete circle we start at 0 and end at Math.PI * 2. The last argument is the direction. This is either a true or false value. Setting it to true will draw counterclockwise and false is clockwise. This is more important when drawing arcs that are not whole circles. Since we are drawing a whole circle we can use either value.

Now that we know about the arc() function will pass it the calculated dot_x and dot_y variables along with the dotrad defined at the top of the file. The last three variables deals with the angles and since we are making a complete circle we pass 0, Math.PI * 2, and lastly the Javascript true value. The complete call is: ctx.arc( dot_x, dot_y, dotrad, 0, Math.PI * 2, true).

Finally at the end of the file we add the crapsInit() function to the document ready queue. I use jQuery but you can assign it in any manner that will work if you do not use the jQuery library.

$(document).ready(function () {
	crapsInit();
});

Thats about it for the code. When the page is initially loaded it will call the crapsInit() function. This will set the stage and display the New Game button. Once the player clicks this it will call the crapsNewGame() function and prompt the user to set the bet for the round. Once the player enters their bet and clicks the button the crapsSetButton() function is fired off. Next the player clicks the Roll Dice button to call crapsRollDice() until they either win or loose the round. At this point it prompts the player to enter another bet and play continues till either the player stops or looses all his loot.

I hope this tutorial on how to build my simplified version of Craps was useful. The main parts I wanted to make sure to hit was how to draw basic 2d shapes on a canvas. You can do so much more with the canvas then I did here but hopefully this gave any one just jumping into HTML 5 some useful info to help them along.

I plan on doing more tutorials based around more complex games that will take full advantage of the canvas. I will also do some 3D based ones as well. If you liked this let me know. If you found any mistakes or know how I can do something better don’t hesitate to submit a comment.

UPDATE:

Here are some screen shots of the finished game ( should have added this a while ago 🙂 ):

A screenshot of me winning a round!
This is a screenshot of me losing a round!

Thanks!

Day 11,969 :: Wow, it’s been a while!

Hello there, It’s been quite some time since I posted. I got pretty busy with my freelance and wasn’t able to get to writing any new posts. I’m hoping to get back in the groove and give at least one post a week.

So what have I been up to? Well, work mostly 🙂 That’s a good thing though so I’m not complaining. I have some pretty steady clients and have been actively advertising on Facebook for more clients. Other then that I picked up a few more games which has re-inspired me to continue with my game development. I started a couple small projects using FLEX and the Flixel game engine. Flixel isn’t not too bad but it is in the very early stages of development. Check out a couple of the apps I’ve posted on my site! I’ve also resurrected my browser based RPG. I’m might start a new string of blog posts following my progress with that as well. It will be written in PHP/MySQL with supporting Javascript libraries like jQuery.

That’s about all for now 🙂 I’ll keep you all posted!

– Miah

Day 11,867 :: New Site Launched

Well here we are again. I can’t believe that four months have gone by since I last got a blog post out. Boy does time fly when you are busy!!!

First things first. I have updated my main website and finally put my portfolio section online. You can check it out here, http://www.igzactly.com. I am also including a new section for tutorials. These will be based on anything from PHP/MySQL tips and tricks to game development. I am contemplating publishing each here as well but I have not decided if that will be the case yet or not.

Some of the other things I have been busy with is integrating a couple API’s into a clients web application I have been working on and expanding. I finished a website for my fiancée’s father. He is a local musician and you can find his site here: http://www.juansarante.com. Another site I launched this past weekend was for a local companies annual award ceremony called “The Golden Peep Awards”. This was a fun site to do and I am looking forward to supplying some music to the actual events. If your interested in checking it out you can visit it here: http://www.goldenpeepawards.com. Most of the content is hidden behind a log in system. One more major site I launched  within the last four months was “The Best Damn Pub”. This is a listings site for bars and pubs in the Florida area. They have plans on expanding to more states in the near future. You can check out the site here: http://www.thebestdamnpub.com.

I have also recently found an excellent graphic designer to work with on my projects. She does an outstanding job and is awesome to work with. If you are looking for someone to do some design work please give Ruby over at Vellephant a shout! She will take good care of you 🙂

Well that’s pretty much it. I’m going to try to keep up with the posts but as I am extremely busy with work (that’s a good thing :)) they may not be new posts every week. Well see 🙂

– Miah

PHP Functions 101 – str_replace()

Welcome back. We’re in the midst of the holidays and I hope ever one is having a good time. I know It has been eventful so far for me. Anywho, this week I’ll do a quick overview of the str_replace() function. This is another function I use often in my projects. It is useful when you need to quickly replace parts of a string. It doesn’t take regular expressions so if you don’t need them then this is the function for you as it is quicker and less processor intensive. Please note however that it is case-sensitive. If you need to replace with case-insensitive strings use str_ireplace(). This function acts identical to str_replace except that it is case-insensitive.

Moving forward. Here is the official description taken from php.net for the str_replace() function:

Replace all occurrences of the search string with the replacement string

The function takes three required parameters and a fourth optional parameter. They are as follows:

mixed $search
mixed $replace
mixed $subject
int $count [optional]

The first parameter, $search, is the values you want to replace. This can be a single string or an array of multiple strings.

We next have $replace. This is the values you want to replace the $search values with. If $search is an array and $replace is a string then it will replace all occurrences in $search with the same value. If $replace is an array with a smaller size then $search then all remaining $search terms will be replaced with an empty string.

Lastly is $subject. This is the string or array that will be searched through. If it is an array each element will have the search and replace action performed. str_replace() will also return an array if the $subject is an array.

$count is the only optional variable. If a variable is passed it will be filled with the number of matches and replacements that have occurred.

Now that we have defined the function and gone over the parameters here are some examples:


// replace some values in a simple string
$string = "The house on the left is made up of wooden boards";

$modified = str_replace("left","right",$string);
echo $modified; // Outputs: The house on the right is made up of wooden boards

$modified = str_replace(array("left","wooden"),"green",$string);
echo $modified; // Outputs: The house on the green is made up of green boards

$modified = str_replace(array("left","wooden","boards"),array("green","stone"),$string);
echo $modified; // Outputs: The house on the green is made up of stone

$modified = str_replace(array("left","wooden boards"),array("right","brick"),$string);
echo $modified; // Outputs: The house on the right is made up of brick

The above examples are pretty simple but I think they show the basic use of the str_replace() function. Now there are a couple things to watch out for when using this function. You need to take care with the order you are replacing items with. The function will replace all items in the first index of the $search array, then continue to the next index and so on and so forth. This may give unexpected results. Here is an examples of this.


$string = "a simple apple tree";

$modified = str_replace(array("a","e"),$array("e","X"),$string);
echo $modified; // Outputs: X simplX XpplX trXX

In this example it replaces all occurrences of “a” with “e“. It then replaces all occurrences of “e” (including the ones that were placed when “a” was replaced) with “X“. I don’t run into this that often but it is something you will want to keep in mind.

Well this is it for this week. I hope as always that is was helpful to someone out there 🙂 Next week I’ll deal with strstr(). As always, thanks for reading.

– Miah

Thanksgiving Turkey Brine

This year I decided to do something different with my turkey. Brining. This was something I had never heard of till this year and now that I know of it I will never cook another turkey any other way. So what I have decided to do is write up a little post describing the process I took. But before I get to that here is the basic recipe for a turkey brine. Now the items on this list can really be anything you want as long as the salt to liquid ratio is kept to 1 cup salt per 1 gallon of liquid. The amount of liquid will depend on the size of the turkey. You will want to have at least an inch of water above the turkey when you brine it. This is for an 18 pound turkey.

1 1/2 gallon water
3/4 gallon Pineapple juice
2 cups Kosher salt (very important! Cannot be iodized salt!)
2 cups sugar
Assortment of spices (I had 6 Bay Leaves, 2 tbl spoons of Cilantro, 5-6 pieces of
Peppercorn, 2 tbl spoons of onion powder)

Now here is the process I took.

Two days before the big turkey day I prepared the brine. I put 1 gallon of water, 1 cup of salt, and 1 cup of sugar into a large pot. I then brought it to a boil so the salt and sugar would completely dissolve into the water. Once this was complete I added half the spices and mixed them together. I then moved the mixture into a large container to cool. I then repeated the process with the remaining ingredients. The following pictures are the results of the mixture.

I then put these into the fridge to get cold over night.

Now to brine a turkey you need to purchase a fresh turkey. It cannot be a frozen or kosher turkey. This is because with frozen or kosher turkeys they pre-inject it with a salt mixture to allow for the turkey to be moist when cooked. If you tried to brine a frozen turkey it would come out way to salty to eat. With this in mind I purchased an 18 pound fresh and all natural Butterball turkey. You can find these in the fresh meat department in your local grocery store. The one that I go to (Publix) puts them out no earlier then a week before thanksgiving. You will also want to brine the turkey for at least 12 hours. A good rule of thumb is 1 hour per pound but no more then 24 hours. I think 12 hours is plenty of time for the job to be done.

So the next night around 10pm I was ready to put the turkey in the brine mixture. They sell bags specific for brining but I had a hard time finding them. You can use XL Ziploc bags as well but yet again I could not find them. I did not have the time to order them online so I purchased 3 of the oven bake turkey sized bags. I also bought a large drink cooler to store it in overnight. You can use anything as long as it is plastic and clean. A bucket will work just as good.

I lined the cooler with the three bags and poured the now cold brining mixture into the bags. I then placed the turkey in with the large hole facing down. This was so I could make sure all parts of the turkey was being covered with the brine. You want to also make sure their are no air bubbles left. I then closed the top of the bags and placed a ziplock baggie full of ice on top to keep the turkey fully submerged and cold. Here are some picks of this part of the process.

I left the turkey in the brine mixture inside my fridge for the next 12 hours. The next day I took out the turkey, cleaned off all the brine mixture, and pat dry the turkey to remove any remaining salts. I then cooked the turkey as normal. Four hours later I had a nicely done turkey! The turkey came out fantastic! It was moist, had an excellent flavor to it and even looked good among the rest of the food. Here are some pictures of the turkey after it was cooked.

Well there it is 🙂 My brining experience. I think the turkey came out better than ever and I am going to cook it this way from now on. I will be playing with the mixture of spices to get the perfect mix down! If you want to try this don’t hesitate! It is very simple and flexible. You can make any flavor you want.

Enjoy!
– Miah