IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Jeu de memory bug


Sujet :

JavaScript

  1. #1
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    26
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 26
    Par défaut Jeu de memory bug
    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 html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
        <div>	 <!---MA BOITE MEMORY DEBUT-->
                <table id="jeu" class="tablejeu">
                    <tr>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(0)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(1)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(2)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(3)"><img class="image" src="dos.jpg" alt=""/></button></td>
                  </tr>
     
                  <tr>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(4)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(5)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(6)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(7)"><img class="image" src="dos.jpg" alt=""/></button></td>
                  </tr>
     
                     <tr>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(8)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(9)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(10)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(11)"><img class="image" src="dos.jpg" alt=""/></button></td>
                  </tr>
     
                </table>
            </div>		 <!---MA BOITE MEMORY FIN-->

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

  2. #2
    Expert éminent

    Avatar de vermine
    Profil pro
    Inscrit en
    Mars 2008
    Messages
    6 582
    Détails du profil
    Informations personnelles :
    Âge : 40
    Localisation : Belgique

    Informations forums :
    Inscription : Mars 2008
    Messages : 6 582
    Par défaut
    Bonjour,

    A première vue, je ne sais pas trop. Le fichier .js est mal inclus ? En tout cas, je n'ai pas vu les les appels des différentes fonctions. Ce qui n'aide pas.

    Faites attention avec les variables facea, faceb, n1 et n2 qui ne sont pas déclarées (et donc globales) mais qui sont utilisées dans plusieurs fonctions et elles sont parfois passées en paramètre (et donc locales).

  3. #3
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    26
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 26
    Par défaut code html plus complet
    Mince voici le code html plus complet, autant pour moi :-)
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
     <head>
            <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
            <title>JEU DE MEMORY - Amandine Corgier-Perretant</title>
            <link rel="stylesheet" type="text/css" href="projet_memory_corgier2.css" />
     
    		<script language="javascript" src="projet_memory_corgier.js" type="text/javascript"></script>
     
    		<script type="text/javascript" src="fonts/cufon-yui.js"></script>
    		<script type="text/javascript" src="fonts/lobster.font.js"></script>
    		<script type="text/javascript">Cufon.replace('h1,h2');</script>
     
    	</head>
     
     
        <body onload="installation()">
     
               <!--conteneur global de ma page-->
            <div id="global"> 
     
     
            <div id="entete"> 	    <!---MON HEADER DEBUT-->
            <img src="autres/header.png" alt="projet"/>
            <h1>Jeu de Memory<br/> 
              :: Projet 2012 Amandine Corgier - CHA173080 ::</h1>
        </div> 	 <!---MON HEADER FIN-->
     
     
     
            <div id="boitecentrale">	<!---MA BOITE CENTRALE DEBUT-->
     
     
            <div id="explications">	<!---MON EXPLICATION DEBUT-->
                <h2>Les règles du jeu</h2><hr/>
                <p>Le principe du Memory est de retrouver un ensemble de paires. Ce jeu se joue avec des cartes sur
                lesquelles se trouvent des symboles. Chaque symbole se trouve sur deux cartes distinctes. Le jeu se déroule ainsi :</p>
                    <ul>
                    <li>Les cartes sont placées faces contre la table ;</li>
                    <li>Le jeu se joue par tours successifs :</li>
                    <li>Si les cartes sont les mêmes elles sont supprimées du jeu</li>
                    <li>Si les cartes ne sont pas les mêmes, elles sont replacées au même endroit, face contre la table.</li>
                    <li>Le jeu se termine quand toutes les paires ont été trouvées ;</li>
                    <li>Le nombre de tentatives est affiché.</li>
                    </ul>
            </div>	   <!---MON EXPLICATION FIN-->
     
            <div>	 <!---MA BOITE MEMORY DEBUT-->
                <table id="jeu" class="tablejeu">
                    <tr>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(0)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(1)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(2)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible;"><button value="" class="" onmousedown="recuperer(3)"><img class="image" src="dos.jpg" alt=""/></button></td>
                  </tr>
     
                  <tr>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(4)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(5)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(6)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible"><button value="" class="" onmousedown="recuperer(7)"><img class="image" src="dos.jpg" alt=""/></button></td>
                  </tr>
     
                     <tr>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(8)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(9)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(10)"><img class="image" src="dos.jpg" alt=""/></button></td>
                    <td style="visibility: visible; "><button value="" class="" onmousedown="recuperer(11)"><img class="image" src="dos.jpg" alt=""/></button></td>
                  </tr>
     
                </table>
            </div>		 <!---MA BOITE MEMORY FIN-->
     
       <!---MA BOITE A REJOUER DEBUT-->
    <div>
        <form name="commencerjouer" action="" method="post">	
     
    		<input type="button" name="" class="jouer" value="JOUER" onclick="melange()"/>
     
     
    </form>
    </div>
       <!---MA BOITE A REJOUER DEBUT-->
           </div>	<!---MA BOITE CENTRALE FIN-->  
     
     
            <!---MON FOOTER DEBUT-->
            <div id="footer"> <!--pied de page, j'ai aussi choisi d'y insérer mon compteur de visites-->
     
     
                <div class="icones-sociales"> <!--icones sociales-->
                <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>
                    <ul>
                        <li><a href="http://twitter.com/#!/Graphiste_Lyon" title="Twitter" target="_blank"><img src="autres/twitter.png" alt="twitter" border="0" /></a></li>
                        <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>
                        <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>
                    </ul>
                </div>	<!--fin icones sociales-->
     
                <div class="w3c">
                    <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>
                    <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>
                </div>	<!--fin W3C-->
     
            </div> <!--fin pied de page-->
     
         </div>  <!--fin de mon conteneur GLOBAL-->

  4. #4
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    Bonsoir,
    outre les remarques judicieuses de vermine je noterais ceci
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    for(var dos=0 ; dos<nbrecarte ; dos++);
    il fait quoi le ; à la fin de la ligne ci dessus ?

  5. #5
    Membre averti
    Inscrit en
    Décembre 2011
    Messages
    26
    Détails du profil
    Informations forums :
    Inscription : Décembre 2011
    Messages : 26
    Par défaut
    merci smoke mais j'ai fait la rectif (belle erreur en effet) et cela ne change rien

  6. #6
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    Janvier 2011
    Messages
    17 198
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : Janvier 2011
    Messages : 17 198
    Par défaut
    je vois pas mal de maladresse dans ton approche.

    Le fait de travailler directement avec les document.images t'obliges à tenir compte des autres images de ta page, chose que tu ne fais pas d'ailleurs.

    Je te propose cette approche
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    // variables globales
    var oZoneCarte;   // la table ou sont les carte
    var oCarte;       // les cartes concernees uniquement
     
    function installation() {
      // on get les references
      oZoneCarte = document.getElementById('jeu');
      oCarte = oZoneCarte.getElementsByTagName('IMG');
      // on affiche le dos des cartes
      var i, nb = oCarte.length;
      for( i=0; i < nb; i++){
        oCarte[i].src = "dos.jpg";
    }
    ensuite dans le reste de ton code il te suffit d'utiliser comme objet référence oCarte, et surtout ne plus utiliser document.images.

    Voila pour une première approche.

Discussions similaires

  1. Random pour un jeu de memory
    Par Locki dans le forum Débuter
    Réponses: 7
    Dernier message: 27/02/2011, 21h21
  2. Comment coder un jeu de memory (trouver les paires) en javascript
    Par Vyncent dans le forum Général JavaScript
    Réponses: 7
    Dernier message: 26/10/2010, 08h46
  3. [DC] Jeu type Memory
    Par akito dans le forum Diagrammes de Classes
    Réponses: 12
    Dernier message: 07/08/2009, 18h12
  4. Mini jeu avec quelques bugs
    Par fouedou77 dans le forum C
    Réponses: 12
    Dernier message: 27/06/2009, 09h07
  5. [UC] Projet Java/UML Jeu type Memory
    Par akito dans le forum Cas d'utilisation
    Réponses: 11
    Dernier message: 17/04/2008, 13h33

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo