Fire JS Bin - Freecell

var cards = [10, 11, 12, 13, 20, 21, 22, 23, 30, 31, 32, 33, 40, 41, 42, 43, 50, 51, 52, 53, 60, 61, 62, 63, 70, 71, 72, 73, 80, 81, 82, 83, 90, 91, 92, 93, 100, 101, 102, 103, 110, 111, 112, 113, 120, 121, 122, 123, 130, 131, 132, 133];
var spots = [
  [0],
  [6, 10],
  [6, 8, 10],
  [1, 5, 11, 15],
  [1, 5, 8, 11, 15],
  [1, 3, 5, 11, 13, 15],
  [1, 3, 5, 7, 11, 13, 15],
  [1, 3, 5, 7, 9, 11, 13, 15],
  [1, 2, 4, 5, 8, 11, 12, 14, 15],
  [1, 2, 4, 5, 7, 9, 11, 12, 14, 15],
  [1, 15],
  [1, 15],
  [1, 15]
];
var ind = ["A", "2", "3", "4", "5", "6", "7", "8", "9", "10", "J", "Q", "K"];
var coul = ["♥", "♦", "♣", "♠"];
var plateau = new Array(8);

function getPxfromCol(col) {
  return (16 + col * 100)
}

function getPxfromLine(line) {
  return (140 + line * 20)
}

function select_card(c) {
  c.setAttribute("class", "selected_card" + (c.id % 10 < 2 ? " red" : ""));
  localStorage.setItem("cardselected", c.id)
}

function deselect(c) {
  c.setAttribute("class", "carte" + (c.id % 10 < 2 ? " red" : ""));
  localStorage.setItem("cardselected", 0)
}

function select_column(c) {
  if ((s = localStorage.getItem("cardselected")) == 0) return;
  else if (plateau[c][0] == 0) moveCardToColumn(s, parseInt(c));
  else {
    var l = 0;
    while (plateau[c][++l] > 0);
    card_click(document.getElementById(plateau[c][l - 1]))
  }
}

function testwin() {
  var c = 8;
  while (--c >= 0 && plateau[c][0] == 0);
  if (c < 0) alert("Congratulations, you win !")
}

body { font-family:arial, sans-serif; background-color:#060; background:-webkit-gradient(radial, 50% 50%, 0, 50% 50%, 800, from(#33AA33), to(#006600)) }
h1 { color:#FFF; margin:20px 0 0 20px; }
#plateau { width:800px; height:750px; margin-left:auto; margin-right:auto; background-color:rgba(255, 255, 255, 0.1); }
#commandes { float:right; width:100px; }
#commandes input { float:right; margin-right:20px; padding:10px; }
.carte, .selected_card { position:absolute; width:71px; height:96px; font-size:16pt; background-color:#FFF; }
.carte { box-shadow:0 0 0 #FFF; -webkit-box-shadow:0 0 0 #FFF; -moz-box-shadow:0 0 0 #FFF; -webkit-transition:all 1s ease-in-out; border-color:gray #000 #000 gray; border-style:solid; border-width:1px; }
.red { color:red; }
.index { font-size:50%; font-weight:700; position:absolute; left:4px; top:4px; }
.selected_card { box-shadow:0 0 30px #FFF; -webkit-box-shadow:0 0 30px #FFF; -moz-box-shadow:0 0 30px #FFF; -webkit-transition:all .2s ease-in; border-color:red; border-style:solid; border-width:2px; }
.libre, .destination { position:absolute; width:67px; height:92px; margin-top:16px; z-index:1; }
.libre { border:2px #FFF ridge; }
.destination { border:2px #FFDF0F ridge; }
.colonne { position:absolute; height:600px; width:71px; margin-top:140px; }
.spot1 { position:absolute; left:16px; top:4px; }
.spot2 { position:absolute; left:16px; top:21px; }
.spot3 { position:absolute; left:16px; top:38px; }
.spot4 { position:absolute; left:16px; top:55px; }
.spot5 { position:absolute; left:16px; top:72px; }
.spot6 { position:absolute; left:30px; top:4px; }
.spot7 { position:absolute; left:30px; top:21px; }
.spot8 { position:absolute; left:30px; top:38px; }
.spot9 { position:absolute; left:30px; top:55px; }
.spot10 { position:absolute; left:30px; top:72px; }
.spot11 { position:absolute; left:44px; top:4px; }
.spot12 { position:absolute; left:44px; top:21px; }
.spot13 { position:absolute; left:44px; top:38px; }
.spot14 { position:absolute; left:44px; top:55px; }
.spot15 { position:absolute; left:44px; top:72px; }
.ace { font-size:220%; position:absolute; left:20px; top:18px; }
.face { position:absolute; left:12px; top:8px; width:45px; height: 80px; }