[Plan du site]
Vous êtes ici ---
> Le Site du Zéro
> Les tutoriels
> Non-Officiels
> Site Web
> Javascript
> Lecture du tutoriel
Créer ses premiers minis-jeux
Vous vous apprêtez à lire un tutoriel rédigé par un membre de ce site. Malgré tout le soin que ce membre a pu apporter au tutoriel, nous ne pouvons pas garantir que les informations contenues sur cette page sont exactes à 100%. Merci de garder cela en tête lorsque vous lirez cette page ;o)
Évidemment, si vous ne connaissez rien au JavaScript, ce tuto n'est pas fait pour vous.
Il vous faut aussi quelques courtes connaissances en xHTML. Si vous maîtrisez la première partie du tuto de M@teo21 sur le xHTML, et si vous avez quelques connaissances en JavaScript, vous pouvez continuer. Sinon
cliquez ici.
Pour ceux qui sont aptes à lire ce tuto

,nous allons ici créer des mini-jeux !
Qu'est-ce qu'un mini-jeu ?
Si vous connaissez Wario Ware ou Mario party, vous devez savoir de quoi je parle... Pour les autres, des mini-jeux sont des jeux mais minis (wow, quelle explication

), avec des scénarios totalement débiles et super délirants ! Ici nous allons réaliser 3 mini-jeux, mais ils seront quand même un petit moins marrants que Wario Ware ou Mario Party (encore une fois, pour ceux qui connaissent

). Mais pourquoi des jeux moins bien ? Bah tout simplement parce que vous imaginez bien qu'avec une page xHTML, on ne peut pas faire un scénario très élaboré...
Aller
enjoy, on va commencer !
Voilà le but de ce mini-jeu :
il vous faut cliquer 50 fois sur un bouton pour gagner !
A quoi pourrait ressembler notre code, en xHTML uniquement ?
Rien de plus simple, il nous faut :
- 1 bouton à cliquer
- 1 endroit de texte pour afficher le nombre de clics effectués.
Pour le code, je vous dis tout ça directement car ce n'est pas super compliqué...
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12 | <html>
<head>
<script>
</script>
</head>
<body>
<div align="center"><!-- on centre le tout pour que ça soit... plus beau -->
<input type="button"/><!-- on ne met pas de valeur au bouton ; comme ça, il est le plus petit possible, et donc le jeu est plus dur :p -->
<input type="text"/><!-- balise qui servira à indiquer le nombre de clics -->
</div>
</body>
</html>
|
Aucune explication nécessaire sur ce code, car ce n'est pas super compliqué. On prépare juste le script avec <script></script>.
Sur le tuto que j'ai rédigé, je n'ai pas fait de xHTML strict 1.0 !
Si vous désirez mettre le script aux normes, utilisez
<script type="text/JavaScript" language="JavaScript"></script>.
Maintenant,
passons au JavaScript !
Comment faire dans la zone de texte pour qu'il soit écrit le nombre de clics effectués sur le bouton ?
Alors : ça peut paraître compliqué, mais en réalité c'est extrêmement simple ! Il suffit de créer une variable qui vaut 0 au début, et à chaque clic sur le bouton, elle augmentera de 1 : autrement dit, on fait une incrémentation (oui, comme dans les boucles

).
On peut donc déjà écrire :
Code : JavaScript1 | var nombre_clics = 0; // la variable nombre_clics vaut 0
|
et remplacer
Code : HTML
par
Code : HTML1 | <input type="button" onclick="nombre_clics++;" /><!-- à chaque clic, la variable nombre_clics augmente de 1 -->
|
Maintenant qu'on sait incrémenter la variable
clics, il faut afficher le nombre de clics qu'on a fait ! On va donc récupérer la valeur de
nombre_clics quand on va cliquer sur le bouton, puis afficher cette valeur dans la zone de texte.
On peut utiliser document.getElementByTagName('input')[1] (1 étant le numéro des balises input dans un array, sachant qu'en JavaScript, un array commence par 0).
Mais pour que vous puissiez comprendre plus facilement et pour que le code soit plus clair, nous allons utiliser ici
document.getElementById('id') pour changer la valeur de la zone de texte. Puisque nous récupérons un élément d'une balise à partir d'un
id, nous devons d'abord
attribuer un id à la balise voulue, qui là est <input type="text" />. Vous devez donc remplacer
Code : HTML
par
Code : HTML1 | <input type="text" id="info_clicks" />
|
Je vous rappelle au passage qu'un id est unique dans une page !
Bon : pour ceux qui sont à la bourre sur le code source

, je vous mets ce qu'il est actuellement :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <html>
<head>
<script>
var nombre_clics = 0;
</script>
</head>
<body>
<div align="center">
<input type="button" onclick="nombre_clics++;" />
<input type="text" id="info_clics" />
</div>
</body>
</html>
|
A partir de ça, je vous laisse trouver comment on change la valeur de la zone de saisie par le nombre de clics à chaque clic effectué sur le bouton. La correction est ci-dessous.
Secret (cliquez pour afficher)
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13 | <html>
<head>
<script>
var nombre_clics = 0;
</script>
</head>
<body>
<div align="center">
<input type="button" onclick="nombre_clics++;document.getElementById('info_clics').value='Nombre de clics : '+nombre_clics;" />
<input type="text" id="info_clics" />
</div>
</body>
</html>
|
Nous avons maintenant fait le principal ! Il ne manque plus qu'une alerte qui nous dit qu'on a gagné. Je vous le rappelle, on avait dit 50 clics nécessaires pour gagner (si, si, je m'en souviens

). On va donc faire une fonction qui va contenir une condition.
La condition sera : "si la variable qui contient le nombre de clics vaut 50 (autrement dit : si on clique 50 fois sur le bouton), générer une alerte qui nous dit qu'on a gagné". Ce qui peut se traduire par :
Code : JavaScript1 | if(nombre_clics==50){alert('Bravo, vous avez gagné !')}
|
Mettons cette condition dans une fonction qui se nommera
verifier.
Une fois la fonction
verifier insérée, il faut appeler la fonction dans la page (bah oui, elle ne va pas tomber du ciel

). On va donc appeler la fonction quand...
Secret (cliquez pour afficher)on cliquera sur le bouton !
Une fois que vous avez réfléchi à tout ce que le code contient comme nouveauté, vous pouvez cliquer (sinon je ne m'ennuierais pas à faire un secret

).
Secret (cliquez pour afficher)
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <html>
<head>
<script>
var nombre_clics = 0;
function verifier(){
if(nombre_clics==50){alert('Bravo, vous avez gagné !')}
//Vous avez remarqué, je ne mets pas de else{} car
//ça ne sert à rien, mais je pourrais le mettre !
}
</script>
</head>
<body>
<div align="center">
<input type="button" onclick="nombre_clics++;document.getElementById('info_clics').value='Nombre de clics : '+nombre_clics;verifier();" />
<input type="text" id="info_clics" />
</div>
</body>
</html>
|
Alors ? Vos impressions ? J'espère que je vous ai bien tout expliqué

.
Enfin, en même temps, le programme n'était pas super complexe (c'était de la grosse rigolade). Allez, prêts pour la création du prochain mini-jeu ?
Nous allons maintenant nous mettre à créer un deuxième jeu. Bon c'est sûr, je le reconnais, ce n'est pas un jeu super super... n'empêche que c'est un jeu

