War Project – Shuffle

In Lesson 65 we made a deck of cards. Now we’re going to shuffle them and deal them to our two players.

When you need something specific, but widely used, it’s something you can search up on the internet. You can search for how to shuffle cards and get this code. Inside this code is the method “random” which produces a random number. That’s another one of those specific things you might need that lots of people use, and so you can just search on the internet easily how to do that.

But let me walk you through it, because even if you took the code from somewhere, it’s always good to understand your own code!

This is defining the function called shuffle. We’re applying it to the array called cards. We define things at the top of our page. You can use something before it is defined. So, we define things at the top of the page and use them lower down the page.

We haven’t learned “this.” It’s just saying “this thing we are working with.” It’s the cards array. Then we have a for loop. It’s starting at the back of the deck. The deck has 52 cards, so the last card has the index of 51. The first card has the index of 1. The index is where we find it in the array. So, we’re starting with the last card in the deck, index 51 and swapping that with a randomly selected card from the deck. Then we take the card at index 50 and do the same. We keep going until we have swapped every card in the deck with another.

See if you can see what’s happening in the code. The randomIndex is choosing our random card. Math.random() chooses a decimal between 0 and 1. If you want a number between 0 and 5, you would multiply that decimal by five, Math.random()*5. Before we switch cards, we need to save the one. We just save them to a holding variable. We have to save both the number and suit at that card’s index. Then we put in the number and suit of card 51. Then we define card 51 with the number and suit from the random index.

cards.shuffle = function() { console.log("shuffle"); var input = this; for (var i = cards.length-1; i >=0; i--) { var randomIndex = Math.floor(Math.random()*(i+1)); var itemAtIndex = cards[randomIndex] [0}; var itemAtSecond = cards[randomIndex][1]; input[randomIndex][0] = input[i][0]; input[randomIndex][1] = input[i][1]; input[i][0] = itemAtIndex; input[i][1] = itemAtSecond; } return input; }

Return means the function is over.

Remember that when a = b, a is getting assigned b’s value.

Look at the code below. We’re calling the shuffle function.

Then we’re dividing the cards in half. We’re giving half to firstPlayer by pushing them to the firstPlayer array. I give the first 26 cards to player one, cut out of the cards array those 26 cards, and then give the rest to the secondPlayer. Finally, I write to the page how many are in each player’s pile. See if you can find all that in the code.

cards.shuffle(); var half = cards.length/2; for (i=0; i<half; i++) { firstPlayer.push(cards[1]); } cards.splice(0, half); secondPlayer = cards; $player1Count.html(firstPlayer.length); $player2Count.html(secondPlayer.length);

That is not at all the only way you can do this. I could have put the splice into the for loop and spliced off one card at a time. I could have skipped the half variable and used i = i + 2, which would deal every other card to the first player. If those were spliced out, cards.splice(i), within the for loop, then we could then just give cards to second player after that.

There are lots of ways to do things. Code how it makes sense to your brain. And take the time to leave yourself notes about what the different things are doing. Just because it made sense once, doesn’t mean you’ll understand yourself when you come back to it much later.

You can watch the lesson.