Jeux memory

Soyez le premier à donner votre avis sur cette source.

Vue 21 669 fois - Téléchargée 2 726 fois

Description

Un petit jeux de memory en javascript pour amuser vos visiteurs.
Se jeux est limité à 8 cartes mais peut-être étendu à un nombre de cartes plus élevé.

Source / Exemple :


<html>

<style>

.cartes, .Back, .Front, .Perdu{
  background-repeat: no-repeat;
  background-position: center center;
  border: 0px solid gray;
  cursor: pointer;

  /* La Largeur d'une Image */
  width: 118px;

  /* La Hauteur d'une Image */
  height: 186px;
}

.Back {
  z-index : 10;
  background-image: url(Back.jpg);
}

</style>

<SCRIPT language="JavaScript" type="text/JavaScript">

var Gagner     = 0;
var Count      = 0;
var LastCarte  = null;
var ModeDebug  = false;

// 4 valeurs * 2 = 8 Cartes, 5 valeurs * 2 = 10 Cartes etc...
var ArrayCartes = new Array("A", "B", "C", "D");
var ValueCarte  = ArrayCartes.concat(ArrayCartes);
var NbrValeur   = ValueCarte.length;
var ArrayDonne  = new Array(NbrValeur);
var Tirage      = true;
var Tentative   = 0;
var PairesOk    = 0;

// Temporisateur en secondes
var Tempor      = 1000;

// Retourne toutes les Cartes (Coté Back)
function InitCarte()
{
  objColTr = document.getElementById('TabCarte').rows;

  for(i=0; i < objColTr.length; i++)
  {
    colTd = objColTr[i].cells
    for(x=0; x < colTd.length; x++)
    {
    	colTd[x].style.backgroundImage = "";
      colTd[x].className = "Back";
    }
  }
  Count = 0;
  document.getElementById('Rejouer').disabled = true;
  Donne();
}

// Tirage Aléatoire des Cartes
function Donne()
{
  var objMSG    = document.getElementById("MSG");
  var objColTr  = document.getElementById('TabCarte').rows;
  var NbrCartes = (objColTr[0].cells.length * objColTr.length);
  var objDebug  = document.getElementById("DivDebug");

  var OK        = true;
  var Buffer    = "";
  var Compteur  = 0;
  
  // Affiche Masque les infos de debuguage
  objDebug.style.display = (ModeDebug) ? "block" : "none";

  // Le Nbr de Cartes(TD) doit etre egale au Nbr de Valeurs
  // Et doit être un Nbr Paire
  if(NbrValeur == NbrCartes)
  {
    while(OK)
    {
      var Tirage = Math.floor(Math.random() * NbrCartes);
      var reg    = new RegExp("#"+Tirage+":", "gi") ;

      if (!reg.test(Buffer))
      {
        ArrayDonne[Compteur] = ValueCarte[Tirage];
        Buffer += "#" + Tirage+ ":"; 

        // Affiche le Buffer pour Debug Infos
        objMSG.innerHTML = Buffer;
        Compteur ++;
        if(Compteur == NbrCartes) OK = false;
      }
    }
  }
}

// Temporisateur Reset
function ResetChoix(objID, objLast)
{
  objID   = document.getElementById(objID);
  objLast = document.getElementById(objLast);
  
  // Images Vide
  objID.style.backgroundImage   = "";
  objLast.style.backgroundImage = "";

  // Classe Back
  objID.className   = "Back";
  objLast.className = "Back";
  Tirage            = true;
}

// Click sur une Carte
function Jouer(objID)
{
	// La Carte ne doit pas être retournée
  if(Tirage && objID.className != "Front")
  {
    Tirage = false;

    if(LastCarte == null)
    {
      objID.className = "Front";
      objID.style.backgroundImage = "url("+ArrayDonne[objID.id]+".jpg)";
      LastCarte       = objID;
      Tirage          = true;
    }
    else
    {
      if(LastCarte.id != objID.id && objID.className != "Front")
      {
        // Retourne la Carte et Affiche sa Valeur/Image
        objID.className = "Front";
        objID.style.backgroundImage = "url("+ArrayDonne[objID.id]+".jpg)";

        // Si les deux Cartes sont DIFFÉRENTE
        if(ArrayDonne[objID.id] != ArrayDonne[LastCarte.id])
        {
          // Declenche le Temporisateur
          a = setTimeout( "ResetChoix(" + objID.id + ", "+ LastCarte.id + ")", Tempor);
          LastCarte       = null;
        }
        else
        {
          // Les Deux Cartes sont EGALE
          LastCarte       = null;
          Count ++;
          PairesOk ++;
          document.getElementById('paires').innerHTML = PairesOk;

          // Si Tout Gagner (nbr de paires)
          if(Count == (NbrValeur/2))
          {
            Gagner   ++;
            document.getElementById('NbrGagner').innerHTML = Gagner;
            document.getElementById('Rejouer').disabled = false;
          }
          Tirage = true;
        }

        Tentative ++;
        document.getElementById('Try').innerHTML = Tentative;

      }
    }
  }
}

