jeu de memory bug

jeu de memory bug - HTML/CSS - Programmation

Marsh Posté le 15-05-2012 à 11:52:13    

Bonjour à tous,
 
Je conçois un petit jeu de memory tout simple mais je bloque littéralement car le script ne démarre pas on dirait.
Je ne sais plus quoi faire.
Voici un extrait du fichier html (la div contenant mes cartes) :

Code :
  1. <head>
  2.         <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  3.         <title>JEU DE MEMORY - Amandine Corgier-Perretant</title>
  4.         <link rel="stylesheet" type="text/css" href="projet_memory_corgier2.css" />
  5.        
  6.  <script language="javascript" src="projet_memory_corgier.js" type="text/javascript"></script>
  8.  <script type="text/javascript" src="fonts/cufon-yui.js"></script>
  9.  <script type="text/javascript" src="fonts/lobster.font.js"></script>
  10.  <script type="text/javascript">Cufon.replace('h1,h2');</script>
  11.      
  12. </head>
  15.     <body onload="installation()">
  17.            <!--conteneur global de ma page-->
  18.         <div id="global">
  19.              
  20.    
  21.         <div id="entete">      <!---MON HEADER DEBUT-->
  22.         <img src="autres/header.png" alt="projet"/>
  23.         <h1>Jeu de Memory<br/>
  24.           :: Projet 2012 Amandine Corgier - CHA173080 ::</h1>
  25.     </div>   <!---MON HEADER FIN-->
  26.      
  27.        
  28.        
  29.         <div id="boitecentrale"> <!---MA BOITE CENTRALE DEBUT-->
  30.        
  31.        
  32.         <div id="explications"> <!---MON EXPLICATION DEBUT-->
  33.             <h2>Les règles du jeu</h2><hr/>
  34.             <p>Le principe du Memory est de retrouver un ensemble de paires. Ce jeu se joue avec des cartes sur
  35.             lesquelles se trouvent des symboles. Chaque symbole se trouve sur deux cartes distinctes. Le jeu se déroule ainsi :</p>
  36.                 <ul>
  37.                 <li>Les cartes sont placées faces contre la table ;</li>
  38.                 <li>Le jeu se joue par tours successifs :</li>
  39.                 <li>Si les cartes sont les mêmes elles sont supprimées du jeu</li>
  40.                 <li>Si les cartes ne sont pas les mêmes, elles sont replacées au même endroit, face contre la table.</li>
  41.                 <li>Le jeu se termine quand toutes les paires ont été trouvées ;</li>
  42.                 <li>Le nombre de tentatives est affiché.</li>
  43.                 </ul>
  44.         </div>    <!---MON EXPLICATION FIN-->
  45.            
  46.         <div>  <!---MA BOITE MEMORY DEBUT-->
  47.             <table id="jeu" class="tablejeu">
  48.                 <tr>
  49.                 <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(0)"><img class="image" src="dos.jpg" alt=""/></button></td>
  50.                 <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(1)"><img class="image" src="dos.jpg" alt=""/></button></td>
  51.                 <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(2)"><img class="image" src="dos.jpg" alt=""/></button></td>
  52.                 <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(3)"><img class="image" src="dos.jpg" alt=""/></button></td>
  53.               </tr>
  54.            
  55.               <tr>
  56.                 <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(4)"><img class="image" src="dos.jpg" alt=""/></button></td>
  57.                 <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(5)"><img class="image" src="dos.jpg" alt=""/></button></td>
  58.                 <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(6)"><img class="image" src="dos.jpg" alt=""/></button></td>
  59.                 <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(7)"><img class="image" src="dos.jpg" alt=""/></button></td>
  60.               </tr>
  61.              
  62.                  <tr>
  63.                 <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(8)"><img class="image" src="dos.jpg" alt=""/></button></td>
  64.                 <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(9)"><img class="image" src="dos.jpg" alt=""/></button></td>
  65.                 <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(10)"><img class="image" src="dos.jpg" alt=""/></button></td>
  66.                 <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(11)"><img class="image" src="dos.jpg" alt=""/></button></td>
  67.               </tr>
  68.                  
  69.             </table>
  70.         </div>   <!---MA BOITE MEMORY FIN-->
  71.      
  72.    <!---MA BOITE A REJOUER DEBUT-->
  73. <div>
  74.     <form name="commencerjouer" action="" method="post">
  76.  <input type="button" name="" class="jouer" value="JOUER" onclick="melange()"/>
  79. </form>
  80. </div>
  81.    <!---MA BOITE A REJOUER DEBUT-->
  82.        </div> <!---MA BOITE CENTRALE FIN--> 
  83.    
  84.        
  85.         <!---MON FOOTER DEBUT-->
  86.         <div id="footer"> <!--pied de page, j'ai aussi choisi d'y insérer mon compteur de visites-->
  87.            
  88.            
  89.             <div class="icones-sociales"> <!--icones sociales-->
  90.             <p>- Les illustrations de carte sont l'oeuvre de Amandine Corgier-Perretant :: <a href="http://www.lyon-graphiste.fr" title="l'illustre graphiste">www.lyon-graphiste.fr</a> -</p>
  91.                 <ul>
  92.                     <li><a href="http://twitter.com/#!/Graphiste_Lyon" title="Twitter" target="_blank"><img src="autres/twitter.png" alt="twitter" border="0" /></a></li>
  93.                     <li><a href="http://www.facebook.com/graphiste.freelance.lyon" title="Facebook" target="_blank"><img src="autres/facebook.png" alt="facebook" border="0" /></a></li>
  94.                     <li><a href="http://www.lyon-graphiste.fr/?feed=rss" title="RSS" target="_blank"><img src="autres/rss.png" alt="rss" border="0" /></a></li>
  95.                 </ul>
  96.             </div> <!--fin icones sociales-->
  97.            
  98.             <div class="w3c">
  99.                 <a href="http://validator.w3.org/check?uri=referer"><img src="http://www.w3.org/Icons/valid-xhtml10" alt="Valid XHTML 1.0 Transitional" height="31" width="88" /></a>
  100.                 <a href="http://jigsaw.w3.org/css-validator/check/referer"> <img style="border:0;width:88px;height:31px" src="http://jigsaw.w3.org/css-validator/images/vcss-blue" alt="CSS Valide !" /></a>
  101.             </div> <!--fin W3C-->
  102.            
  103.         </div> <!--fin pied de page-->
  104.  
  105.      </div>  <!--fin de mon conteneur GLOBAL-->


 
