Memory, gioco mnemonico che ho scritto in javascript

Aggiornamento: clicca qui

Ispirandomi al gioco che era presente nel vecchio Nokia 3210, ho creato questo gioco con poche linee di codice in Javascript e qualcosa basilare di CSS e HTML. Il file HTML su cui mi baso (ci sono riferimenti alla tabella, id in particolare, e un tasto per "nuovo gioco"):

<CENTER>
<p style="font-size:x-large;font-style:italic;">Memory: clicca sulle caselle e memorizzale per trovare le coppie, fino a scoprire tutte le caselle.</p>
<a href="#">
<table>
<tr><th id="11" onclick="clickTo(1,1)">*</th><th id="12" onclick="clickTo(1,2)">*</th><th id="13" onclick="clickTo(1,3)">*</th><th id="14" onclick="clickTo(1,4)">*</th></tr>
<tr><th id="21" onclick="clickTo(2,1)">*</th><th id="22" onclick="clickTo(2,2)">*</th><th id="23" onclick="clickTo(2,3)">*</th><th id="24" onclick="clickTo(2,4)">*</th></tr>
<tr><th id="31" onclick="clickTo(3,1)">*</th><th id="32" onclick="clickTo(3,2)">*</th><th id="33" onclick="clickTo(3,3)">*</th><th id="34" onclick="clickTo(3,4)">*</th></tr>
<tr><th id="41" onclick="clickTo(4,1)">*</th><th id="42" onclick="clickTo(4,2)">*</th><th id="43" onclick="clickTo(4,3)">*</th><th id="44" onclick="clickTo(4,4)">*</th></tr>
</table>
<input type="button" value="Nuovo gioco" onclick="nuovoGioco()" style="width:100px;height:50px;">
</a>
</CENTER>

Mentre  il cuore del programma vero e proprio è lo script in javascript, tutto commentato:

<script type="text/javascript">
//Array per contenere i caratteri da scoprire
var array = new Array();
//Array per controllare il flusso del gioco (se sono state aperte due caselle e sono uguale allora scopri, altrimenti nascondi ecc.
var caselle_aperte = new Array();
/*INIZIO*/
nuovoGioco();

/*
*Questa funzione gestisce quando viene cliccata una casella, e decide cosa fare
*a seconda del contenuto di caselle_aperte
*/

function clickTo(riga,colonna){
   //Caso 1: non ci sono caselle aperte, quindi deve scoprirne una sola
   if (caselle_aperte.length==0){
      mostraSimbolo(riga,colonna);
      caselle_aperte[0]=riga.toString()+colonna.toString();
      return;
   }
   //Caso 2: c'è già una casella aperta, scopri la nuova e controlla se sono uguali
   if (caselle_aperte.length==1){
      //se è la stessa ignora ed esci
      if (caselle_aperte[0]==riga.toString()+colonna.toString())
   return;
     //scopri la casella
      mostraSimbolo(riga,colonna);
      //memorizza la nuova casella in caselle_aperte
      caselle_aperte[1]=riga.toString()+colonna.toString();
     //controlla se i simboli sono uguali
      if (getSimboloAt(caselle_aperte[1])==(getSimboloAt(caselle_aperte[0]))){
          document.getElementById(riga.toString()+colonna.toString()).setAttribute('style','background-color:#81F781;');
          document.getElementById(caselle_aperte[0]).setAttribute('style','background-color:#81F781;');
          //cancella il contenuto di caselle_aperte
          caselle_aperte.pop();
          caselle_aperte.pop();
          //Controlla se hai vinto (cioè se tutte le caselle sono state scoperte
          var conta;
          conta=0;
          for (i=1;i<=4;i++)
             for (c=1;c<=4;c++){
                 if (document.getElementById(i.toString()+c.toString()).innerHTML!="*")
                      conta++;
             }
          }
          if (conta==16)
              alert("Hai vinto!");
          return;
      }
   //Caso 3: ci sono già due caselle scoperte e sono entrambe diverse.
   if (caselle_aperte.length==2){
      //Nascondi i simboli
      nascondiSimbolo(caselle_aperte[0]);
      nascondiSimbolo(caselle_aperte[1]);
      //svuota caselle_aperte
      caselle_aperte.pop();
      caselle_aperte.pop();
      return;
   }
}
/*
* Mostra semplicemente il simbolo in riga,colonna
*/
function mostraSimbolo(riga,colonna){
   document.getElementById(riga.toString()+colonna.toString()).innerHTML=array[((riga-1)*4)+colonna-1];
}
/*
*Nasconde semplicemente il simbolo in riga, colonna
*/
function nascondiSimbolo(riga,colonna){
   document.getElementById(riga.toString()+colonna.toString()).innerHTML="*";
}
/*
*Come sopra, ma overload per un solo parametro di tipo stringa(es:"32, riga 3, colonna 2)
*/
function nascondiSimbolo(_stringa){
   stringa = new String(_stringa);
   riga = stringa.charAt(0);
   colonna = stringa.charAt(1);
   document.getElementById(riga.toString()+colonna.toString()).innerHTML="*";
}
/*
*Ritorna il simbolo che c'è memorizzato in riga, colonna
*/
function getSimboloAt(riga,colonna){
  riga--;
  colonna--;
  return array[(riga*4)+colonna];
}
/*
*Come sopra, ma overload per un solo parametro di tipo stringa(es:"32, riga 3, colonna 2)
function getSimboloAt(_stringa){
  stringa = new String(_stringa);
  riga = stringa.charAt(0);
  colonna = stringa.charAt(1);
  riga--;
  colonna--;
  return array[(riga*4)+colonna];
}
/*
*Inizia un nuovo gioco
*/
function nuovoGioco(){
  //creo di nuovo un array
  array  = new Array();
  //idem
  caselle_aperte=new Array();
  //array che contiene i simbolo, per ora solo lettere
  var array_simboli= new Array("a","b","c","d","e","f","g","h");
  var simbolo;
  //Cancello il contenuto delle caselle e metto "*" al posto
  for (i=1;i<=4;i++)
     for(c=1;c<=4;c++) {
        riga = Math.floor(i/4)+1;
        colonna = i-((riga-1)*4);
        document.getElementById(i.toString()+c.toString()).innerHTML="*";
        document.getElementById(i.toString()+c.toString()).setAttribute("style","background-color:white;");
     }
   //Preparo l'array a random
  var pos1,pos2;
  for (i=0;i<8;i++){
   while(array[pos1]!=null)
       pos1=Math.floor((Math.random()*16));
   array[pos1]=array_simboli[i];
   while(array[pos2]!=null)
       pos2=Math.floor((Math.random()*16));
   array[pos2]=array_simboli[i];
   }
   //Correggo bug, secondo il quale "a" viene memorizzata una sola volta mentre l'altra è null
   for (i=0;i<16;i++)
     if (array[i]==null){
         array[i]="a";
         break;
     }
}

E da qui potrete vedere il risultato:

Memory