. Voilà le scénario :
trouver le bon bouton pour gagner !
Ici, on va utiliser une boucle au lieu de faire du copier-coller. Et puis, rien que pour vous rendre la tâche plus dure, on va utiliser une boucle de type
for (oui, je suis un sadique

).
Déjà, à quoi peut ressembler notre programme ?
C'est simple, y a des boutons, encore des boutons et toujours des boutons ! Première indication :
il n'y aura que ça ! Avec tous ces boutons, ça risque d'être dur de se rappeler sur lequel on a cliqué. Eh oui, j'ai pensé à tout !
Quand on cliquera sur le mauvais bouton, on va le faire changer pour qu'il soit reconnaissable par rapport aux autres, qui eux, n'auront pas été cliqués. Vous pouvez choisir plusieurs types de changements :
- changer la couleur du bouton
- changer le
background du bouton
ou encore, le supprimer ! (Mais après, ça deviendra trop facile

.) Pour ma part, j'ai choisi de
changer la valeur du bouton au moment du clic. Bon, après toute cette "planification", passons à la pratique. On commence par la boucle pour créer les boutons

! Prenons 5 boutons de haut et 10 de large.
Je ne prends pas de boucle de type while !
Ici, on est des gros sadiques, on fait des boucles de type for.
Tadaaa, vous avez passé du temps à chercher ? Comment faire 5 de haut et 10 de large ? Avec un tableau

