Shuffling the Deck: Learning Loops and Nested Loops in JavaScript

I’ve been diving into the world of JavaScript and having a blast revisitinvg different programming concepts. One particularly interesting and important topic has been loops and nested loops, which allow you to automate repetitive tasks and work with complex data structures.

To put these concepts into practice, our class decided to create a fun project that simulates shuffling a deck of cards and dealing a poker hand. It’s a great way to see how loops and nested loops can be used to generate and manipulate data in a practical scenario.

Let’s take a closer look at the code and break down what’s happening:

const kinds = ["2", "3", "4", "5", "6", "7", "8", "9", "10", "Jack", "Queen", "King", "Ace"];
const suits = ["Diamonds", "Hearts", "Spades", "Clubs"];
const deck = [];

First, we define two arrays: kinds represents the different card values (2–10, Jack, Queen, King, Ace), and suits contains the four suits (Diamonds, Hearts, Spades, Clubs). We also initialize an empty deck array to store our generated cards.

for (let i = 0; i < kinds.length; i++) {
for (let j = 0; j < suits.length; j++) {
const card = {
suit: suits[j],
kind: kinds[i],
name: kinds[i] + " of " + suits[j],
fileName: kinds[i] + "-of-" + suits[j] + '.png',
value: kinds[i] === "Jack" || kinds[i] === "Queen" || kinds[i] === "King" ? '10' :
kinds[i] === "Ace" ? '11' : kinds[i]
};
deck.push(card);
}
}

Here’s where the magic happens! We use a nested loop to generate all possible combinations of card kinds and suits. The outer loop iterates over the kinds array, while the inner loop iterates over the suits array. For each combination, we create a card object with properties like suit, kind, name, fileName, and value. The value property is determined based on the card kind, assigning a value of ‘10’ to face cards (Jack, Queen, King) and ‘11’ to an Ace. Finally, we push each card object into the deck array.

function dealCards() {
const hand = [];
const dealtCards = [];
while (hand.length < 5) {
const i = Math.floor(Math.random() * 52);
if (!dealtCards.includes(i)) {
hand.push(deck[i]);
dealtCards.push(i);
}
}
const imgs = document.querySelectorAll("img");
for (let i = 0; i < 5; i++) {
imgs[i].src = "images/" + hand[i].fileName;
}
}

The dealCards function is responsible for randomly selecting five cards from the deck array to form a poker hand. We use a while loop to keep selecting random cards until we have a hand of five unique cards. The Math.floor(Math.random() * 52) expression generates a random index between 0 and 51 (inclusive) to select a card from the deck. We keep track of the dealt card indices in the dealtCards array to ensure we don’t deal the same card twice.

Finally, we use querySelectorAll to select all the <img> elements on the page and update their src attributes with the corresponding card image file names.

document.querySelector('button').addEventListener('click', dealCards);

To trigger the card dealing process, we add a click event listener to a button element. Whenever the button is clicked, the dealCards function is called, and a new poker hand is dealt and displayed on the page.

This project has been a fun and engaging way to explore loops, nested loops, and manipulating data with JavaScript. It’s amazing to see how a few lines of code can simulate the complex process of shuffling a deck of cards and dealing a random hand.

As I continue on my coding journey, I’m excited to tackle more challenging projects and deepen my understanding of programming concepts. The power and versatility of JavaScript never cease to amaze me, and I can’t wait to see what other exciting things I’ll be able to build!

Happy coding, everyone! Remember, every line of code is a step towards mastering the craft of programming. Keep learning, keep practicing, and most importantly, keep having fun!