FAQ JavaScriptFAQs

Voici quelques Scripts (JavaScript) de JEUX
[Retour Page Précédente]
Vous pouvez tester chaque Jeu en temps réel ..Le copier/coller si vous le voulez..! Si vous l'utilisez dans vos pages..merci d'ajoutez dans vos scripts le commentaire : // mBollard(c)1998 Libre d'utilisation

Le mini-Jeu '421'.
Le mini-Jeu 'Memory' .
Le mini-Jeu 'Puzzle' .

cette rubrique est en perpétuelle actualisation..!

Le mini-Jeu '421'
Testez..!

Mini-Jeu tout JavaScript!

*Tentez votre chance !* Réussissez ce '421' en 15 Jets et.. Téléchargez les Bases JavaScript !
	Encore jet(s)!

Les Variables et Fonctions du Script..

imad eest 1 tableau d'images à précharger ( les 6 images de Dés ).
x est un compteur de Clicks ..
lim est la limite max de Clicks.
jeu_de est une variable de type booléen le)
j est un tableau de 3 valeurs de Dé.
ok est un booléen qui devient true(vrai) si réussite !.
offsetd est une valeur numérique qui permet de stocker l'index réel des images de Dés .
Fonction de() est appelée par les clicks sur les Dés ..

Remarque concernant les Index d'images.
Un bug existe en JavaScript...
Lorsque des images sont posées sur une page HTML ..JavaScript en fait automatiquement un tableau .Elles recoivent un Index dans ce tableau qui vaut 0 pour la 1ère posée,1 pour la seconde..etc...( il ne faut pas compter dans ce tableau les images de Fond..!).
Mais lorsque les images de la page sont insérées dans des tableaux dessinés par HTML..comme c'est le cas ici..!) les images précédentes
sont doublées dans le tableau d'Images..Alors le calcul est faux..C'est pourquoi, ici la variable offsetd contient le nombre d'images précédant celle du 1er Dé...

Voici, ci-dessous la Partie JavaScript du Jeu..

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

Voici, ci-dessous la Partie HTML du Jeu..

Le mini-Jeu '421'
  Testez..!
<CENTER>

Mini-Jeu tout JavaScript!
<TABLE BORDER=0 CELLSPACING=0 CELLPADDING=0 WIDTH="40%" HEIGHT="100" BGCOLOR="#007070" >
<TR>
<TD ALIGN=CENTER COLSPAN="2">
Tentez votre chance ! 
 Réussissez
ce '421'
en 15 Jets et.. 
 
Placez ici la récompense ..! 
 
</TD>
</TR>
<TR>
<TD ALIGN=CENTER>
<A HREF="javascript:de(0)">
<IMG SRC="det.gif" NAME="un" BORDER=0 HEIGHT=33 WIDTH=33></A>
<A HREF="javascript:de(1)">
<IMG SRC="det.gif" NAME="deux" BORDER=0 HEIGHT=33 WIDTH=33></A>
<A HREF="javascript:de(2)">
<IMG SRC="det.gif" NAME="trois" BORDER=0 HEIGHT=33 WIDTH=33></A>
</TD>
<TD ALIGN=CENTER VALIGN=BOTTOM WIDTH="50%">
<FORM name="fd">

Encore <INPUT type ="text" name="zone_compt" size=2>
 jet(s)!
</FORM>
</TD>
</TR>
</TABLE>
</CENTER>

[ Retour au Menu ]

Le mini-Jeu 'Memory'
Testez..!

Mini-Jeu tout JavaScript

*Le Jeu 'Memory'* Il vous présente le dos de 16 cartes.. Ces 16 cartes sont mélangées aléatoirement et, en fait, elles sont constituées de 2 fois 8 cartes différentes..(8 couples) En cliquant sur une carte elle se retourne ..cliquez alors sur une autre..qui se retourne elle aussi ..Si ces 2 cartes sont identiques elles resteront affichées..En revanche, si elles sont différentes, elles resteront affichées 2 secondes puis se retourneront à nouveau. Donc, attention mémorisez leur contenu et leur place.. Le Jeu consiste à retourner toutes les cartes mais vous n'avez droit qu'à 32 Clicks..! Si vous réussissez , Vous pourrez Télécharger le cours HTML ..Rendez-vous alors en bas de page..et Bravo!!



	Il vous reste Clicks

Les Variables et Fonctions du Script..

ima sert à précharger les 8 petites images(im1-im8.gif) ttes de taille identique.
imt.gif est l'image du Dos des cartes..
tires est un tableau de valeurs numériques chargé aléatoirement en début de Jeu.
jeu est une variable qui permet de compter jusqu'à 2 ( toutes les 2 cartes cliquées..contrôle)
carte est un tableau de 2 cartes ..les 2 dernières cartes cliquées.
no_carte est un tableau de 2 cartes..les numéros de position des 2 dernières cartes.
gagne est une valeur numérique..initialisée à 0 au début et s'incrémentant lors des bons clics.Si elle atteint 8 on a gagné!
nb_coups est une variable numérique s'incrémentant jusqu'à 32 ( autorisant 32 Clicks max.).
fl_gene est une variable de type booléen mis à true(vrai) au chargement de la page..
flag_bloc est une variable de type booléen devenant true(vrai) tous les 2 clicks..
Fonction verif() est appelée pendant le charg.aléatoire du tableau tires pour éviter le charg. plus de 2 fois d'une carte.
Fonction montre()..appelée par l'évènement Load de la balise BODY(c'est l'init.)
Fonction ret_2carte() retourne les 2 dernières cartes cliquées si elles ne sont pas identiques.
Fonction dos() retourne ttes les cartes.
Fonction charge() charge le tableau tires avec 2 fois 8 n° d'images..elle appelle la fonction verif()
Fonction clic() c'est la plus riche elle teste les différents clicks sur les cartes..