. Voici notre boucle :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11 | document.write("<table>")
for(var i=0;i<5;i++)//on n'est pas obligés de déclarer une variable
{ //avant une boucle, ici je la déclare dans la boucle
document.write("<tr>")
for(var j=0;j<10;j++)
{
document.write("<td><input type=\"button\" value=\"Clique !\"/></td>")
}
document.write("</tr>")
}
document.write("</table>")
|
Maintenant qu'on a nos boutons, il faut changer leur valeur si on leur clique dessus. Ce qui nous donne :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11 | document.write("<table>")
for(var i=0;i<5;i++)
{
document.write("<tr>")
for(var j=0;j<10;j++)
{
document.write("<td><input type=\"button\" value=\"Clique !\" onclick=\"this.value='! seuqilC'\"/></td>")
}
document.write("</tr>")
}
document.write("</table>")
|
Moi, j'ai décidé d'inverser la valeur du bouton cliqué, mais ça ne changera rien au programme si vous changez la valeur par autre chose.
Veillez quand même à ne pas trop changer le nombre de caractères dans la valeur du bouton cliqué par rapport à sa valeur de départ, sinon au moment du clic, tous les boutons vont changer d'alignement, et on risque de se tromper de bouton !
Ce qu'il nous manque maintenant, c'est une fonction qui va nous dire quand on aura gagné. Ici, on n'a pas besoin d'un truc extraordinaire, on peut très bien reprendre la fonction
verifier du mini-jeu précédent.
Code : JavaScript1
2
3 | function verifier(){
alert("Bravo, vous avez gagné !")
}
|
Mais au fait, on l'appelle quand cette fonction ?
Quand on aura cliqué sur le bouton qui nous fait gagner.
Bah oui, mais il est où notre bouton gagnant ?
Très bonne question ! Étant donné que nous avons fait une boucle pour réaliser nos boutons... Je ne vois qu'une seule solution ! Mettons le bouton gagnant sur la 8ème colonne de la 4ème ligne. Dans notre boucle, on va mettre un condition qui dira : "si on est dans la 8ème colonne de la 4ème ligne, écrire un bouton qui ne change pas de valeur quand on clique dessus, mais qui nous dit qu'on a gagné" (en gros un bouton qui appelle la fonction
verifier au moment du clic). Ce qui peut se traduire par :
Code : JavaScript1 | if(j==7 && i==3){document.write("<td><input type=\"button\" value=\"Clique !\" onclick=\"verifier\"/></td>")}
|
Mais ça risque d'être plus compliqué que prévu ! Je vous laisse réfléchir un peu : quand vous avez fini, la réponse est ci-dessous.
Secret (cliquez pour afficher)Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | function verifier(){
alert("Bravo, vous avez gagné !")
}
document.write("<table>")
for(var i=0;i<5;i++)
{
document.write("<tr>")
for(var j=0;j<10;j++)
{
if(j==7 && i==3){document.write("<td><input type=\"button\" value=\"Clique !\" onclick=\"verifier\"/></td>")}
//si on se trouve dans la 8ème colonne de la 4ème ligne,
//insérer le bouton gagnant
else{document.write("<td><input type=\"button\" value=\"Clique !\" onclick=\"this.value='! seuqilC'\"/></td>")}
//sinon mettre un bouton perdant
}
document.write("</tr>")
}
document.write("</table>")
|
Eh bah voilà, on a déjà fini !
Oui c'est sûr, c'est un jeu un peu...

. Mais je vous l'avais dit, et puis c'est un jeu ! Bon, c'était un petit plus dur que le jeu précédent car là, on était à fond dans le JavaScript ; m'enfin ce sont des jeux en JavaScript, donc on utilise ce langage un max, après vous serez des vrais boss

! Mais avant ça...
Il est temps de passer au niveau supérieur, le 3ème mini-jeu ! Là, ça va devenir sérieux ! (Wow la rime, j'ai même pas fait exprès

.)
Bienvenue dans la difficulté 3 ! Ici ça ne rigole plus ! Nous allons réaliser une jauge. Au passage de la souris sur une partie de cette jauge, cette partie va changer de couleur. Quand toute la jauge aura changé de couleur, vous aurez gagné ! Ca peut paraître simple, mais si on y pense bien, ce n'est pas trop comme on le croit.
Mais attends, c'est pas super ton mini-jeu, il suffit juste de passer super rapidement la souris et on gagne !
Au début j'ai pensé la même chose, mais j'ai quand même voulu réaliser ce mini-jeu. Et là, miracle, j'ai trouvé la part de fun ! Si on passe trop vite la souris sur la jauge, des parties de la jauge ne changent pas de couleur ; autrement dit, il faut bien calculer son coup

