Accueil > > > JEUX MEMORY
JEUX MEMORY
Information sur la source
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
- <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>
<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>
Historique
- 31 mai 2008 13:41:07 :
- oubli
- 02 juin 2008 15:37:54 :
- Correction pour tirage > à 10 Cartes
L'expression Réguliére ne fonctionne pas
voici la correction
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 += Tirage +"|";
Compteur ++;
if(Compteur == NbrCartes) OK = false;
}
}
- 02 juin 2008 15:41:26 :
- Pour les Tirage > à 10 Carte l'expression réguliére ne fonctionne pas
Correction function Donne()
- 02 décembre 2008 19:45:46 :
-
Correction du nombre supérieur de cartes à 9
optimisation du code.
- 02 décembre 2008 19:52:04 :
- Optimisation du code.
résolution de l'affichage correct de la class Back
(inutile désormais de supprimer l'image)
ajout de la possibilitée d'afficher ou non le mode debug.
- 02 décembre 2008 21:07:57 :
- Mise à jour du code (optimisation)
ajout possibilité de mettre en mode debug ou non
- 02 décembre 2008 21:15:59 :
- mise a jour du zip
contient les même modification de code.
Sources de la même categorie
Commentaires et avis
Discussions en rapport avec ce code source dans le forum
Jeux dhtml javascript [ par Cyreb ]
Voila, je regarde depuis longtemps les sources proposé sur ce site et je m'interesse aux jeux en javascripts, pourquoi ne pas créer de veritable proje
placer une image à la place d'une fenêtre d'Alerte - Comment modifier mon code javascript svp? [ par RomantikA ]
Bonjour, veuillez m'excuser pour cette question peut être stupide et/ou imprécise, mais je désirerais savoir s'il est possible de modifier un code jav
Récupérer une valeur d' Access via un codage Javascript [ par mareuh ]
Bonjour, je suis novice en progarmmation javascript, et j'ai besoin de dévélopper une application en javascript qui récupère des données dans une base
Quelqu'un d'assez fort en javascript sait il faire ??? [ par AUZUR ]
Bonjour tout le monde, voila je débute en javascript, et je dois développer une fonction pour mon entreprise, qui doit gérer les caractères spéciaux.
Comment manipuler un XML déjà en mémoire via une routine en javascript? [ par zazalamouche ]
Voici quelques info sur mon problème:J'ai un fichier XML qui contient des données et un fichier XSL qui contient le format d'affichageLe XML référence
probleme fonction javascript et validation w3c [ par anthonydb ]
Bonjour à tous voilà je vous expose mon probléme j'ai une fonction javascript qui me permet de mettre a jour des listes liées sans avoir a cliquer sur
Problème alignement [ par overstorex ]
Bonsoir,J'espère que je suis au bonne endroit pour poster cette demande d'aide.je suis un néophyte en script,je m'en excuse .<img src="http://www.java
Perte d'accent après un form.submit en javascript. [ par guitoulefoux ]
<link rel="Fi
Centrer background en JavaScript [ par forget2212 ]
Bonsoir, J'ai un site web qui fonctionne en CSS et je veux introduire du JS pour le bas de la page (copyright) sur toutes mes pages. Mon fichier c
Javascript qui suit le défilement d'une fenêtre [ par moratonga ]
Bonjour,je suis l'animatrice d'un forum de collectionneurs qui va bientôt fêter ses 4 ans.Pour l'événement, j'aimerais intégrer un javascript qui anim
|
Derniers Blogs
[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA[MIX10] KEYNOTE DEUXIèME JOURNéE - INTERNET EXPLORER 9, HTML5, VISUAL STUDIO 2010, ODATA par cyril
Le deuxième keynote du mix fut très riche en contenu. Internet Explorer 9 Juste un après le lancement de Internet Explorer 8, Microsoft a dévoilé les nouveautés de Internet Explorer 9. Désormais, IE supportera HTML5, SVG et CSS3. L'élément ...
Cliquez pour lire la suite de l'article par cyril CERTIFICATIONS BETA .NET 4CERTIFICATIONS BETA .NET 4 par KooKiz
Les inscriptions pour les certifications beta .NET 4 ont commencé. L'inscription est offerte pour les examens suivants : - 71-511, TS: Windows Applications Development with Microsoft .NET Framework 4 - 71-515, TS: Web Applications Development with...
Cliquez pour lire la suite de l'article par KooKiz [MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2[MIX 2010] - MICROSOFT TRANSLATOR TECHNOLOGY PREVIEW V2 par redo
J'imagine que la plupart d'entre vous connaissent bien et utilisent le service de traduction de Google, mais connaissez-vous celui de Microsoft . Microsoft Translator ? Effectivement, Microsoft nous annoncé le lancement version 2 de la Technologie Preview...
Cliquez pour lire la suite de l'article par redo LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010!LANCEMENT EN PREVIEW DE CYCLONE LORS DES TECHDAYS 2010! par MPOWARE
Toutes les vidéos de ce lancement sont en ligne!
Partie I - Intro
http://www.youtube.com/watch?v=LkQzTQ8T6CA
Partie II - Démo 1
http://www.youtube.com/watch?v=drAhYQ7lqvo
Partie III - Démo 2
http://www.youtube.com/watch?v=c8KM_1Gqybc...
Cliquez pour lire la suite de l'article par MPOWARE [WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE[WP7] JE NE VEUX PAS D'UN NOUVEL IPHONE par FREMYCOMPANY
Je pense qu'ils ont besoin d'une piqure de rappel chez Microsoft : c'est bien gentil d'avoir une interface jolie, mais si c'est pour avoir un truc qui ne convainct pas dedans, c'est peine perdue.
---->
Système ouvert ----> Fermé ?
P...
Cliquez pour lire la suite de l'article par FREMYCOMPANY
Logiciels
Xilisoft Convertisseur Vidéo Ultimate (5.1.39.0305)XILISOFT CONVERTISSEUR VIDéO ULTIMATE (5.1.39.0305)Xilisoft Convertisseur Vidéo Ultimate est un outil puissant de conversion vidéo, facile à utilise... Cliquez pour télécharger Xilisoft Convertisseur Vidéo Ultimate Xilisoft DVD Ripper Ultimate (5.0.64.0304)XILISOFT DVD RIPPER ULTIMATE (5.0.64.0304)Xilisoft DVD Ripper Ultimate est un logiciel excellent pour copier et convertir DVD vers presque ... Cliquez pour télécharger Xilisoft DVD Ripper Ultimate Rigs of Rods (63.3)RIGS OF RODS (63.3)c'est un jeu de multi-simulation camions,autobus voitures, avions, bateaux, hélicoptère avec défo... Cliquez pour télécharger Rigs of Rods Konvertor (4.00)KONVERTOR (4.00)Le logiciel est un gestionnaire multimedia affichant, jouant et convertissant plus de 2000 format... Cliquez pour télécharger Konvertor
Comparez les prix

HTC Hero
Entre 550€ et 550€
|