cards number kids game

http://www.elated.com/res/File/articles/development/javascript/jquery/drag-and-drop-with-jquery-your-essential-guide/card-game.html

by ecartdk

HTML

<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.9/jquery-ui.min.js"></script>
<div class="wideBox">
  <h1>Drag-and-Drop with jQuery: Your Essential Guide</h1>
  <h2>A Number Cards Game</h2>
</div>


<div id="content">


  <div id="cardPile"> </div>
  <div id="cardSlots"> </div>


  <div id="successMessage">
    <h2>You did it!</h2>
    <button onclick="init()">Play Again</button>
  </div>


</div>


<div class="wideBox">
  <p>&copy; Elated.com | <a href="http://www.elated.com/articles/drag-and-drop-with-jquery-your-essential-guide/">Back to Tutorial</a></p>
  <p style="font-size: .8em; line-height: 1.5em;"><a rel="license" href="http://creativecommons.org/licenses/by/3.0/"><img alt="Creative Commons License" style="border-width:0" src="http://i.creativecommons.org/l/by/3.0/88x31.png" /></a><br />This <span xmlns:dc="http://purl.org/dc/elements/1.1/" href="http://purl.org/dc/dcmitype/Text" rel="dc:type">work</span> by <a xmlns:cc="http://creativecommons.org/ns#" href="http://www.elated.com/" property="cc:attributionName" rel="cc:attributionURL">http://www.elated.com/</a> is licensed under a <a rel="license" href="http://creativecommons.org/licenses/by/3.0/">Creative Commons Attribution 3.0 Unported License</a>.</p>
</div>

CSS

/* Add some margin to the page and set a default font and colour */  body {   margin: 30px;   font-family: "Georgia", serif;   line-height: 1.8em;   color: #333; }  /* Give headings their own font */  h1, h2, h3, h4 {   font-family: "Lucida Sans Unicode", "Lucida Grande", sans-serif; }  /* Main content area */  #content {   margin: 80px 70px;   text-align: center;   -moz-user-select: none;   -webkit-user-select: none;   user-select: none; }  /* Header/footer boxes */  .wideBox {   clear: both;   text-align: center;   margin: 70px;   padding: 10px;   background: #ebedf2;   border: 1px solid #333; }  .wideBox h1 {   font-weight: bold;   margin: 20px;   color: #666;   font-size: 1.5em; }  /* Slots for final card positions */  #cardSlots {   margin: 50px auto 0 auto;   background: #ddf; }  /* The initial pile of unsorted cards */  #cardPile {   margin: 0 auto;   background: #ffd; }  #cardSlots, #cardPile {   width: 910px;   height: 120px;   padding: 20px;   border: 2px solid #333;   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   border-radius: 10px;   -moz-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);   -webkit-box-shadow: 0 0 .3em rgba(0, 0, 0, .8);   box-shadow: 0 0 .3em rgba(0, 0, 0, .8); }  /* Individual cards and slots */  #cardSlots div, #cardPile div {   float: left;   width: 58px;   height: 78px;   padding: 10px;   padding-top: 40px;   padding-bottom: 0;   border: 2px solid #333;   -moz-border-radius: 10px;   -webkit-border-radius: 10px;   border-radius: 10px;   margin: 0 0 0 10px;   background: #fff; }  #cardSlots div:first-child, #cardPile div:first-child {   margin-left: 0; }  #cardSlots div.hovered {   background: #aaa; }  #cardSlots div {   border-style: dashed; }  #cardPile div {   background: #666;   color: #fff;   font-size: 50px;   text-shadow: 0 0 3px #000; }  #cardPile div.ui-draggable-dragging {   -moz-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);   -webkit-box-shadow: 0 0 .5em rgba(0, 0, 0, .8);   box-shadow: 0 0 .5em rgba(0, 0, 0, .8); }  /*...

JavaScript

var correctCards = 0;
$( init );


function init() {


  // Hide the success message
  $('#successMessage').hide();
  $('#successMessage').css( {
    left: '580px',
    top: '250px',
    width: 0,
    height: 0
  } );


  // Reset the game
  correctCards = 0;
  $('#cardPile').html( '' );
  $('#cardSlots').html( '' );


  // Create the pile of shuffled cards
  var numbers = [ 1, 2, 3, 4, 5, 6, 7, 8, 9, 10 ];
  numbers.sort( function() { return Math.random() - .5 } );


  for ( var i=0; i<10; i++ ) {
    $('<div>' + numbers[i] + '</div>').data( 'number', numbers[i] ).attr( 'id', 'card'+numbers[i] ).appendTo( '#cardPile' ).draggable( {
      containment: '#content',
      stack: '#cardPile div',
      cursor: 'move',
      revert: true
    } );
  }


  // Create the card slots
  var words = [ 'one', 'two', 'three', 'four', 'five', 'six', 'seven', 'eight', 'nine', 'ten' ];
  for ( var i=1; i<=10; i++ ) {
    $('<div>' + words[i-1] + '</div>').data( 'number', i ).appendTo( '#cardSlots' ).droppable( {
      accept: '#cardPile div',
      hoverClass: 'hovered',
      drop: handleCardDrop
    } );
  }


}


function handleCardDrop( event, ui ) {
  var slotNumber = $(this).data( 'number' );
  var cardNumber = ui.draggable.data( 'number' );


  // If the card was dropped to the correct slot,
  // change the card colour, position it directly
  // on top of the slot, and prevent it being dragged
  // again


  if ( slotNumber == cardNumber ) {
    ui.draggable.addClass( 'correct' );
    ui.draggable.draggable( 'disable' );
    $(this).droppable( 'disable' );
    ui.draggable.position( { of: $(this), my: 'left top', at: 'left top' } );
    ui.draggable.draggable( 'option', 'revert', false );
    correctCards++;
  } 
  

  // If all the cards have been placed correctly then display a message
  // and reset the cards for another go


  if ( correctCards == 10 ) {
    $('#successMessage').show();
    $('#successMessage').animate( {
      left: '380px',
      top: '200px',
     ...