Jeux memory
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é.
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% > </td>
<TD> Valeurs Aléatoire: </TD><TD align=left id="MSG"> </td>
</TR>
<TR>
<TD> Tentatives : </TD><TD align=left id="Try"> </td>
<TD> Paires Ok : </TD><TD align=left id="paires"> </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> </td>
<td id="1" onclick="Jouer(this)" class=Back> </td>
<td id="2" onclick="Jouer(this)" class=Back> </td>
<td id="3" onclick="Jouer(this)" class=Back> </td>
</tr>
<tr>
<td id="4" onclick="Jouer(this)" class=Back> </td>
<td id="5" onclick="Jouer(this)" class=Back> </td>
<td id="6" onclick="Jouer(this)" class=Back> </td>
<td id="7" onclick="Jouer(this)" class=Back> </td>
</tr>
</TBODY>
</TABLE>
</BODY>
</HTML>
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.