Voici mon script sur un fichier .js que j'ai inclus dans le head de mon fichier html :

Code :
  1. // JavaScript Document
  3. var cartes = new Array (12);
  4. var repere = new Array (12);
  5. var gravure = new Array (12);
  6. var nbrecarte = cartes.length;
  7. var chemin = "images/";
  8. var clic = 0;
  9. var essai = 0;
  10. var trouve = 0;
  11. var melanger = 0;
  13. //cette fonction est appelée dans la fonction mélange//
  14. function installation()
  15. {
  16. //On reprécise la class du tableau html //  
  17. document.getElementById('jeu').className = "tablejeu";
  18. // parcours du tableau des cartes de dos //  
  19. for(var dos=0 ; dos<nbrecarte ; dos++);
  20. //on instruit les propriétés de l'image du dos //  
  21.  {
  22.     document.images[dos].src = cartes[dos];
  23.  document.images[dos].src = "dos.jpg";
  24. //on instruit la visibilité des boutons et  images qui devront disparaitre//
  26.  document.getElementsByTagName('td')[dos].style.visibility = "visible";
  27.  }
  29. //on installe les compteurs, c'est un peu superflu car ils sont déjà déclarés //  
  30. essai = 0;
  31. trouve = 0;
  32. }
  33. //_______________________________________________________________________//
  34. //_______________________________________________________________________//
  36. function melange()
  37.  {
  38. //  //  
  39.  melanger = 1;
  41.  installation();
  43.          for (indice=0 ; indice<=nbrecarte; indice++)
  44.              {
  45.               repere[indice]= 0;
  46.              }
  47. //toutes le cases du tab repere sont égales à zero//
  49.          var face= 0;
  50.   while (face < nbrecarte )
  51.                {
  52. //toutes le cases du tab repere sont égales à zero//
  53.                numero = Math.floor (nbrecarte * Math.random());
  54.                numero++;
  55. //
  56.                if (repere[numero] == 0)
  57.                   {
  58.         gravure[face] = numero;
  59.         cartes[face] = chemin + numero + ".jpg" ;
  61.         //document.images[face].src = cartes[face] ; //
  62.                        repere[numero] = 1 ;
  63.         face++;
  64.                   }
  65.                }
  66.  }
  67. //_____________________________________________________________________//
  68. //_______________________________________________________________________//  
  69. function recuperer(numero)
  70. {
  71. if (melanger == 1)
  72.    {
  74.    document.images[numero].src = cartes[numero];
  76.    if ( clic == 0 )
  77.       {
  78.             facea = gravure[numero];
  79.         n1 = numero;
  80.       }
  82.    if ( clic == 1 )
  83.       {
  84.             faceb = gravure[numero];
  85.         n2 = numero;
  86.         clic = -1;
  87.         agiretcompter(facea,faceb,n1,n2);
  88.       }
  90.    clic++;
  92.    }
  93. else
  94.    {
  95.        alert ("Commencez la partie en cliquant sur JOUER" );
  96.    }
  97. }
  99. //_______________________________________________________________________//
  100. //_______________________________________________________________________//
  101. function changerClass(){
  102. //On recupere l'element html dans le document//  
  103. var e = document.getElementById("jeu" );
  104. //on modifie sa classe css pour changer l'image de fond du jeu//
  105.  e.className = 'nouvelletable';
  106. }
  107. //________________________________________________________//
  109. function agiretcompter(facea,faceb,n1,n2)
  110. {
  111. if (facea == faceb )
  112.    {
  113.         alert ("Attention il ne faut pas cliquer 2 fois sur la même image" );
  114.    }
  116. if ( (facea == (faceb - nbrecarte/2)) || (faceb == (facea - gravure.length/2)))
  117. {
  118.       trouve++;
  119.        essai++;
  122.         window.setTimeout('document.getElementsByTagName("td" )[n1].style.visibility = "hidden"',400);
  123.  window.setTimeout('document.getElementsByTagName("td" )[n2].style.visibility = "hidden"',400);
  125. }
  126. else
  127. {
  128.     window.setTimeout('document.images[n1].src = "dos.jpg"',300);
  129. window.setTimeout('document.images[n2].src = "dos.jpg"',300);
  131.    essai++;
  132. }
  133. if (trouve == nbrecarte/2 )
  134. {
  135.     alert('Bravo c\'est gagné en : \n ' + essai + ' coups ');
  137.      window.setTimeout('changerClass()',100);
  138.      melanger = 0;  
  139. }
  140. }