// 1ere Donne des Cartes
window.onload = Donne;
</SCRIPT>

  <BODY>
  	
    <TABLE border=0 width=70% align=center cellspacing="2" cellpadding="2" >

      <TR>
      	<TD colspan=2>
      		<div id="DivDebug" style="display:none;" >
      	   <table width=100% align=center cellspacing="0" cellpadding="0" border=0 >
             <TR>
             	 <TD> Nbr Gagner :       </TD><TD  align=left id="NbrGagner" width=5% >&nbsp;&nbsp;</td>
               <TD> Valeurs Aléatoire: </TD><TD  align=left id="MSG">&nbsp;&nbsp;</td>
             </TR>
             <TR>
               <TD> Tentatives : </TD><TD align=left id="Try">&nbsp;&nbsp;</td>
               <TD> Paires Ok  : </TD><TD align=left id="paires">&nbsp;&nbsp;</td>
             </TR>
           </table>
          </div>
        </TD>
      </TR>
      <TR>
        <TD>
        	<label for="tempo"> Niveaux de Difficulté  </label>
        	<select id="tempo" onchange="Tempor = this[this.selectedIndex].value;">
        		<option value=1500>Facile</option>
        		<option value=1000 selected>Moyen</option>
        		<option value=500>Dur</option>
        		<option value=200>Trés Dur</option>
        	</select>
        </TD>
        <TD>
           <input id="Rejouer" type="button" value="Rejouer" onclick="InitCarte();" disabled>
        </TD>        
        </TR>
    </TABLE>
    <br>
   <TABLE border=0  align=center cellspacing="1" cellpadding="1" >

     <TBODY id=TabCarte>
      <tr>
       <td id="0" onclick="Jouer(this)" class=Back>&nbsp;</td>
       <td id="1" onclick="Jouer(this)" class=Back>&nbsp;</td>
       <td id="2" onclick="Jouer(this)" class=Back>&nbsp;</td>
       <td id="3" onclick="Jouer(this)" class=Back>&nbsp;</td>
      </tr>
      <tr>
       <td id="4" onclick="Jouer(this)" class=Back>&nbsp;</td>
       <td id="5" onclick="Jouer(this)" class=Back>&nbsp;</td>
       <td id="6" onclick="Jouer(this)" class=Back>&nbsp;</td>
       <td id="7" onclick="Jouer(this)" class=Back>&nbsp;</td>
      </tr>
    </TBODY>

   </TABLE>
   
  </BODY>
</HTML>

Codes Sources

A voir également

Ajouter un commentaire

Commentaires

Messages postés
2
Date d'inscription
mercredi 6 février 2013
Statut
Membre
Dernière intervention
4 mai 2013

J'aimerai étendre ce jeu a 2 joueurs est ce que quelqu'un pourrai eventuellement m'aider voir me modifier le code pour qu l'on puisse jouer a 2. Merci d'avance :)
Messages postés
1
Date d'inscription
mercredi 26 mai 2010
Statut
Membre
Dernière intervention
26 mai 2010

bonjour,
perso l'affichage de la première partie du traitement du code ne se fait pas...
donc pas de compteur de tour...
et il est possible d'insérer une fonction efface pour supprimer les paire une fois trouvées?
je ne vois pas trop comment faire...
merci d'avance
Messages postés
2
Date d'inscription
mercredi 29 mars 2006
Statut
Membre
Dernière intervention
24 septembre 2009

Re coucou

en fait tout à l'heure je l'ai installé sur 36 cartes, tout fonctionne super bien et tout
mais le soucis se pose au niveau de la capture d'écran présente pour présenter le code
il parle de compteur du moins de tentative.

ma question serait donc, pourquoi le code en question n'apparait pas dans la source ?

en vous remerciant
Messages postés
2
Date d'inscription
mercredi 29 mars 2006
Statut
Membre
Dernière intervention
24 septembre 2009

Bonne source, merci
Messages postés
8
Date d'inscription
dimanche 12 novembre 2006
Statut
Membre
Dernière intervention
4 décembre 2008

Un seul mot : génial !
Afficher les 17 commentaires

Vous n'êtes pas encore membre ?

inscrivez-vous, c'est gratuit et ça prend moins d'une minute !

Les membres obtiennent plus de réponses que les utilisateurs anonymes.

Le fait d'être membre vous permet d'avoir un suivi détaillé de vos demandes et codes sources.

Le fait d'être membre vous permet d'avoir des options supplémentaires.