{"id":3776,"date":"2023-07-18T01:25:28","date_gmt":"2023-07-18T01:25:28","guid":{"rendered":"https:\/\/nmi.cool\/advweb\/?page_id=3776"},"modified":"2026-03-01T21:49:05","modified_gmt":"2026-03-01T21:49:05","slug":"exercise-lets-play-cards","status":"publish","type":"page","link":"https:\/\/nmi.cool\/advweb\/unit-two-javascript\/week-six\/exercise-lets-play-cards\/","title":{"rendered":"Exercise: Let’s Play Cards"},"content":{"rendered":"\n

In this lesson we are about to take random numbers to another level by using them to construct poker hands with actual cards.<\/p>\n\n\n\n

Goal: Use JavaScript\u2019s Math.random() and array manipulation methods to build a simple 5-card draw experience using 52 playing card images and basic jQuery interactivity.<\/p>\n\n\n\n

    \n
  1. Download cards.zip<\/a> and move the unzipped folder to your work area.<\/li>\n\n\n\n
  2. Look at cards.html. As you can see, it already contains a div named #deck, a link to cards.js, and a button that calls a function named shuffle.<\/li>\n\n\n\n
  3. With a bit more poking around, you should also discover that there are 52 card images inside of the cards folder which are conveniently referenced by name in an array inside of cards.js.<\/li>\n\n\n\n
  4. Your job at this point is to build that function inside of cards.js and get it to randomly assemble the images of five separate cards inside of #deck. <\/li>\n\n\n\n
  5.  Now that the preliminaries are out of the way, the first step is to create a variable named deck and assign it to the #deck div tag. 
    let deck = document.querySelector(\"#deck\");<\/code><\/pre> <\/li>\n\n\n\n
  6. Next create the shuffle function that is going to sort the cards for us. 
    function shuffle() {\n    let deck = document.querySelector(\"#deck\");\n    deck.innerHTML = \"\"; \/\/ clear the deck first<\/code><\/pre><\/li>\n\n\n\n
  7. Now our job is to generate a suitable random number. Let’s do that by creating a new variable named outcome and setting it to Math.random as in
    let outcome = Math.random()<\/strong>. As you know, this will generate a fraction between 0 and 1. We need a much bigger number. Since we know there are 52 cards in the deck, we could multiply it by 52. However, we’re going to use a more sustainable approach. 
    let outcome = Math.floor(Math.random() * cards.length);
    console.log(outcome); \/\/ optional debug<\/code><\/pre><\/li>\n\n\n\n
  8. Let’s start humbly and see if we can add just one card to the deck with code that starts something like: 
        deck.innerHTML = \"<img src='cards\/\" + cards[outcome] + \"'>\";<\/code><\/pre><\/li>\n\n\n\n
  9. If things work properly, that should place one card in the deck, but we need five. Now it’s time to exercise your coding powers and add a loop. The for loop shown below would be a very functional starting point. 
        for (let i = 0; i < 5; i++) {\n        let outcome = Math.floor(Math.random() * cards.length);\n        deck.innerHTML += \"<img src='cards\/\" + cards[outcome] + \"'>\";\n    }<\/code><\/pre><\/li>\n\n\n\n
  10. Make sure you prevent repeating or infinite cards! Add the following to your function: 
        deck.innerHTML = \"\"; \/\/clear the deck before starting\n    deck.innerHTML += \"<img src='cards\/\" + cards[outcome] + \"'>\"; \/\/ Use += so cards accumulate instead of replace<\/code><\/pre><\/li>\n<\/ol>\n\n\n\n
    Now it’s time for some fun side quests.<\/strong><\/p>\n\n\n\n
      \n
    1. Place this at the end of your shuffle() function to make the cards draggable: 
          $(\"img\").draggable();<\/code><\/pre><\/li>\n\n\n\n
    2. Add a function (still inside of shuffle()) that allows you to double click on a card to discard it: 
          $(\"img\").dblclick(function(){\n        $(this).hide();\n    });<\/code><\/pre><\/li>\n\n\n\n
    3. Finally, we need to make sure that cards are not being reused. That means, we need to remove them from the possible cards (the array) when they display. As the deck shrinks, we also need to change the random number generator to respond to the adjust number of cards. We’ll use a new concepts: splice. Add this inside your for loop, right after drawing each card: 
      cards.splice(outcome, 1);<\/code><\/pre><\/li>\n<\/ol>\n\n\n\n
      Test it! Do you:<\/p>\n\n\n\n