Voici ci-dessous la partie JavaScript.. Pour les fonctions JavaScript comportant beaucoup d'accolades j'ai coloré ces dernières afin de faciliter la lecture du script..!

<SCRIPT language="JavaScript"><!--

var ima=new Array(8); //prech. des 8 images..

for (var i=0;i<8;i++) { ima[i]=new Image();ima[i].src='im'+(i+1)+'.gif'}

function gagne()

{ if (gagne==8)

// placer ici la récompense s'il y a lieu...

else alert("Oh Là..Vous devez gagner au Jeu de Memory..!!");

}

var tires=new Array(16);

var offset;// because bug des index images doublés sous tableaux..

var jeu=2; var carte=new Array(2);

var no_carte=new Array(2);var gagne=0;var flag_bloc=false;

var nb_coups=0;var fl_gene=true;

function montre() // pour compenser le bug des index du tableau images doublés
{offset=document.images.length-16;
for ( var i=0;i<16;i++)tires[i]=100;
charge();
}

function ret_2carte(n,m)
{ document.images[n+offset].src='imt.gif';
document.images[m+offset].src='imt.gif';flag_bloc=false;
}
function clic(n)
{
if ((jeu>0)&& (!flag_bloc) && (nb_coups<32) && (fl_gene))
 { nb_coups+=1;
 document.f.zone.value=(32-nb_coups);
 if (nb_coups<1) fl_gene=false;
 document.images[n+offset].src='im'+(tires[n]+1)+'.gif';
 jeu -=1;
 carte[jeu]=tires[n];no_carte[jeu]=n;
 if (jeu==0)
 { jeu=2; //alert(carte[0]+' '+ no_carte[0]+' ' +carte[1]+' '+no_carte[1]);
 if (carte[1] != carte[0])
 { flag_bloc=true;
 setTimeout('ret_2carte(no_carte[0],no_carte[1]);',1000);
 }
 else {
 gagne+=1;
 if (gagne==8)
 {alert("Bravo...// là vous annoncez la récompense..!");
 fl_gene=false;
 }
 }
 }
 }
}
function dos()//ttes les cartes sur le dos..
{for (var n=0;n<16;n++)
 document.images[n+offset].src='imt.gif';
}
function verif(m)
{//test pour ch. du tableau des couples..
var c=0;
for (i=0;i<16;i++)
if (tires[i]==m) c++;
if (c==2) return false; else return true;
}

function charge()//charge le tableau aléatoirem.
{ for (var i=0;i<16;i++)
 { tires[i]=100;
 var flag_ok=false;
 while (!flag_ok)
 {
 var n=Math.floor(Math.random()*8);
 if (verif(n)) {
 tires[i]=n;
 flag_ok=true;
 }
 }
 }
}
// -->
</SCRIPT>

Voici ci-dessous la partie HTML..
<BODY onLoad="montre()">
<center>
Mini-Jeu tout JavaScript
<table border=4 cellpadding=2 cellspacing=0 bgcolor="#007070" width=500>
<TR>
<td rowspan=5 width=300 align=center valign=top>
Le Jeu 'Memory' 

Enoncez dans cet espace les Règles du Jeu..etc..

</TD>
<TD width=35><a href="javascript:clic(0)">
<img src="imt.gif" width=35 height=36 border=0 name="base"></a></TD>
<td width=35><a href="javascript:clic(1)">
<img src="imt.gif" width=35 height=36 border=0></A></TD>
<td width=35><a href="javascript:clic(2)">
<img src="imt.gif" width=35 height=36 border=0></A></TD>
<td width=35><a href="javascript:clic(3)">
<img src="imt.gif" width=35 height=36 border=0></A></TD>
</TR>
<tr>
<td><a href="javascript:clic(4)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(5)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(6)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(7)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
</TR>
<tr>
<td><a href="javascript:clic(8)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(9)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(10)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(11)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
</TR>
<tr>
<td><a href="javascript:clic(12)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(13)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(14)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
<td><a href="javascript:clic(15)">
<img src="imt.gif" width=35 height=36 border=0></a></TD>
</TR>
<tr>
<td colspan=4 align=center >
<form name="f">
Il vous reste 
<input type="text" name="zone" size=2 value="32"> Clicks
</TD>
</TR>
</TABLE>
</form>

Remarque..

Vous avez peut-être remarqué qu'il était possible de recliquer sur les cartes déja retounées..
Dans un esprit Pédagogique, je vous propose d'essayer de modifier le script afin d'éviter ce petit défaut..!
Si vous n'y parvenez pas, vous pouvez toujours me demander la solution..!
[ Retour au Menu ]