Girl Develop It! Charlotte - JavaScript for Beginners - Generate and Shuffle a Deck of Cards

cards.js

/*-----------------------------------------------------------------------------------

	Shuffle Example - build and shuffle a deck of cards

	This was built during a presentation for Girl Develop It! Charlotte's
	Beginner JavaScript class on Loops, Arrays, Objects, and Functions.

	It started as a hopefully simple example of how one could use arrays to do
	something programmatically and then got a little out of hand.

	This document has a slightly more complex version than what we built during
	class and is thoroughly commented to explain what is going on and why certain
	decisions were made.

	There are commented console.log() methods throughout that will let you see
	what the code is currently doing if you uncomment those lines.

	You can run this in something like repl.it, JSFiddle, CodePen, etc. or link it to an
	HTML document and run it in your browser locally.

	Author:  Eric Allen
	Email: eric@socialdesignhouse.com
	Twitter: @allenericr

-----------------------------------------------------------------------------------*/

/* ----- Variables ----- */

//start with an array of the four suits
var suits = ['Hearts', 'Spades', 'Clubs', 'Diamonds'];

//start with an array of the various cards
//notice that we're using Strings for the special cards and integers for the number cards, remember that arrays can hold any kind of data
var cards = ['Ace', 2, 3, 4, 5, 6, 7, 8, 9, 10, 'Jack', 'Queen', 'King'];

//we can use this to insert some jokers into our deck if we want
//I'm going to stick with a standard Red Joker and Black Joker
//you can define any others you want by adding another object to the array
var jokers = [
	{
		card : 'Joker',
		suit : 'Black'
	},
	{
		card : 'Joker',
		suit : 'Red'
	}
];

/* ----- Generating a Deck ----- */

//generate a deck
//this shows you how you can actually send a function that has a return value as a parameter for another function, allowing us to call both the build and shuffle functions in a single line
var deck = shuffle(build_deck(jokers), 2); //this will shuffle the deck twice and includes jokers //comment this out if you are playing with the code below

//display the deck
console.log(deck); //comment this out if you are playing with the code below
console.log('Cards in deck: ' + deck.length); //comment this out if you are playing with the code below

//comment and uncomment lines below to see what different options do
//comment out the lines of code above to play with this part of the code

//var deck = []; //initialize a deck array
//var shuffles = 4; //how many times we want to shuffle the deck

//uncomment one of the following to generate a starting deck
//deck = build_deck(); //this builds a traditional 52 card deck sorted low to high and grouped by suit
//deck = build_deck(jokers); //this builds a traditional 52 card deck sorted low to high and grouped by suit with jokers at the end

//console.log(deck); //uncomment this to see your deck pre-shuffling

//deck = shuffle(deck); //shuffle the deck once
//deck = shuffle(deck, shuffles); //shuffle the deck some number of times, play with values for the shuffles variable above to change how shuffled our deck becomes

//console.log(deck); //uncomment this to see your deck post-shuffling

//console.log(deck.length); //uncomment this to see how many cards are in our deck

/* ----- Functions ----- */

//the functions below have various console.log() statements that you can uncomment to see what the code is doing at that point in time

//this function will take our suits and our cards and generate an ordered deck of cards
function build_deck(jokers) {
	//initialize an empty array to store our generated deck
	var deck = [];

	//loop through our suits
	for(var i = 0; i < suits.length; i++) {
		//this suit loop will run four times

		//loop through our cards
		for(var j = 0; j < cards.length; j++) {
			//this card loop will run 13 times
			//that means will be doing it 13 times for each suit which will give us our 52 cards

			//generate an object for this card that contains it's value and it's suit
			var card = {
				card : cards[j],
				suit : suits[i]
			};

			//push our card object into our deck array
			deck.push(card);
		}
	}

	//if we've given an array of jokers or other wildcards
	//if jokers weren't provided, the jokers parameter will be undefined
	//to check if a paramater exists, it is recommended that you check the variable's type using the typeof operator
	//we didn't talk about the typeof operator, but you can learn more about it here:  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
	if(typeof jokers !== 'undefined') {
		//add the jokers to the end of our sorted deck
		//we could also replace this loop with the array.concat() method like this:  deck = deck.concat(jokers);
		//remember that you can find the array methods documentation at [w3schools](http://www.w3schools.com/js/js_array_methods.asp)
		for(var i = 0; i < jokers.length; i++) {
			deck.push(jokers[i]);
		}
	}

	//console.log(deck); //uncomment this line to see the generated deck

	//return the organized deck we just built
	return deck;
}