Message édité par nougatine0179 le 15-05-2012 à 12:09:11
Reply

Marsh Posté le 15-05-2012 à 11:52:13   

Reply

Marsh Posté le 15-05-2012 à 15:04:48    

Un lien de démo peut être ? C'est plus pratique pour debugger... Lire tout ton code... c'est... :o
Firebug est ton amis soit dit en passant.


---------------
-- Debian -- Le système d'exploitation universel | Le gras c'est la vie! | /(bb|[^b]{2})/
Reply

Marsh Posté le 15-05-2012 à 15:25:42    

autant pour moi, voici le lien avec les éléments du dossier.
j'ai encore tenté des rectifs mais rie n'y fait en plus j'ai une big carte de dos qui s'affiche au démarrage, super !
http://graphistelyon.free.fr/jeumemory/

Reply

Marsh Posté le 15-05-2012 à 22:21:15    

Personne pour m'aider ? :-((

Reply

Marsh Posté le 16-05-2012 à 08:54:59    

Dans ta boucle installation, tu cibles toutes les images de la page pour les mettre de dos, y compris celle de ton entête, c'est pourquoi tu as une grosse carte de dos.
 
Quel est ton niveau en JS ?
Car sur ce forum on fait de la maïeutique, mais on ne fait pas les choses à la place des autres... ^^
 
Regarde pour utiliser un bibliothèque Javacript comme Jquery ou Mootools, ça te simplifieras énormément toutes les manipulations de ton code html (src des images, ajout ou suprpession de classe, selection d'image ayant une même classe, etc...).

Reply

Marsh Posté le 16-05-2012 à 09:16:30    

Du coup comment puis-je lancer le script au démarrage sans prendre en compte l'image du haut ?
 
Je suis entrain d'apprendre javascript mais entre les enfants et le travail c'est pas évident d'avancer rapidement.
J'effectue une formation à distance qui manque de clarté

Reply

Marsh Posté le 16-05-2012 à 15:01:51    

Code :
  1. for(var dos=0 ; dos<nbrecarte ; dos++);


 
Tu pars de dos = 0, si tu veux zapper la 1ere image, et comme tu passe par document.images[dos].src pour changer les src, tu peux augementer de 1 pour zapper la 1ere image du document.
 
Mais en utilisant une bibliothèque, tu pourrais cibler plus spécifiquement

Code :
  1. $('jeu').getElements('img').each(function(IMG,index){
  2.   IMG.set('src','dos.jpg');
  3. });


 
Tu as plein de ressource sur internet, par exemple : http://www.siteduzero.com/tutoriel [...] cript.html

Reply

Sujets relatifs:

Leave a Replay

Make sure you enter the(*)required information where indicate.HTML code is not allowed