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
[BAR]aide pour code javascript [ par GONaruto ]
Bonsoir à tous,je suis inscris sur un jeu de cartes (http://www.urban-rivals.com/) où on peux vendre des cartes acheter etc. Le problème c'est que j'a
Du dinamique avec du JavaScript [ par minimoysmini ]
Salut, Voila je connais pas mal de truc en informatique. Je c'est programmer en C#,HTML,JavaScript et CSS. Puis j'ai eu envie de créer un jeux sur i
Du dynamique avec du javascript [ par minimoysmini ]
Salut, Voila je connais pas mal de truc en informatique. Je c'est programmer en C#,HTML,JavaScript et CSS. Puis j'ai eu envie de créer un jeux su
La fonction "Saut" dans un jeux 2D [ par DrSlump75 ]
Bonjours à tous ! Depuis quelques semaines je me suis lancé avec quelques camarades dans un petit jeu de plateforme 2D en Javascript sur navigateur. L
one page javascript application ? [ par alxidali ]
Bonjour a tous . j'ai une petite question j’espère que quelqu'un pourra m'aider ! 1 - comment faire une très grande application JavaScript (pro
Cherche à changer un id quand l'url se modifie!!! [ par ayolos ]
Bonjour à toutes et à tous, voilà, j'utilise un CMS (expression engine 2.2.2), il génère mes page en php et authorise le javascript, le problème est
Envoyer variable Javascript vers une autre page (par URL) [ par midoxe ]
Bonjour, je travail sur une application web, et je me bloque sur ce problème : le clique sur un lien provoque l'ouverture d'une fenetre javascript q
Calcul de taux de marge en javascript [ par sbataille ]
Bonjour, Je suis commerciale et je dois régulièrement définir un prix de vente d'une formation en fonction du prix "d'achat" de l'intervenant et de l
|
Derniers Blogs
SESSION SILVERLIGHT 5 3D : SLIDES ET DEMOSSESSION SILVERLIGHT 5 3D : SLIDES ET DEMOS par Groc
Durant les techdays, j'ai eu le plaisir d'animer une session sur Silverlight 5 et la 3D avec Simon Ferquel. Comme promis, voici nos slides et mes démos (celles avec le viper BSG) ici et là. Pour mémoire, les démos utilisent toutes le viper BSG...
Cliquez pour lire la suite de l'article par Groc [TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES[TECHDAYS 2012] SESSION WEBMATRIX 2 : LE COUTEAU SUISSE GRATUIT POUR VOS DéVELOPPEMENTS WEB - SLIDES par gpommier
Suite à la session que j'ai présenté sur WebMatrix 2, vous pouvez trouver les slides ici, ainsi que les démos en packages nuget : démos1 et démos2 J'en profite pour remercier chaleureusement tous ceux qui sont venus très nombreux à cette sess...
Cliquez pour lire la suite de l'article par gpommier [SHAREPOINT] LES SESSIONS TECHDAYS 2012.[SHAREPOINT] LES SESSIONS TECHDAYS 2012. par Patrick Guimonet
Voici donc pour ceux qui n'ont pas pu venir, ou ceux qui n'ont pas pu toutes les suivre la liste des sessions SharePoint aux TechDays 2012, que je mettrais à jour dès que les liens des vidéo seront disponibles. Ou ici : http...
Cliquez pour lire la suite de l'article par Patrick Guimonet TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3TECHDAYS PARIS 2012 : SESSION PLEINIèRE JOUR 3 par ROMELARD Fabrice
Speaker: Bernard Ourghanlian Cette session est comme chaque jour transmise en live par BrainSonic, et j'ai donc suivi cette troisième pleinière par ce moyen sur mon iPad . Elle est dédiée comme chaque année à la mise en perspective de l'é...
Cliquez pour lire la suite de l'article par ROMELARD Fabrice MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE !MISHRA READER : UN LECTEUR RSS TRèS ZUNE STYLE EN OPEN SOURCE ! par Vko
Hier durant une session dédiée aux Techdays 2012, j'ai eu le plaisir d'annoncer la sortie de la Béta 2 de Mishra Reader. C'est quoi ? Pour les utilisateurs, c'est une vraie expérience de lecture de flux RSS sur Windows. Rien à voir avec les produit...
Cliquez pour lire la suite de l'article par Vko
Logiciels
Tribler (2012)TRIBLER (2012)Tribler est un client pair à pair (P2P/Peer-to-Peer) open source avec la capacité de regarder des... Cliquez pour télécharger Tribler OneSwarm (2012)ONESWARM (2012)Le peer-to-peer qui protège votre vie privée, c'est OneSwarm.
Ce logiciel de peer-to-peer crypté... Cliquez pour télécharger OneSwarm PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO (V8.4)PONAMEDIA TV DEVIENS HELLLOOO FLASH
LA TV SUR VOTRE ORDINATEUR.
Toute une plateforme Multi... Cliquez pour télécharger PONAMEDIA PREMIUM - HELLLOOO FLASH DEMO Academy System (17.2.1.0)ACADEMY SYSTEM (17.2.1.0)Logiciel de gestion des établissements.
- élèves/étudiants (inscription, dossier, absence...)
-... Cliquez pour télécharger Academy System Easy-Planning (1.0.0.1)EASY-PLANNING (1.0.0.1)Basé sur les mêmes principes que MyPlanning, Easy-Planning permet de créer des plannings sous la ... Cliquez pour télécharger Easy-Planning
|