//take the deck and shuffle it some number of times
//we'll shuffle once by default, but can send any integer to this function as the times argument
function shuffle(deck, times) {
	//if we weren't provided a number of times to shuffle, we will default to 1 time
	//checking to see if the typeof times is undefined allows us to only provide a default value if one was not given
	//we didn't talk about the typeof operator, but you can learn more about it here:  https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/typeof
	if(typeof times === 'undefined') {
		times = 1;
	}

	//console.log('We will shuffle the deck ' + times + ' times'); //uncomment this to see how many times we are planning to shuffle our deck

	//initialize a counter for controlling how many times we shuffle our deck
	var time = 0;

	//use a while loop for shuffling until we've shuffled the desired number of times
	while(time < times) {
		//console.log('Shuffled ' + (time + 1) + ' times'); //uncomment this line to see a message each time we shuffle the deck, we are adding 1 to the time variable so that it's more human readable since we are starting at 0, that means we'll get a 1 the first time instead of a 0

		//replace the deck with our shuffled deck
		//this allows us to reuse our shuffled deck for the next shuffle if we are shuffling more than once
		deck = shuffleDeck(deck);

		//console.log(deck); //uncomment this line to see the shuffled deck for this particular shuffle, we will have another console.log() below that displays the final state of the deck

		//increment time counter
		//remember if we don't do this our while() condition will never be false and we'll create an infinite loop
		time++;
	}

	//console.log(deck); //uncomment this line to see the final state of our deck after all shuffling is complete

	//return the final deck after shuffling it some number of times
	return deck;
}

//this function will actually shuffle the deck array and return it
//we are separating this from the shuffle() function so that it's easy to loop and shuffle any number of times
function shuffleDeck(deck) {
	//initialize an empty array to hold our shuffled deck
	var deckShuffled = [];

	//loop through the ordered deck once for every card and then insert it into the shuffled deck
	//we are defining total along with our index counter i so that the total stays at 52 even after we've removed items from the deck array
	//this allows us to loop through and make sure we hit every card in the deck
	//if we used i < deck.length instead, after we were halfway through our loop it would stop because i would be greater than the number of items left in the array
	for(var i = 0, total = deck.length; i < total; i++) { //comment this line out and uncommen the line below it to see what happens if we don't define the total variable for our loop
	//for(var i = 0; i < deck.length; i++) { //see what happens when we remove items from the array while checking against it's length for our loop condition
		//this will give us a random number
		//we are multiplying the random by deck.length so that we'll get a number between 0 and the total number of cards left in our deck
		//after the first time this loop runs, we'll only have 51 items in our array so if we used 52 instead of deck.length we could end up with a random number that isn't an index in our array
		var rng = Math.floor((Math.random() * deck.length) + 0);

		//console.log('Total number of cards in unshuffled deck array: ' + deck.length); //uncomment this line to see how many cards are left to be shuffled into our new deck

		//console.log(rng); //uncomment this line to see what random number was generated

		//insert the randomly selected card into our shuffled deck
		deckShuffled.push(deck[rng]);

		//console.log('Removing card ' + deck[rng].card + ' of ' + deck[rng].suit + ' from unshuffled deck array and appending it to shuffled deck array'); //uncomment this line to see what card we are moving

		//remove the card from our original deck array since we can only use each card once
		deck.splice(rng, 1);

		//console.log(deck.length + ' cards left in the unshuffled deck'); //uncomment this line to see how many cards are left in the unshuffled deck after each iteration of the shuffle loop
	}

	//console.log(deckShuffled); //uncomment this line to see the state of the deck after it has been shuffled by this function

	//return the shuffled deck
	return deckShuffled;
}