FreeCell

Probably the best solitaire game there is and certainly my favourite. All cards are exposed and nearly every deal is solvable but some can be quite challenging.

If you're not familiar with the game please play the end result of this tute before proceeding with this tute.

I grappled with the fact that JavaScript starts counting at zero (eg arrays) while CSS starts at one (eg grid rows). I decided to stick with the JavaScript convention except when talking about rows and columns.

In keeping with this plan, I have renamed the playing cards from 0 to 51 - you can download them here.

the main panel

There will be 6 rows by 8 columns. Why only 48 cards? Because the aces will be kept as starters for the foundation piles.

My idea is to set up 8 arrays for the columns, g_main_cols[1] to g_main_cols[8]. A function, deal() will be used to fill these arrays. Like this:

deal()
function deal() {
  var cards=[];
  for (var i=1;i<52;i++) {
    if (i!=13 && i!=26 && i!=39) cards.push(i);
  }
  for (var c=1;c<9;c++) g_main_cols[c]=[];
  Shuffle(cards);
  var i=0;
  for (var c=1;c<9;c++) {
    for (var r=1;r<7;r++) {
      var id=cards[i]; i++;
      g_main_cols[c].push(id);
    }
  }
}