lunedì 11 novembre 2013

Aggiornamento per Memory, gioco in javascript

Ieri ho scritto questo giochino in Javascript:
http://newbufferedwriter.blogspot.com/2013/11/memory-gioco-mnemonico-che-ho-scritto.html

oggi vi ho applicato un piccolo aggiornamento, ovvero invece di vedere i simboli delle lettere, vedere delle immagini. Le modifiche allo script sono state minime, le uniche funzioni che ho modificato sono nuovoGioco(), mostraSimbolo() e una modifica minore in clickTo(). Mentre prima erano delle semplici lettere racchiuse fra i tag <th> della tabella, adesso sono delle immagini, ovvero degli oggetti che devono essere mostrati all'utente creano un nuovo tag (DOM Element in Javascript) di nome "img", e applicarvi un attributo "src" per la sorgente dell'immagine (nome del file). In linea di massima sarebbe possibile fare un confronto tra le immagini per vedere se sono uguali solamente tramite "src", ma ho preferito aggiungere un altro attributo "name" affinché un'immagine abbia un nome univoco. Così i confronti vengono fatti tramite questo attributo. Riporto le funzioni aggiornate, poi tutto rimane uguale:

function nuovoGioco(){
  array  = new Array();
  caselle_aperte=new Array();
  var array_simboli= new Array();
  for (i=0;i<8;i++){
      var image = new Image();
      image.src=(i+1).toString()+".png";
      image.name=(i+1).toString();
      array_simboli[i] = image;
  }
  var simbolo;
  //Cancello la tabella
  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
  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
   for (i=0;i<16;i++)
     if (array[i]==null){
         var img = new Image();
         img.src = "1.png";
         img.name = "1";
         array[i]= img;
         break;
     }
}
function mostraSimbolo(riga,colonna){
   document.getElementById(riga.toString()+colonna.toString()).innerHTML="";
   var node = document.createElement("IMG");
   node.setAttribute("src",array[((riga-1)*4)+colonna-1].src);
   node.setAttribute("name",array[((riga-1)*4)+colonna-1].name);
   document.getElementById(riga.toString()+colonna.toString()).appendChild(node);
}




function clickTo(riga,colonna){
   if (caselle_aperte.length==0){
      mostraSimbolo(riga,colonna);
      caselle_aperte[0]=riga.toString()+colonna.toString();
      return;
   }
   if (caselle_aperte.length==1){
      if (caselle_aperte[0]==riga.toString()+colonna.toString())
   return;
      mostraSimbolo(riga,colonna);
      caselle_aperte[1]=riga.toString()+colonna.toString();
      if (getSimboloAt(caselle_aperte[1]).name==(getSimboloAt(caselle_aperte[0])).name){
          document.getElementById(riga.toString()+colonna.toString()).setAttribute('style','background-color:#81F781;');
          document.getElementById(caselle_aperte[0]).setAttribute('style','background-color:#81F781;');
          caselle_aperte.pop();
          caselle_aperte.pop();
          var conta;
          conta=0;
          for (i=1;i&lt;=4;i++)
             for (c=1;c&lt;=4;c++){
                 if (document.getElementById(i.toString()+c.toString()).innerHTML!="*")
                      conta++;
             }
          }
          if (conta==16)
              alert("Hai vinto!");
          return;
      }
      
   if (caselle_aperte.length==2){
      nascondiSimboloS(caselle_aperte[0]);
      nascondiSimboloS(caselle_aperte[1]);
      caselle_aperte.pop();
      caselle_aperte.pop();
      return;
   }
}





E come ieri, ecco il link per la prova:

3 commenti:

  1. Scusami sono sempre io, se voglio cambiare le immagini che istruzione devo modificare? Sto impazzendo ahahaha xD

    RispondiElimina
  2. Se mi dai il tuo indirizzo mail ti allego come l'ho modificato io e con le immagini che vorrei inserire

    RispondiElimina
  3. Per le immagini non devi cambiare il codice, ma i file presenti nella stessa cartella del file .html contenente lo script.
    Puoi scaricare il file html sul tuo computer (aprendo il link e scegliendo "salva pagina con nome" o qualcosa del genere), lo salvi in un cartella e sempre nella stessa cartella ci metti le immagini che vuoi tu, devono essere 8 e devono avere per nome "1.png","2.png" fino a "8.png". Attento alle dimensioni, per ora sono 46x46 pixel, ma puoi metterne di altre dimensioni, ma devi modificare il codice CSS del file altrimenti la tabella "si muove"

    RispondiElimina