Dealing Cards Array Simulation

Shows how to create an array of playing cards and deal randomly from the array.

by Kristy Bond

HTML

<script src="http://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<input type="button" value="Deal Card" id="deal" />
<div id="drop" class="drop">Drop Here</div>

CSS

.drop {
    width: 400px;
    height: 200px;
    background-color: powderBlue;
    margin-top: 25px;
}

img {
  width: 50px;
}

JavaScript

$('#deal').click(function () {
    dealCard(randomCard());
});

var cardsInDeck = new Array();
var numberCards = 54;
fillDeck();
init();

// Set drop div to be droppable
function init() {
  $('#drop').droppable( {
    drop: handleDropEvent
  } );   
}

// Deal a Card
function dealCard(i) {
    if (numberCards == 0) return false;
    var img = document.createElement("img");
    img.src = "http://kristybond.com/cards" + cardsInDeck[i] + ".png";
    img.id = cardsInDeck[i];

    document.body.appendChild(img);
    $("#" + cardsInDeck[i]).draggable();
    removeCard(i);
}

// Select a Random Card
function randomCard() {
   return Math.floor(Math.random() * numberCards);  
}

// Remove Card from the Deck
function removeCard(c) {
  // simply make every higher numbered card move down 1
  for (j = c; j <= numberCards - 2; j++) {
    cardsInDeck[j] = cardsInDeck[j + 1];
  }
  numberCards--;
}

// Drop Event
function handleDropEvent(event, ui) {
  var draggable = ui.draggable;
  $('#drop').html( 'The card  "' + draggable.attr('id') + '" was discarded');  
}

// Put Cards in Array
function fillDeck() {
  var suits = new Array();
  var faceCards = new Array();
  suits[0] = "clubs";
  suits[1] = "diamonds";
  suits[2] = "hearts";
  suits[3] = "spades";
  faceCards[0] = "Jack";
  faceCards[1] = "Queen";
  faceCards[2] = "King";
  faceCards[3] = "Ace";
  var i = 0;
  var j = 0;
  var k = 0;
  var l = 0;
  
  for (j = 0; j < 4; j++) {
    for (k = 2; k < 11; k++) {
      cardsInDeck[i] = suits[j] + k;
      i++;
    }
    for (l = 0; l < 4; l++) {
      cardsInDeck[i] = suits[j] + faceCards[l];
      i++;
    }
  }
 
}