. Bon : mettons nous au travail !
Première question : comment allons-nous réaliser les parties de jauge qui vont ensuite créer la jauge elle-même ?
C'est très simple ! Il suffit de créer un tableau.
Ici, on aime le JavaScript et on aime les boucles, allez : réalisons la jauge

! Puisque j'ai déjà réalisé le script nécessaire à la création du mini-jeu précédent, je vais vous le redonner (je suis trop bon

).
Bon, c'est bien joli d'avoir un tableau, mais on ne voit rien !
Et puis de toute façon, on va bientôt devoir attribuer une couleur aux cellules du tableau !
Ne vous inquiétez pas, j'ai tout prévu (eh oui, encore une fois). Nous allons transformer tout ça grâce au
CSS. Il nous faut des bordures collées, une hauteur aux cellules pour un jeu plus facile, et une couleur de fond aux cellules. Ce qui nous donne en CSS :
Code : CSS1
2
3
4 | table{border-collapse:collapse;}
td{background-color:#CC00CC;cursor:default;height:120px;}
/* J'ai mis le curseur par défaut au passage de la souris,
sinon ça perturbe le joueur (en tout cas, ça me perturbe lol ) */
|
On a maintenant notre jauge et ses sous-parties ! Il nous faut à présent changer le
background de la cellule quand on passe la souris dessus. Pour ce faire, c'est très simple, utilisons
onmouseover sur les cellules ! Notre boucle ressemble donc à ça :
Ici j'ai choisi purple comme couleur de fond au passage de la souris : si vous voulez choisir une couleur différente, vous devrez modifier une autre partie du programme !
Bien, nous avons à présent une jauge qui réagit au passage de votre souris. Tout est fin prêt !...
Euh... t'as pas oublié d'expliquer comment faire pour vérifier quand on a rempli toute la jauge ?
Je n'ai pas oublié, mais j'ai laissé un petit blanc pour commencer à vous faire peur, car c'est là que tout devient difficile ! A l'attaaaaaaque !

Attendez, réfléchissons d'abord un peu à quoi pourrait ressembler la fonction
verifier, et quand on devra l'appeler. Pour vérifier si on a gagné, c'est simple, il suffit d'intégrer la fonction dans...
Secret (cliquez pour afficher)Le onmouseover des cellules !
Nous allons reprendre encore une fois le nom des fonctions des jeux précédents pour vérifier. Notre fonction qui servira à vérifier si l'on a gagné s'appelera donc
verifier. Allez, on touche une dernière fois à notre boucle, après on la laisse, c'est promis ! Voici comment appeler la fonction
verifier.
C'est vraiment maintenant que ça se corse !
Que peut contenir la fonction verifier ?
Réfléchissons avec méthode : pour que la fonction
verifier vérifie si l'on a gagné, il faut qu'elle sache si on a rempli la jauge.
Quel est le moyen pour que cette fonction sache si on a rempli la jauge ou pas ?
Réponse : il faut qu'elle vérifie la couleur de fond de chaque cellule ! Là c'est simple, il faut savoir si la couleur de fond de chaque cellule est égale à la couleur
purple (la couleur que prend chaque cellule au passage de la souris ). Pour ça on utilise...
Indice : c'est un truc sadique que j'aime bien vous faire faire.
Une boucle, et encore de type
for (décidement !). Voici en bref à quoi ressemble la fonction
verifier :
Code : JavaScript1
2
3
4
5 | function verifier(){
for(var i=0;i<165;i++)//Il y a 165 cellules, donc on les vérifie toutes
{
if(document.getElementsByTagName("td")[i].style.backgroundColor != "purple"){}
}
|
Ah tiens, on est bloqués ici ! Bon je vous dis comment on va faire : on va utiliser des valeurs booléennes.
Les valeurs booléennes sont soit true, soit false.
On va donc déterminer une variable au début de la fonction (ici la variable
test), puis si toutes les cellules ont le
background purple, alors
test sera égal à true. Dans le cas contraire,
test sera égal à
false, et donc, vous n'aurez pas gagné ! Réalisons le code :
Code : JavaScript1
2
3
4
5
6
7 | function verifier(){
test = true; //on détermine la variable test
for(var i=0;i<165;i++)
{
if(document.getElementsByTagName("td")[i].style.backgroundColor != "purple"){test=false;}
//si le background d'un seul td sur 165 est différent de purple, alors test=false
}
|
On y est presque : on n'a plus qu'à dire que si
test=true on a gagné. Vous connaissez le refrain :
Code : JavaScript1 | if(test){alert("Bravo, vous avez gagné !")}
|
Je vous résume le code du programme dans son intégralité :
Voilà, on vient de terminer le 3ème mini-jeu du tuto ! Celui-ci était plus difficile à réaliser, mais c'est aussi le meilleur des 3 ! Comme quoi quand on se donne de la peine, on arrive à faire des trucs bien

. J'espère vous avoir tout bien expliqué !
Une fois que vous avez créé vos jeux, et que vous les avez hébergés sur votre site internet, il faudrait peut-être un moyen de sauvegarde pour savoir où l'on était avant ! Ça permettra au joueur de ne pas refaire tous les jeux précédents avant d'arriver au jeu qu'il voulait (ça permettra de reprendre la partie là où il l'avait laissée). Mais ici, on va tout faire en Javascript (et en xHTML

).
Alors voilà la question :
comment savoir qu'un joueur est déjà passé sur la page, et comment savoir où il s'est arrêté ?
J'ai réfléchi longtemps, puis j'ai trouvé une alternative assez intéressante.
Je m'explique : une fois un mini-jeu terminé, on va faire un
document.write pour écrire sur la page. Avec ce
document.write, on va écrire un code secret, qui sera notre code de sauvegarde. Après, on va réaliser une page d'accueil avant le jeu. Sur cette page d'accueil, on aura le choix de :
- commencer les jeux normalement
- ou d'entrer un code pour accéder à l'étape où l'on était.
a. Utilisation du document.write
Je vous avais dit qu'il fallait garder les fonctions
verifier de côté, car on allait les réutiliser plus tard. Eh bien c'est ici que nous allons la réutiliser : mais pensez quand même à la garder de côté car on va encore en avoir besoin plus tard. Pour l'utilisation du
document.write, c'est très simple. On reprend la fonction
verifier, on va travailler ici avec celle du premier jeu. Je vous rappelle en quoi elle consiste pour ceux qui n'ont pas pensé à la garder

:
Code : JavaScript1
2
3 | function verifier(){
if(nombre_clics==50){alert('Bravo, vous avez gagné !')}
}
|
Là, si on gagne le jeu, une alerte nous dit qu'on a gagné. Nous, ce qu'on veut, c'est que après l'alerte, on puisse écrire sur la page. On va donc avoir :
Code : JavaScript1
2
3
4
5
6
7 | function verifier(){
if(nombre_clics==50)
{
alert('Bravo, vous avez gagné !');
document.write("");
}
}
|
Il ne nous reste plus maintenant qu'a écrire le code secret. On peut aussi mettre des boutons qui nous amènent aux jeux suivant, ou qui nous font refaire le jeu précédent.
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12
13 | function verifier(){
if(nombre_clics==50)
{
alert('Bravo, vous avez gagné !');
document.write("Votre code est : 98SH3hs3JsUè@#");
document.write("<hr/>"); //on crée un saut de ligne avec une barre (sert à séparer 2 choses)
document.write("<input type=\"button\" value=\"Jeu précédent\" onclick=\"javascript:history.back()\"/>")
//avec le history.back() on va à la page précédente
document.write("<input type=\"button\" value=\"Jeu suivant\" onclick=\"document.location='www.mon_site.com/jeu2.html'\"/>")
//<gras><couleur nom="rouge">au clic sur le bouton,` on va au jeu suivant ; enfin on va à la page</couleur></gras>
//www.mon_site.com/jeu2.html
}
}
|
Voilà, on a notre code secret !
Il nous faut à présent une page d'accueil pour qu'on puisse entrer nos codes.
b. Réalisation d'une page d'accueil
Là, on va laisser tout ce qu'on a fait, à part le code secret qu'on a défini auparavant (
98SH3hs3JsUè@#).
Au passage, j'en profite pour vous dire que le JavaScript est sensible à la casse, donc pour lui AaA n'est pas pareil que aaa.
Créons la page d'accueil, mais juste la partie xHTML. Ça nous donne ceci (on n'a pas besoin d'un truc plus complexe):
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12 | <html>
<head>
<script>
</script>
</head>
<body>
<input type="button" onclick="" value="Commencer"/>
<hr/>
<p>Vous avez un code ? <input type="text" id="code" onclick="" value="Entrez-le ici !"/>
<input type="button" value="ok" onclick=""/></p>
</body>
</html>
|
Bon là, on n'a pas un truc super joli, mais avec un peu de CSS et d'originalité, ça sera parfait. Mais vous, vous n'êtes pas là pour faire du design ! Alors comment s'y prendre déjà pour qu'une fois qu'on a cliqué sur
Commencer, ça nous fasse commencer un jeu ?
On fait comme tout à l'heure, on utilise
document.location. Le bouton
Commencer ressemble donc à :
Code : HTML1
2 | <input type="button" onclick="document.location='www.mon_site.com/jeu1.html'" value="Commencer"/>
<!-- Remplacez <lien url="www.mon_site.com/jeu1.html">www.mon_site.com/jeu1.html</lien> par l'emplacement du premier mini-jeu -->
|
Maintenant, on va créer une fonction
verifier_code qui va nous dire si notre code secret est bon, ou si c'est un faux. Il nous faut quoi dans cette fonction
verifier_code ? Il faut :
- récupérer la valeur de l'endroit où on a entré le code secret,
- voir si le code secret est vrai ou pas
- si il est faux, nous dire qu'il est faux, sinon nous amener au jeu voulu.
Pour récupérer la valeur de l'endroit où on a entré le code secret, on va réutiliser
document.getElementById (vous avez sûrement remarqué que j'ai attribué un id à une zone de saisie). Intégrons tout ça dans notre fonction
verifier_code.
Code : JavaScript1
2
3 | function verifier_code(){
var code = document.getElementById("code").value ;
}
|
Là j'ai mis la valeur du code entré dans une variable
code, pour qu'on perde moins de temps sur le programme. Mais vous avez parfaitement le droit de ne pas travailler avec des variables !
A ce stade, il nous faut vérifier si le code saisi est correct. On va donc faire une condition. "Si
code vaut
98SH3hs3JsUè@#, amener sur la page jeu2.html" ; "sinon dire que le code n'est pas bon". Notre fonction ressemble maintenant à ça :
Code : JavaScript1
2
3
4
5 | function verifier_code(){
var code = document.getElementById("code").value ;
if(code=="98SH3hs3JsUè@#"){document.location='www.mon_site.com/jeu2.html'}
else{alert('Mauvais code saisi')}
}
|
Voilà : on a fini ! Si vous voulez mettre un code secret de plus, il faut mettre un
else if . Ce qui va vous donner :
Code : JavaScript1
2
3
4
5
6 | function verifier_code(){
var code = document.getElementById("code").value ;
if(code=="98SH3hs3JsUè@#"){document.location='www.mon_site.com/jeu2.html'}
else if(code=="zjdZ0__è~*.?"){document.location='www.mon_site.com/jeu3.html'}
else{alert('Mauvais code saisi')}
}
|
Etc., etc.,... on peut aller loin comme ça

! Sauf pour ceux qui voudront y voir plus clair au bout d'un certain temps et qui utiliseront
switch.
Code : JavaScript1
2
3
4
5
6
7
8 | function verifier_code(){
var code = document.getElementById("code").value ;
switch(code){
case "98SH3hs3JsUè@#" : document.location='www.mon_site.com/jeu2.html';break;
case "zjdZ0__è~*.?" : document.location='www.mon_site.com/jeu3.html';break;
default : alert('Mauvais code saisi');
}
}
|
Allez : pour ceux qui sont encore perdus, je remets le code entier de cette page.
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18 | <html>
<head>
<script>
function verifier_code(){
var code = document.getElementById("code").value ;
if(code=="98SH3hs3JsUè@#"){document.location='www.mon_site.com/jeu2.html'}
else if(code=="zjdZ0__è~*.?"){document.location='www.mon_site.com/jeu3.html'}
else{alert('Mauvais code saisi')}
}
</script>
</head>
<body>
<input type="button" onclick="document.location='www.mon_site.com/jeu1.html'" value="Commencer"/>
<hr/>
<p>Vous avez un code ? <input type="text" id="code" onclick="this.value=''" value="Entrez le ici !"/>
<input type="button" value="ok" onclick="verifier_code()"/></p>
</body>
</html>
|
Maintenant que vous avez vos mini-jeux et votre page de "sauvegarde", il vous faut un chronomètre pour plus de fun pour vos jeux

!
Voilà la dernière partie de ce tutoriel sur les mini-jeux : réalisation d'un chronomètre pour connaître le temps écoulé. Bon : je vais vous le dire tout de suite, j'ai choppé le code source du chronomètre sur un
autre site 
.
Ici, on va travailler sur le code source du premier jeu qu'on a fait ensemble.
Je vous le remets :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16 | <html>
<head>
<script>
var nombre_clics = 0;
function verifier(){
if(nombre_clics==50){alert('Bravo, vous avez gagné !')}
}
</script>
</head>
<body>
<div align="center">
<input type="button" onclick="nombre_clicks++;document.getElementById('info_clics').value='Nombre de clics : '+nombre_clics;verifier();" />
<input type="text" id="info_clics" />
</div>
</body>
</html>
|
On va maitenant créer le chronomètre. Pour cela, on a besoin de 3 variables :
- celle qui contient les dixièmes de secondes,
- celle qui contient les secondes,
- celle qui contient les minutes.
Créons-les tout de suite :
Code : JavaScript1
2
3 | var dix = 0;//dixièmes de secondes
var sec = 0;//secondes
var min = 0;//minutes
|
Rappelez-vous, quand les dixièmes de secondes font 10, les secondes sont à 1. Quand les secondes sont à 60, les minutes sont à 1. Mettons tout ça dans une fonction
chrono :
Code : JavaScript1
2
3
4
5
6
7
8 | var dix = 0;
var sec = 0;
var min = 0;
function chrono(){
dix++ //incrémentation des dix de secondes
if (dix>9){dix=0;sec++}//si dixièmes>9 alors dixièmes=0 et sec=sec+1
if (sec>59){sec=0;min++}//si sec>59 alors sec=0 et min=min+1
}
|
Maintenant, il faut afficher le temps. L'affichage va se faire grâce à
document.getElementById. On va donc créer :
- une zone de saisie où il sera inscrit les dixièmes de secondes,
- une zone de saisie où il sera inscrit les secondes,
- une zone de saisie où il sera inscrit les minutes.
Voici le nouveau code :
Code : HTML1
2
3
4
5 | <p>
<input type="text" size="1" id="minu"> minute(s)
<input type="text" size="1" id="seco"> secondes
<input type="text" size="1" id="dixi"> dixièmes
</p>
|
J'ai mis
taille 1 aux zones de saisies, car on n'a pas besoin de plus de 2 caractères pour afficher le temps. On récupère à présent les valeurs des zones de saisies grâce à
document.getElementById :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11 | var dix = 0;
var sec = 0;
var min = 0;
function chrono(){
cen++;
if (dix>9){dix=0;sec++}
if (sec>59){sec=0;min++}
document.getElementById("dixi").value=dix; // on affiche les dixièmes
document.getElementById("seco").value=sec; // on affiche les secondes
document.getElementById("minu").value=min; // on affiche les minutes
}
|
Et pour ceux qui n'aiment pas regarder en bas de la page, on peut leur afficher le temps dans le titre de la page !
Code : JavaScript1 | document.title=min+"'"+sec+"\""+dix
|
Vous avez sûrement essayé : quand vous démarrez votre page, le chronomètre ne marche pas. C'est normal, ne vous inquiétez pas, vous n'avez pas de virus anti-chronomètre

! C'est juste que nous n'avons pas encore appelé la fonction dans la page, et que nous n'avons pas relancé la fonction. Cette fonction
chrono, on va l'appeler au chargement de la page. Pour ce faire, nous allons utiliser sur la balise <body> l'attribut
Secret (cliquez pour afficher)onload (dès que la page est chargée)
Votre balise <body> se transforme donc en :
Code : HTML1 | <body onload="chrono();">
|
Et maintenant, nous devons relancer la fonction pour que le chronomètre démarre :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10
11
12 | var dix = 0;
var sec = 0;
var min = 0;
function chrono(){
dix++;
if (dix>9){cen=0;dix++}
if (sec>59){sec=0;min++}
document.getElementById("dixi").value=dix;
document.getElementById("seco").value=sec;
document.getElementById("minu").value=min;
compte=setTimeout('chrono()'`10); //la fonction est relancée tous les 10èmes de secondes
}
|
On a relancé la fonction tous les dixièmes, et ça tombe bien, car tous les dixièmes on a la variable dix qui s'incrémente ! Votre chrono est donc ok, maintenant essayez, ça marche

.
J'ai expliqué rapidement comment ça marchait car ça n'a pas trop d'importance de comprendre comme il fonctionne : le tout, c'est de l'avoir et de savoir s'en servir

. Je vous redonne le code complet de notre page :
Code : HTML 1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34 | <html>
<head>
<script>
var nombre_clics = 0;
function verifier(){
if(nombre_clics==50){alert('Bravo, vous avez gagné !')}
}
var dix = 0;
var sec = 0;
var min = 0;
function chrono(){
cen++;
if (dix>9){dix=0;sec++}
if (sec>59){sec=0;min++}
document.getElementById("dixi").value=dix;
document.getElementById("seco").value=sec;
document.getElementById("minu").value=min;
document.title=min+"'"+sec+"\""+dix;
compte=setTimeout('chrono()'`10);
}
</script>
</head>
<body onload="chrono()">
<div align="center">
<input type="button" onclick="nombre_clics++;document.getElementById('info_clics').value='Nombre de clics : '+nombre_clics;verifier();" />
<input type="text" id="info_clics" />
</div>
<p>
<input type="text" size="1" id="minu"> minute(s)
<input type="text" size="1" id="seco"> secondes
<input type="text" size="1" id="dixi"> dixièmes
</p>
</body>
</html>
|
Bon, c'est bien joli un chronomètre, mais il faudrait peut-être savoir à quoi ça pourrait servir ! Eh bien je vais vous le dire : à savoir si on a fait un bon score ou pas.
Par exemple, si on a mis 20 secondes à faire le jeu, générer une alerte qui nous dit qu'on n'est pas très fort... C'est ici qu'on va avoir besoin pour la dernière fois de la fonction
verifier des jeux précédents. Une fois que l'on aura gagné et qu'on nous aura dit "bravo", il faudra dire le temps qu'on a mis, plus "l'appréciation", si je puis dire.
Voici la fonction
verifier :
Code : JavaScript1
2
3
4 | var nombre_clics = 0;
function verifier(){
if(nombre_clics==50){alert('Bravo, vous avez gagné !')}
}
|
Après l'alerte qui nous dit "Bravo, vous avez gagné !", nous devons mettre une condition. Cette condition va dire :
si on gagne en 5 secondes, dire "Vous avez terminé en (mettre le temps). C'est très bien !" Ou si on gagne en 6 secondes, dire "Vous avez terminé en (mettre le temps). Entraînez-vous davantage !" Sinon, dire "Vous avez terminé en (mettre le temps). Même ma grand-mère fait plus vite !" Nous mettons donc cette condition dans la fonction
verifier, ce qui nous donne :
Code : JavaScript 1
2
3
4
5
6
7
8
9
10 | var nombre_clics = 0;
function verifier(){
if(nombre_clics==50)
{
alert('Bravo, vous avez gagné !');
if(sec<6){alert("Vous avez terminé en "+min+"\'"+sec+"\""+dix+" !\nC'est très bien !")}
else if(sec<7){alert("Vous avez terminé en "+min+"\'"+sec+"\""+dix+" !\nEntraînez-vous davantage !")}
else{alert("Vous avez terminé en "+min+"\'"+sec+"\""+dix+" !\nMême ma grand-mère fait plus vite !")}
}
}
|
Voilà : nous avons terminé la réalisation du chronomètre, et de l'affichage du reste ! J'espère que vous avez tout compris

.
Maintenant que vous avez pratiquement fini la lecture du tutoriel, vous pouvez améliorer un petit peu les jeux !
Par exemple, dans le jeu où l'on doit trouver le bon bouton, maintenant que vous avez un chronomètre, vous pouvez ralentir le joueur avec une alerte qui vous dit que ce n'est pas le bon bouton qui a été cliqué, ou vous pouvez augmenter les secondes...
N'oubliez pas d'utiliser l'incrémentation pour augmenter de 1 des variables !
Pour le jeu de la jauge à changer de couleur entièrement, vous pouvez appeler la fonction
verifier au moment d'un clic sur une cellule du tableau, au lieu de l'appeler au passage de la souris.
N'oubliez pas non plus que les jeux sont moches quand je vous les donne comme ça, pensez à mettre un petit de design dans tout ça.
Et puis pour ceux qui veulent que leur site soit absolument xHTML 1.0 strict, sachez que
mes jeux, je ne les ai pas fait en xHTML 1.0 strict ! Enfin, si vous voulez un aperçu de ce que tous les jeux donnent, vous pouvez aller sur
mon site et sélectionner 'jeux'.
Et maintenant j'ai l'honneur de vous annoncer que vous venez de terminer de lire ce tutoriel ! Bravo et merci de l'avoir lu !
A partir de maintenant, à vous d'être créatifs !
Si vous avez bien compris les fonctionnements des codes, il ne vous faut plus qu'un soupson d'originalité pour créer vos mini-jeux !