SlideShare une entreprise Scribd logo
1  sur  18
1
Table des matières
Introduction......................................................................................................................................... 0
Etape 1 - Création du squelette HTML5.............................................................................................. 0
Etape 2 - Tirage aléatoire des cartes................................................................................................... 0
Etape 3 - Affichage des cartes ............................................................................................................. 0
Etape 4 - Ajout de l’interactivité ......................................................................................................... 0
Etape 5 - Mise en forme de la page..................................................................................................... 0
Etape 6 - Détection des cartes appariées............................................................................................ 0
Etape 7 - Interdiction de retourner plus de deux cartes..................................................................... 0
Etape 8 - Ajout de sons pour réagir au jeu.......................................................................................... 1
Etape 9 - Détection du nombre de coups joués et du temps en fin de partie.................................... 1
2
Introduction
Dans cette formation, vous allez réaliser un jeu de Memory en utilisant les langages et standards
HTML5, CSS3, JavaScript et jQuery. Le tout en 30 minutes chrono, en partant d'une feuille blanche !
Au fil des neuf étapes nécessaires au développement du jeu, vous apprendrez de nombreuses choses.
Entre autres :
 Vous saurez comment mettre en place un squelette standard en HTML5/CSS3 ;
 Vous apprendrez à utiliser un générateur pseudo-aléatoire en JavaScript pour mélanger
des cartes ;
 Vous verrez comment manipuler le DOM pour y insérer des objets, modifier leur
comportement et les mettre à jour pendant la partie ;
 Vous verrez comment ajouter de l’interactivité au jeu en capturant les événements souris
en JavaScript ;
 Vous apprendrez à améliorer la présentation du jeu en utilisant du code CSS3 ;
 Vous saurez comment insérer des sons dans un document HTML5 et comment les jouer
en jQuery.
Vous êtes certainement impatient de commencer. Alors, entamons la première étape sans plus tarder.
3
Etape 1 - Création du squelette HTML5
Le jeu repose sur un squelette HTML5 standard.
La première ligne représente la DTD ou déclaration de type de document. Elle indique aux navigateurs
les règles d’écriture utilisées dans le langage. Ici, cet en-tête correspond au langage HTML5.
Le document HTML est délimité par les balises <html> et </html>.
L’en-tête est délimité par les balises <head> et </head>. Il va nous permettre de définir :
1) L’encodage des caractères dans le document avec la balise <meta charset>. L’encodage retenu
est le plus utilisé sur le Web : UTF-8. Il permet de faire cohabiter dans un même document des
caractères issus de plusieurs langues : le français et le japonais par exemple.
2) Le titre du document avec la balise <title>. Ce titre apparaîtra dans la barre de titre ou dans
l’onglet du navigateur.
3) Les styles CSS utilisés dans le jeu entre les balises <style> et </style>.
Le corps du document se trouve entre les balises <body> et </body>. C’est à cet endroit que seront
insérées les instructions responsables de l’affichage dans le navigateur.
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Jeu de Memory</title>
<style>
</style>
</head>
<body>
</body>
</html>
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape1.htm
4
Etape 2 - Tirage aléatoire des cartes
Le but du jeu est d’apparier douze cartes. Pour représenter ces cartes, nous allons leur affecter un
chiffre compris entre 1 et 6. La position initiale des cartes est définie dans le corps du document, via
la variable JavaScript init :
var init='123456654321';
Pour mélanger les cartes, nous allons utiliser plusieurs fonctions JavaScript :
 split() pour diviser la chaîne init en un tableau de douze éléments : un pour chaque caractère ;
 sort() pour trier les caractères isolés par la fonction split() ;
 Math.random() pour obtenir un nombre pseudo aléatoire compris entre 0 et 1. Les valeurs
retournées par cette fonction sont générées à partir de l’horloge de l’ordinateur.
 join() pour rassembler les caractères afin d’en faire une chaîne unique.
Voici la syntaxe utilisée :
var cartes = init.split('').sort(function(){return 0.5-
Math.random()}).join('');
Cette méthode n’est pas optimale, car elle est influencée par la position de départ des éléments à trier.
Cependant, dans notre jeu, elle sera bien suffisante !
Les fonctions split(), sort() et join() s’enchaînent. Ainsi, le résultat de la fonction split() sert d’entrée à
la fonction sort() et le résultat de la fonction sort() sert d’entrée à la fonction join().
S’il est facile de comprendre l’utilité des fonctions split() et join(), la fonction sort() vous semble peut-
être obscure. Voyons comment elle fonctionne.
Sans argument, cette méthode classe par ordre croissant (s’il s’agit de nombres) ou alphabétique (s’il
s’agit de texte) les éléments sur lesquels elle travaille.
Lorsqu’une fonction est passée en argument, c’est-à-dire entre les parenthèses de la fonction, les
éléments du tableau sont classés en fonction des valeurs retournées par la fonction. Supposons que
les éléments a et b doivent être comparés :
 Si la fonction retourne une valeur négative ou nulle, les éléments a et b sont laissés tels quels ;
 Si la fonction retourne une valeur positive, les éléments a et b sont inversés.
Dans notre exemple, la fonction retourne la valeur 0.5 – Math .random(). Etant donné que
Math.random() retourne des valeurs pseudo-aléatoires comprises entre 0 et 1, l’expression 0.5 –
Math.random() retournera des valeurs pseudo-aléatoires comprises entre -0.5 et 0.5. Les éléments du
tableau seront donc mélangés, ce qui est exactement l’effet recherché.
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape2.htm
5
Etape 3 - Affichage des cartes
Les six cartes utilisées dans le jeu sont des images JPG de 170 pixels sur 170. Elles sont nommées 1.jpg,
2.jpg, 3.jpg, 4.jpg, 5.jpg et 6.jpg :
Le dos des cartes est également une image JPG de 170 pixels sur 170 et a pour nom dos.jpg.
Les cartes vont apparaître retournées par défaut. Elles seront réparties sur trois lignes pour obtenir
quelque chose comme ceci.
6
Pour arriver à ce résultat, nous allons utiliser :
 deux boucles for imbriquées d’indices i et j ;
 la fonction affiche_image() pour afficher une image.
Commencez par définir les variables i, j et k dans l’en-tête du document :
<script>
var i, j, k;
Puis insérez le code suivant dans le corps du document :
for (i=1;i<4;i++) {
for (j=1;j<5;j++) {
k = (i-1)*4 + j - 1;
affiche_image('dos.jpg', k + 1, cartes.charAt(k) + '.jpg');
}
document.write('<br>');
}
La première boucle for permet d’afficher les trois lignes de cartes. Quant à la deuxième, elle est
responsable de l’affichage des quatre cartes sur chaque ligne.
7
Pendant le parcours des deux boucles, la variable k prend tour à tour les valeurs 0, 1, 2, … 11. C’est
cette variable qui va permettre à la fonction affiche_image() d’associer une figure à chaque carte.
La fonction affiche_image() admet trois arguments :
 le nom de l’image à afficher ;
 l’identifiant de l’image (entre 0 et 11) ;
 le numéro de l’image, extrait de la chaîne cartes, qui a été mélangée à l’étape précédente.
Pour extraire le caractère qui se trouve à la position k, nous appliquons la fonction
charAt(k) à la chaine cartes. La chaîne « .jpg » est concaténée au résultat de la fonction
charAt(). Nous obtenons donc des chaînes du type 1.jpg à 12.jpg.
Remarquez l’instruction document.write(‘<br>’);, à l’extérieur de la boucle la plus interne. Cette
instruction est exécutée chaque fois que la boucle interne est terminée, et donc toutes les 4 cartes.
Elle provoque l’affichage des cartes suivantes sur une autre ligne.
Voyons ce qui se cache derrière la fonction affiche_image() :
function affiche_image(src, id, name) {
var img = document.createElement("img");
img.src = src;
img.id = id;
img.name = name;
document.body.appendChild(img);
}
La première instruction crée un élément img et l’affecte à la variable img.
Les trois lignes suivantes initialisent les attributs src (le nom de l’image), id (l’identifiant de l’image) et
name (le nom de l’image) avec les trois paramètres passés à la fonction.
Enfin, la dernière instruction ajoute l’image au DOM, et donc, fait apparaître une carte retournée.
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape3.htm
8
Etape 4 - Ajout de l’interactivité
Dans cette étape, nous allons permettre à l’utilisateur de retourner les cartes en cliquant dessus.
Pour cela, nous allons ajouter la prise en compte de l’événement onclick dans la fonction
affiche_image() :
img.onclick = function() {
document.getElementById(id).src = name;
setTimeout(function() {document.getElementById(id).src = 'dos.jpg';
} , 1000);
}
Lorsqu’une image est cliquée, la fonction affectée à img.onclick est exécutée.
La première instruction affecte le contenu de l’attribut name à l’attribut src de l’image. Rappelez-vous,
l’attribut name contient une chaîne du type 1.jpg, 2.jpg, etc. qui donne le nom de la figure représentée
sur la carte. En affectant cette valeur à l’attribut source de la carte, la carte apparaît sur l’écran.
La deuxième instruction retourne la carte au bout d’une seconde. Pour cela, un timer est mis en place
avec la fonction setTimeout(). Cette fonction admet deux paramètres :
 Les instructions à exécuter ;
 Le délai en millisecondes au bout duquel ces instructions sont exécutées.
Comme vous le voyez, l’instruction exécutée au bout de 1000 millisecondes, c’est-à-dire au bout d’une
seconde, cache la carte qui a été cliquée en affichant son dos.
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape4.htm
9
Etape 5 - Mise en forme de la page
Dans cette étape, nous allons ajouter :
1) Un gradient en arrière-plan de la page ;
2) Un espace à droite de chaque carte pour obtenir un écartement régulier, horizontalement et
verticalement ;
3) Un titre au-dessus des cartes.
Le gradient est défini avec la propriété CSS3 linear-gradient. Cette propriété n’étant pas encore
finalisée, il est nécessaire d’utiliser les préfixes –ms (pour Internet Explorer), -moz (pour Firefox), -o
(pour Opera) et –webkit (pour Chrome et les autres navigateurs WebKit).
La propriété linear-gradient admet trois arguments :
 Le point de départ du gradient ;
 La couleur de départ ;
 La couleur de fin.
Pour que l’arrière-plan utilise la propriété linear-gradient, il suffit de l’affecter à la propriété
background-image de l’élément body :
body {
background-image: -ms-linear-gradient(left, #FFFFFF, #00A3EF);
background-image: -moz-linear-gradient(left, #FFFFFF, #00A3EF);
background-image: -o-linear-gradient(left, #FFFFFF, #00A3EF);
background-image: -webkit-linear-gradient(left, #FFFFFF, #00A3EF);
}
Voyons maintenant comment ajouter un espace à droite de chaque image. Pour cela, il suffit de définir
la propriété margin-right des éléments img :
img {
margin-right: 5px;
}
Enfin, pour ajouter un titre au-dessus des cartes, vous insèrerez une balise <h1> juste après la balise
<body> :
<body>
<h1>Memory - Evaluez votre mémoire</h1>
…
</body>
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape5.htm
10
Etape 6 - Détection des cartes appariées
Dans cette étape, nous allons ajouter du code pour que les cartes appariées restent visibles. Pour cela,
vous aurez besoin de plusieurs variables. Définissez-les dans l’en-tête du document :
<script>
var i, j, k; // Compteurs de boucles
var memo_carte = ''; // Mémorisation du nom de la carte précédente
var memo_position = 0; // Mémorisation de la position de la carte
précédente
var visible = new Array(0,0,0,0,0,0,0,0,0,0,0,0); // Indique si les
cartes sont visibles (1) ou retournées (0, valeur par défaut)
Lorsque le joueur clique sur une carte il est nécessaire de la comparer à la carte qui a été retournée
précédemment. Pour cela, il faut mémoriser le coup précédent. C’est la raison d’être des variables
memo_carte et memo_position qui mémorisent (respectivement) le nom de la carte précédente et sa
position dans le jeu.
Le tableau visible contient 12 valeurs qui représentent l’état retourné (0) ou visible (1) des cartes.
Nous allons maintenant agir sur la partie img.onclick du code :
img.onclick = function() {
document.getElementById(id).src = name; // On montre la carte
if (memo_carte == name) { // Deux cartes identiques retournées
visible[memo_position-1] = 1;
visible[id-1] = 1;
}
else {
memo_carte = name;
memo_position = id;
setTimeout(function() {if (visible[id-1]==0)
{document.getElementById(id).src = 'dos.jpg'; }}, 1000); // On la
cache après un délai de une seconde
}
}
Lors du premier clic sur une carte, memo_carte a la valeur qui lui a été affectée dans l’en-tête du
document, à savoir une chaîne vide. Le test if (memo_carte == memo) n’est donc pas vérifié, et la
partie else du code s’exécute. Ici, on mémorise la carte cliquée dans la variable memo_carte et sa
position dans la variable memo_position :
else {
memo_carte = name;
11
memo_position = id;
Comme vous pouvez le voir, le premier paramètre de la fonction setTimeout() a été modifié. Lorsque
les 1000 millisecondes sont écoulées, un test if s’intéresse au tableau visible, et plus particulièrement
à la valeur qui correspond à la carte cliquée. Si cette valeur est égale à zéro, la carte est retournée :
if (visible[id-1]==0) {document.getElementById(id).src = 'dos.jpg'; }
Lorsque l’utilisateur clique sur une deuxième carte, on teste si la carte cliquée est identique à celle qui
avait été cliquée au tour précédent :
if (memo_carte == name) {
Dans l’affirmative, les éléments qui correspondent aux deux cartes sont mis à 1 dans le tableau visible
afin que ces cartes restent visibles :
visible[memo_position-1] = 1;
visible[id-1] = 1;
Nous allons tester le code. Comme vous le voyez, les cartes appariées restent visibles :
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape6.htm
12
Etape 7 - Interdiction de retourner plus de deux cartes
Pour donner un peu de piment au jeu, nous allons maintenant interdire de retourner plus de deux
cartes en même temps, en ne tenant bien sûr pas compte des cartes appariées. Pour cela, nous allons
comptabiliser le nombre de cartes visibles dans la variable nombre_retourne. Ajoutez cette variable
dans l’en-tête du document :
<script>
var i, j, k; // Compteurs de boucles
var nombre_retourne = 0; // Nombre de cartes retournées
Lorsque l’utilisateur clique sur une carte, le clic n’est pris en compte que dans le cas où deux cartes ne
sont pas déjà retournées. Dans ce cas, le nombre de cartes retournées est incrémenté d’un :
img.onclick = function() {
if (nombre_retourne !=2) {
nombre_retourne++;
Lorsque deux cartes identiques sont identifiées, elles restent retournées jusqu’à la fin du jeu. Elles ne
doivent donc plus entrer en compte dans le calcul du nombre de cartes retournées. La variable
nombre_retourne est donc mise à zéro :
if (memo_carte == name) { // Deux cartes identiques retournées
nombre_retourne=0;
Enfin, le premier paramètre de la fonction setTimeout() est ajusté pour prendre en compte la gestion
de la variable nombre_retourne.
Lorsque le délai d’affichage de 1000 millisecondes est atteint, un premier test if regarde la valeur de
l’élément visible de la carte concernée. Si cet élément vaut 0, il faut retourner la carte. Cela se fait en
affectant la valeur dos.jpg à l’attribut src de la carte. Comme la carte est retournée, il faut aussi
décrémenter d’un le nombre de cartes retournées.
Enfin, lorsque le nombre de cartes retournées est égal à zéro, il faut « oublier » la dernière carte qui a
été mémorisée. Vous vous demandez peut-être pourquoi cela est nécessaire. Si c’est le cas, imaginez
cette situation :
La dernière carte rendue visible représente disons … un lapin. L’utilisateur marque alors une petite
pause et toutes les cartes qui étaient visibles et non appariées sont retournées. Supposons maintenant
que le joueur clique sur la carte qui représente un lapin. Etant donné que la carte précédente
représentait également un lapin, elle reste visible … sans pour autant être appariée. C’est un bug de
jeu facilement évitable en mettant à zéro la variable memo_carte lorsqu’aucune carte non appariée
n’est visible :
setTimeout(function() {if (visible[id-1]==0)
{document.getElementById(id).src = 'dos.jpg'; nombre_retourne--;} if
(nombre_retourne==0) memo_carte='';}, 1000);
Exécutons cette version du jeu.
Comme vous pouvez le voir, il est maintenant impossible d’afficher plus de deux cartes simultanément.
Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape7.htm
13
Etape 8 - Ajout de sons pour réagir au jeu
Pour rendre le jeu un peu plus sympathique, nous allons lui ajouter du son. Pour cela, nous ferons
appel aux balises HTML5 <audio>.
Vous pouvez télécharger des sons et effets spéciaux sur le site http://www.universal-soundbank.com/.
Internet Explorer sait lire les sons au format MP3. Quant à Chrome et Firefox, ils savent lire les sons au
format OGG. Pour assurer la compatibilité avec ces trois navigateurs, vous devrez donc fournir chaque
son aux formats MP3 et OGG. Le navigateur choisira le format qui lui convient.
Pour convertir des sons, je vous conseille d’utiliser le freeware Free MP3 WMA Converter en vous
rendant sur la page http://www.koyotesoft.com/.
Pour insérer un son dans le document, vous utiliserez le code suivant. Ici, le son a pour identifiant
« oui ». Il est fourni aux formats MP3 et OGG via deux balises <source> :
<audio preload="auto" id="oui">
<source src="oui.mp3" type="audio/mp3">
<source src="oui.ogg" type="audio/ogg">
</audio>
Le jeu va utiliser quatre sons d’identifiants oui, non, bravo et superbravo :
Le son d’identifiant oui sera joué lorsque le joueur clique sur une carte qui peut être rendue visible. Le
son d’identifiant non sera joué lorsque le joueur essaye de rendre plus de deux cartes visibles
simultanément. Le son d’identifiant bravo sera joué lorsque le joueur apparie deux cartes. Enfin, le son
d’identifiant superbravo sera joué lorsque la partie est terminée.
Les balises <audio> sont insérées dans le code HTML, juste après le titre H1 :
<body>
<h1>Memory - Evaluez votre mémoire</h1>
<audio preload="auto" id="superbravo">
<source src="superbravo.mp3" type="audio/mp3">
<source src="superbravo.ogg" type="audio/ogg">
</audio>
<audio preload="auto" id="bravo">
<source src="bravo.mp3" type="audio/mp3">
<source src="bravo.ogg" type="audio/ogg">
</audio>
<audio preload="auto" id="oui">
<source src="oui.mp3" type="audio/mp3">
14
<source src="oui.ogg" type="audio/ogg">
</audio>
<audio preload="auto" id="non">
<source src="non.mp3" type="audio/mp3">
<source src="non.ogg" type="audio/ogg">
</audio>
Pour jouer un son, le plus simple consiste à utiliser une instruction jQuery. Par exemple, pour jouer le
son d’identifiant oui, vous utiliserez cette instruction :
$('#oui')[0].play();
Avant de pouvoir utiliser ce type d’instruction, vous devez faire référence à la bibliothèque jQuery dans
l’en-tête du document en utilisant une balise <script>.
<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
Ici, la bibliothèque jQuery vient du CDN jQuery. Pour ceux qui ne le sauraient pas, CDN signifie Content
Delivery Network. Ce terme fait référence à des ordinateurs reliés à Internet qui mettent à disposition
du code (ici jQuery) aussi rapidement que possible. Il existe trois « gros » CDN pour jQuery : jQuery,
Google et Microsoft. Ici, nous avons choisi d‘utiliser le CDN jQuery, mais rien ne vous empêche de
choisir un des deux autres, ou pourquoi pas, d’héberger la bibliothèque jQuery sur votre propre site.
Pour l’instant, nous allons insérer le code qui permet de jouer les sons d’identifiants oui, non et bravo.
Nous nous intéresserons au son d’identifiant superbravo par la suite, lors de l’implémentation du code
qui détecte la fin de la partie.
Lorsque le joueur clique sur une carte, le son d’identifiant non doit être joué si deux cartes sont déjà
visibles. Dans le cas contraire, le code défini à l’étape précédente peut être exécuté :
if (nombre_retourne==2)
$('#non')[0].play();
else {
…
Lorsqu’une carte peut être rendue visible, le son d’identifiant oui doit être joué :
else {
nombre_retourne++;
document.getElementById(id).src = name; // On montre la carte
$('#oui')[0].play();
…
Enfin, lorsque deux cartes viennent d’être appariées, le son d’identifiant bravo doit être joué :
if (memo_carte == name) {
$(‘#bravo’)[0].play() ;
15
Exécutons ce code. Comme vous pouvez le constater, les trois sons sont maintenant opérationnels. Ici,
nous utilisons le navigateur Google Chrome, mais le résultat est identique dans Internet Explorer 10 et
Firefox.
Le code est accessible à cette adresse :
http://www.mediaforma.com/memory/etape8.htm
16
Etape 9 - Détection du nombre de coups joués et du temps en fin de partie
Nous arrivons déjà à la neuvième et dernière étape du jeu : la détection du nombre de coups joués et
l’affichage du temps écoulé en fin de partie.
Commencez par définir quatre nouvelles variables dans l’en-tête du document :
…
var visible = new Array(0,0,0,0,0,0,0,0,0,0,0,0);
var nombre_clics = 0; // Nombre de cartes retournées
var d = new Date(); // Pour obtenir l'heure de début de partie
var heure_depart; // Heure de début de partie
var ns; // Nombre de secondes écoulées depuis le début de la partie
Pour afficher le nombre de clics pendant la partie, insérez une balise <span> d’identifiant ncr à la fin
du code, juste avant la balise </body> :
<br><br>Nombre de cartes retournées : <span id="ncr">0</span>
</body>
Lorsque le joueur clique sur une carte, le nombre de cartes cliquées est incrémenté d’un, et le nombre
de clics est affiché dans la balise <span> d’identifiant ncr :
else {
nombre_retourne++;
nombre_clics++;
document.getElementById('ncr').innerHTML = nombre_clics;
Nous allons maintenant nous intéresser au temps de jeu. Commencez par mémoriser l’heure de début
de jeu dans la variable heure_depart en faisant appel à la fonction getTime(). Cette instruction est
insérée au début du script. Elle sera donc exécutée dès l’affichage de la page :
<script>
heure_depart = d.getTime();
Pour ceux qui voudraient en savoir plus sur la fonction getTime(), sachez qu’elle retourne le nombre
de millisecondes écoulées depuis le 1 janvier 1970 à minuit.
Nous allons maintenant nous intéresser au temps nécessaire pour terminer une partie.
Commencez par ajouter une balise <span> d’identifiant temps_ecoule à la fin du document, juste
avant la balise </body> :
<br><br>Nombre de cartes retournées : <span id="ncr">0</span>
<br><br><span id ="temps_ecoule"></span>
</body>
Pour savoir quand le jeu est terminé, nous allons mémoriser chaque appariement de cartes dans la
variable nombre_apparies :
17
if (memo_carte == name) { // Deux cartes identiques retournées
$('#bravo')[0].play();
nombre_apparies = nombre_apparies + 2;
Pour savoir si la partie est terminée, il suffit de tester la valeur de la variable nombre_apparies. Une
valeur égale à 12 indique que la partie est terminée :
if (nombre_apparies == 12) {
Dans ce cas, le son d’identifiant superbravo est émis :
$('#superbravo')[0].play();
Pour calculer le temps écoulé depuis le début de la partie, nous définissons un deuxième objet Date() :
var d2 = new Date();
La quantité d2.getTime() donne le nombre de millisecondes écoulées depuis le 1 janvier 1970 à minuit.
En soustrayant la valeur mémorisée au début de la partie dans la variable heure_depart et en divisant
le résultat par 1000, nous obtenons le nombre de secondes écoulées depuis le début de la partie :
ns = (d2.getTime() - heure_depart) / 1000;
Il suffit maintenant d’afficher cette valeur dans la balise <span> d’identifiant temps_ecoule :
document.getElementById('temps_ecoule').innerHTML = 'Partie terminée
en ' + ns + ' secondes !';
Nous allons terminer ce jeu en ajoutant un lien dans le bas de la page pour rafraîchir la page, et donc
pour recommencer une partie. Ce code doit être ajouté juste avant la balise </body> :
<br><br><a href="memory.htm">Recommencer le jeu</a>
Le jeu est entièrement opérationnel. Vous pouvez l’essayer en vous rendant sur cette page :
http://www.mediaforma.com/memory/

Contenu connexe

Tendances

Хигиена 1. и 2.клас
Хигиена 1. и 2.класХигиена 1. и 2.клас
Хигиена 1. и 2.класLuiza Antova
 
кратък читателски дневник
кратък читателски дневниккратък читателски дневник
кратък читателски дневникИрена Петкова
 
презентация за народните приказки
презентация за народните приказкипрезентация за народните приказки
презентация за народните приказкиjoannasofia7
 
Christmas-in-Bulgaria
Christmas-in-BulgariaChristmas-in-Bulgaria
Christmas-in-BulgariaRosica Mileva
 
Презентация за Левски
Презентация за ЛевскиПрезентация за Левски
Презентация за ЛевскиMira Todorova
 
Ден на християнското семейство
Ден на християнското семействоДен на християнското семейство
Ден на християнското семействоСветлана Тончева
 
прочетни книги за 3 клас
прочетни книги за 3 класпрочетни книги за 3 клас
прочетни книги за 3 класdaniela velcheva
 
енвижън
енвижъненвижън
енвижънVera
 
асен босев. мимето
асен босев. миметоасен босев. мимето
асен босев. миметоdaniela velcheva
 
22. Спорт и игри - РК, Просвета - В. П.
22. Спорт и игри - РК, Просвета - В. П.22. Спорт и игри - РК, Просвета - В. П.
22. Спорт и игри - РК, Просвета - В. П.Veska Petrova
 
Аз, природата и светът_2012
Аз, природата и светът_2012Аз, природата и светът_2012
Аз, природата и светът_2012Dani Parvanova
 
Правопис йо, ьо - работен лист
Правопис йо, ьо - работен листПравопис йо, ьо - работен лист
Правопис йо, ьо - работен листLuiza Antova
 

Tendances (20)

Хигиена 1. и 2.клас
Хигиена 1. и 2.класХигиена 1. и 2.клас
Хигиена 1. и 2.клас
 
кратък читателски дневник
кратък читателски дневниккратък читателски дневник
кратък читателски дневник
 
презентация за народните приказки
презентация за народните приказкипрезентация за народните приказки
презентация за народните приказки
 
Gjuha programuese C++
Gjuha  programuese C++Gjuha  programuese C++
Gjuha programuese C++
 
Christmas-in-Bulgaria
Christmas-in-BulgariaChristmas-in-Bulgaria
Christmas-in-Bulgaria
 
Презентация за Левски
Презентация за ЛевскиПрезентация за Левски
Презентация за Левски
 
2012 i klas-bel
2012 i klas-bel2012 i klas-bel
2012 i klas-bel
 
асен босев
асен босевасен босев
асен босев
 
азбука
азбукаазбука
азбука
 
Ден на християнското семейство
Ден на християнското семействоДен на християнското семейство
Ден на християнското семейство
 
прочетни книги за 3 клас
прочетни книги за 3 класпрочетни книги за 3 клас
прочетни книги за 3 клас
 
енвижън
енвижъненвижън
енвижън
 
какво научих по бе в 1 клас
какво научих по бе в 1 класкакво научих по бе в 1 клас
какво научих по бе в 1 клас
 
Трудните звукове и букви
Трудните звукове и буквиТрудните звукове и букви
Трудните звукове и букви
 
5 теста
5 теста5 теста
5 теста
 
асен босев. мимето
асен босев. миметоасен босев. мимето
асен босев. мимето
 
22. Спорт и игри - РК, Просвета - В. П.
22. Спорт и игри - РК, Просвета - В. П.22. Спорт и игри - РК, Просвета - В. П.
22. Спорт и игри - РК, Просвета - В. П.
 
РАБОТА С РОДИТЕЛИТЕ
РАБОТА С РОДИТЕЛИТЕ РАБОТА С РОДИТЕЛИТЕ
РАБОТА С РОДИТЕЛИТЕ
 
Аз, природата и светът_2012
Аз, природата и светът_2012Аз, природата и светът_2012
Аз, природата и светът_2012
 
Правопис йо, ьо - работен лист
Правопис йо, ьо - работен листПравопис йо, ьо - работен лист
Правопис йо, ьо - работен лист
 

Similaire à Support tutoriel : Créer votre jeu en HTML5

Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?
Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?
Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?Votre Assistante
 
Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)Julien CROUZET
 
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Normandy JUG
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Ruau Mickael
 
Visualisation graphique R avec ggplot2
Visualisation graphique R avec ggplot2Visualisation graphique R avec ggplot2
Visualisation graphique R avec ggplot2Daname KOLANI
 
cours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdfcours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdfLamissGhoul1
 
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...ATPENSC-Group
 
Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02Rahma Boufalgha
 
Chapitre4 cours de java
Chapitre4 cours de javaChapitre4 cours de java
Chapitre4 cours de javainfo1994
 
Programmation graphique avancée en java
Programmation graphique avancée en javaProgrammation graphique avancée en java
Programmation graphique avancée en javaEzéquiel Tsagué
 
livre-algorithmes.pdf
livre-algorithmes.pdflivre-algorithmes.pdf
livre-algorithmes.pdfDurelDonfack
 
Javascript : que fait ce code?
Javascript : que fait ce code?Javascript : que fait ce code?
Javascript : que fait ce code?Ruau Mickael
 
Python avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementiellePython avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementielleECAM Brussels Engineering School
 

Similaire à Support tutoriel : Créer votre jeu en HTML5 (20)

Dijkstra kshortest
Dijkstra kshortestDijkstra kshortest
Dijkstra kshortest
 
Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?
Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?
Comment transformer vos fichiers Excel en présentation PowerPoint en 1 clic ?
 
Javascript les générateurs (generators)
Javascript   les générateurs (generators)Javascript   les générateurs (generators)
Javascript les générateurs (generators)
 
Javascript mémo.pdf
Javascript  mémo.pdfJavascript  mémo.pdf
Javascript mémo.pdf
 
Automat wd info notions-de-mathematiques-appliquees-a-linformatique
Automat wd info notions-de-mathematiques-appliquees-a-linformatiqueAutomat wd info notions-de-mathematiques-appliquees-a-linformatique
Automat wd info notions-de-mathematiques-appliquees-a-linformatique
 
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
Fork / Join, Parallel Arrays, Lambdas : la programmation parallèle (trop ?) f...
 
Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?Javascript - Fonctions : que fait ce code ?
Javascript - Fonctions : que fait ce code ?
 
Tutorial GGPlot2
Tutorial GGPlot2Tutorial GGPlot2
Tutorial GGPlot2
 
Visualisation graphique R avec ggplot2
Visualisation graphique R avec ggplot2Visualisation graphique R avec ggplot2
Visualisation graphique R avec ggplot2
 
cours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdfcours d'algorithmique et programmation 3sc final .pdf
cours d'algorithmique et programmation 3sc final .pdf
 
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
Fiche de TD 1 de préparation probatoire (littéraire et scientifique) du Camer...
 
Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02Memojava 100604104941-phpapp02
Memojava 100604104941-phpapp02
 
Initiation r
Initiation rInitiation r
Initiation r
 
Manualjquery
ManualjqueryManualjquery
Manualjquery
 
Chapitre4 cours de java
Chapitre4 cours de javaChapitre4 cours de java
Chapitre4 cours de java
 
Programmation graphique avancée en java
Programmation graphique avancée en javaProgrammation graphique avancée en java
Programmation graphique avancée en java
 
livre-algorithmes.pdf
livre-algorithmes.pdflivre-algorithmes.pdf
livre-algorithmes.pdf
 
Javascript : que fait ce code?
Javascript : que fait ce code?Javascript : que fait ce code?
Javascript : que fait ce code?
 
Formation python
Formation pythonFormation python
Formation python
 
Python avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementiellePython avancé : Interface graphique et programmation évènementielle
Python avancé : Interface graphique et programmation évènementielle
 

Plus de SmartnSkilled

Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?SmartnSkilled
 
Support cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie IISupport cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie IISmartnSkilled
 
Support tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERPSupport tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERPSmartnSkilled
 
Support formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec DockerSupport formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec DockerSmartnSkilled
 
Support formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exerciceSupport formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exerciceSmartnSkilled
 
Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?SmartnSkilled
 
Support formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie ISupport formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie ISmartnSkilled
 
Support cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnelsSupport cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnelsSmartnSkilled
 
Support cours : Les phares du marketing
Support cours : Les phares du marketingSupport cours : Les phares du marketing
Support cours : Les phares du marketingSmartnSkilled
 
Support formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeurSupport formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeurSmartnSkilled
 
Support cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERPSupport cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERPSmartnSkilled
 
Tutoriel : Online English Expertise
Tutoriel : Online English ExpertiseTutoriel : Online English Expertise
Tutoriel : Online English ExpertiseSmartnSkilled
 
Formation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commercialeFormation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commercialeSmartnSkilled
 
Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)SmartnSkilled
 
Support cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASASupport cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASASmartnSkilled
 
Support Tutoriel : Online English Expertise
Support Tutoriel : Online English ExpertiseSupport Tutoriel : Online English Expertise
Support Tutoriel : Online English ExpertiseSmartnSkilled
 
Support formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiquesSupport formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiquesSmartnSkilled
 
Support Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en publicSupport Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en publicSmartnSkilled
 
Support formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soiSupport formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soiSmartnSkilled
 
Support formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketingSupport formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketingSmartnSkilled
 

Plus de SmartnSkilled (20)

Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?Formation : Comment rendre une réunion efficace ?
Formation : Comment rendre une réunion efficace ?
 
Support cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie IISupport cours : Les Data Sciences avec Python Langage - Partie II
Support cours : Les Data Sciences avec Python Langage - Partie II
 
Support tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERPSupport tutoriel : Initiation à SAP ERP
Support tutoriel : Initiation à SAP ERP
 
Support formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec DockerSupport formation : Construire et administrer vos conteneurs avec Docker
Support formation : Construire et administrer vos conteneurs avec Docker
 
Support formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exerciceSupport formation : Maîtriser la comptabilité des opérations de fin d'exercice
Support formation : Maîtriser la comptabilité des opérations de fin d'exercice
 
Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?Support cours : Comment rédiger un rapport ?
Support cours : Comment rédiger un rapport ?
 
Support formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie ISupport formation : Maîtriser les Data Sciences avec Python Language - Partie I
Support formation : Maîtriser les Data Sciences avec Python Language - Partie I
 
Support cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnelsSupport cours : Rédigez vos emails professionnels
Support cours : Rédigez vos emails professionnels
 
Support cours : Les phares du marketing
Support cours : Les phares du marketingSupport cours : Les phares du marketing
Support cours : Les phares du marketing
 
Support formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeurSupport formation : La négociation commerciale coté vendeur
Support formation : La négociation commerciale coté vendeur
 
Support cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERPSupport cours : Initiation à SAP ERP
Support cours : Initiation à SAP ERP
 
Tutoriel : Online English Expertise
Tutoriel : Online English ExpertiseTutoriel : Online English Expertise
Tutoriel : Online English Expertise
 
Formation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commercialeFormation : Mettre en place une stratégie commerciale
Formation : Mettre en place une stratégie commerciale
 
Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)Support cours : Cours d'Espagnol Débutant (A1-A2)
Support cours : Cours d'Espagnol Débutant (A1-A2)
 
Support cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASASupport cours : Vos premiers pas avec le pare feu CISCO ASA
Support cours : Vos premiers pas avec le pare feu CISCO ASA
 
Support Tutoriel : Online English Expertise
Support Tutoriel : Online English ExpertiseSupport Tutoriel : Online English Expertise
Support Tutoriel : Online English Expertise
 
Support formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiquesSupport formation en ligne : Manager et auditer les risques informatiques
Support formation en ligne : Manager et auditer les risques informatiques
 
Support Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en publicSupport Tutoriel : Art oratoire et prise de parole en public
Support Tutoriel : Art oratoire et prise de parole en public
 
Support formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soiSupport formation en ligne: L'estime de soi
Support formation en ligne: L'estime de soi
 
Support formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketingSupport formation vidéo : Les phares du marketing
Support formation vidéo : Les phares du marketing
 

Dernier

La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfbdp12
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 37
 
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxMartin M Flynn
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursStagiaireLearningmat
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 37
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 37
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film françaisTxaruka
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Gabriel Gay-Para
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24BenotGeorges3
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 37
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre françaisTxaruka
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneTxaruka
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxJCAC
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfRiDaHAziz
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfRiDaHAziz
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film françaisTxaruka
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfSylvianeBachy
 

Dernier (18)

La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdfLa Base unique départementale - Quel bilan, au bout de 5 ans .pdf
La Base unique départementale - Quel bilan, au bout de 5 ans .pdf
 
Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024Bulletin des bibliotheques Burkina Faso mars 2024
Bulletin des bibliotheques Burkina Faso mars 2024
 
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdfBibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
Bibdoc 2024 - Sobriete numerique en bibliotheque et centre de documentation.pdf
 
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptxDIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
DIGNITAS INFINITA - DIGNITÉ HUMAINE; déclaration du dicastère .pptx
 
Apprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceursApprendre avec des top et nano influenceurs
Apprendre avec des top et nano influenceurs
 
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
Bibdoc 2024 - L’Éducation aux Médias et à l’Information face à l’intelligence...
 
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdfBibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
Bibdoc 2024 - Les maillons de la chaine du livre face aux enjeux écologiques.pdf
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx   Film     françaisPas de vagues.  pptx   Film     français
Pas de vagues. pptx Film français
 
Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)Faut-il avoir peur de la technique ? (G. Gay-Para)
Faut-il avoir peur de la technique ? (G. Gay-Para)
 
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
Newsletter SPW Agriculture en province du Luxembourg du 10-04-24
 
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdfBibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
Bibdoc 2024 - Les intelligences artificielles en bibliotheque.pdf
 
Bernard Réquichot.pptx Peintre français
Bernard Réquichot.pptx   Peintre françaisBernard Réquichot.pptx   Peintre français
Bernard Réquichot.pptx Peintre français
 
Chana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienneChana Orloff.pptx Sculptrice franco-ukranienne
Chana Orloff.pptx Sculptrice franco-ukranienne
 
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptxPrésentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
Présentation - Initiatives - CECOSDA - OIF - Fact Checking.pptx
 
PIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdfPIE-A2-P4-support stagiaires sept 22-validé.pdf
PIE-A2-P4-support stagiaires sept 22-validé.pdf
 
PIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdfPIE-A2-P 5- Supports stagiaires.pptx.pdf
PIE-A2-P 5- Supports stagiaires.pptx.pdf
 
Pas de vagues. pptx Film français
Pas de vagues.  pptx      Film   françaisPas de vagues.  pptx      Film   français
Pas de vagues. pptx Film français
 
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdfVulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
Vulnérabilité numérique d’usage : un enjeu pour l’aide à la réussitepdf
 

Support tutoriel : Créer votre jeu en HTML5

  • 1.
  • 2. 1 Table des matières Introduction......................................................................................................................................... 0 Etape 1 - Création du squelette HTML5.............................................................................................. 0 Etape 2 - Tirage aléatoire des cartes................................................................................................... 0 Etape 3 - Affichage des cartes ............................................................................................................. 0 Etape 4 - Ajout de l’interactivité ......................................................................................................... 0 Etape 5 - Mise en forme de la page..................................................................................................... 0 Etape 6 - Détection des cartes appariées............................................................................................ 0 Etape 7 - Interdiction de retourner plus de deux cartes..................................................................... 0 Etape 8 - Ajout de sons pour réagir au jeu.......................................................................................... 1 Etape 9 - Détection du nombre de coups joués et du temps en fin de partie.................................... 1
  • 3. 2 Introduction Dans cette formation, vous allez réaliser un jeu de Memory en utilisant les langages et standards HTML5, CSS3, JavaScript et jQuery. Le tout en 30 minutes chrono, en partant d'une feuille blanche ! Au fil des neuf étapes nécessaires au développement du jeu, vous apprendrez de nombreuses choses. Entre autres :  Vous saurez comment mettre en place un squelette standard en HTML5/CSS3 ;  Vous apprendrez à utiliser un générateur pseudo-aléatoire en JavaScript pour mélanger des cartes ;  Vous verrez comment manipuler le DOM pour y insérer des objets, modifier leur comportement et les mettre à jour pendant la partie ;  Vous verrez comment ajouter de l’interactivité au jeu en capturant les événements souris en JavaScript ;  Vous apprendrez à améliorer la présentation du jeu en utilisant du code CSS3 ;  Vous saurez comment insérer des sons dans un document HTML5 et comment les jouer en jQuery. Vous êtes certainement impatient de commencer. Alors, entamons la première étape sans plus tarder.
  • 4. 3 Etape 1 - Création du squelette HTML5 Le jeu repose sur un squelette HTML5 standard. La première ligne représente la DTD ou déclaration de type de document. Elle indique aux navigateurs les règles d’écriture utilisées dans le langage. Ici, cet en-tête correspond au langage HTML5. Le document HTML est délimité par les balises <html> et </html>. L’en-tête est délimité par les balises <head> et </head>. Il va nous permettre de définir : 1) L’encodage des caractères dans le document avec la balise <meta charset>. L’encodage retenu est le plus utilisé sur le Web : UTF-8. Il permet de faire cohabiter dans un même document des caractères issus de plusieurs langues : le français et le japonais par exemple. 2) Le titre du document avec la balise <title>. Ce titre apparaîtra dans la barre de titre ou dans l’onglet du navigateur. 3) Les styles CSS utilisés dans le jeu entre les balises <style> et </style>. Le corps du document se trouve entre les balises <body> et </body>. C’est à cet endroit que seront insérées les instructions responsables de l’affichage dans le navigateur. <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Jeu de Memory</title> <style> </style> </head> <body> </body> </html> Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape1.htm
  • 5. 4 Etape 2 - Tirage aléatoire des cartes Le but du jeu est d’apparier douze cartes. Pour représenter ces cartes, nous allons leur affecter un chiffre compris entre 1 et 6. La position initiale des cartes est définie dans le corps du document, via la variable JavaScript init : var init='123456654321'; Pour mélanger les cartes, nous allons utiliser plusieurs fonctions JavaScript :  split() pour diviser la chaîne init en un tableau de douze éléments : un pour chaque caractère ;  sort() pour trier les caractères isolés par la fonction split() ;  Math.random() pour obtenir un nombre pseudo aléatoire compris entre 0 et 1. Les valeurs retournées par cette fonction sont générées à partir de l’horloge de l’ordinateur.  join() pour rassembler les caractères afin d’en faire une chaîne unique. Voici la syntaxe utilisée : var cartes = init.split('').sort(function(){return 0.5- Math.random()}).join(''); Cette méthode n’est pas optimale, car elle est influencée par la position de départ des éléments à trier. Cependant, dans notre jeu, elle sera bien suffisante ! Les fonctions split(), sort() et join() s’enchaînent. Ainsi, le résultat de la fonction split() sert d’entrée à la fonction sort() et le résultat de la fonction sort() sert d’entrée à la fonction join(). S’il est facile de comprendre l’utilité des fonctions split() et join(), la fonction sort() vous semble peut- être obscure. Voyons comment elle fonctionne. Sans argument, cette méthode classe par ordre croissant (s’il s’agit de nombres) ou alphabétique (s’il s’agit de texte) les éléments sur lesquels elle travaille. Lorsqu’une fonction est passée en argument, c’est-à-dire entre les parenthèses de la fonction, les éléments du tableau sont classés en fonction des valeurs retournées par la fonction. Supposons que les éléments a et b doivent être comparés :  Si la fonction retourne une valeur négative ou nulle, les éléments a et b sont laissés tels quels ;  Si la fonction retourne une valeur positive, les éléments a et b sont inversés. Dans notre exemple, la fonction retourne la valeur 0.5 – Math .random(). Etant donné que Math.random() retourne des valeurs pseudo-aléatoires comprises entre 0 et 1, l’expression 0.5 – Math.random() retournera des valeurs pseudo-aléatoires comprises entre -0.5 et 0.5. Les éléments du tableau seront donc mélangés, ce qui est exactement l’effet recherché. Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape2.htm
  • 6. 5 Etape 3 - Affichage des cartes Les six cartes utilisées dans le jeu sont des images JPG de 170 pixels sur 170. Elles sont nommées 1.jpg, 2.jpg, 3.jpg, 4.jpg, 5.jpg et 6.jpg : Le dos des cartes est également une image JPG de 170 pixels sur 170 et a pour nom dos.jpg. Les cartes vont apparaître retournées par défaut. Elles seront réparties sur trois lignes pour obtenir quelque chose comme ceci.
  • 7. 6 Pour arriver à ce résultat, nous allons utiliser :  deux boucles for imbriquées d’indices i et j ;  la fonction affiche_image() pour afficher une image. Commencez par définir les variables i, j et k dans l’en-tête du document : <script> var i, j, k; Puis insérez le code suivant dans le corps du document : for (i=1;i<4;i++) { for (j=1;j<5;j++) { k = (i-1)*4 + j - 1; affiche_image('dos.jpg', k + 1, cartes.charAt(k) + '.jpg'); } document.write('<br>'); } La première boucle for permet d’afficher les trois lignes de cartes. Quant à la deuxième, elle est responsable de l’affichage des quatre cartes sur chaque ligne.
  • 8. 7 Pendant le parcours des deux boucles, la variable k prend tour à tour les valeurs 0, 1, 2, … 11. C’est cette variable qui va permettre à la fonction affiche_image() d’associer une figure à chaque carte. La fonction affiche_image() admet trois arguments :  le nom de l’image à afficher ;  l’identifiant de l’image (entre 0 et 11) ;  le numéro de l’image, extrait de la chaîne cartes, qui a été mélangée à l’étape précédente. Pour extraire le caractère qui se trouve à la position k, nous appliquons la fonction charAt(k) à la chaine cartes. La chaîne « .jpg » est concaténée au résultat de la fonction charAt(). Nous obtenons donc des chaînes du type 1.jpg à 12.jpg. Remarquez l’instruction document.write(‘<br>’);, à l’extérieur de la boucle la plus interne. Cette instruction est exécutée chaque fois que la boucle interne est terminée, et donc toutes les 4 cartes. Elle provoque l’affichage des cartes suivantes sur une autre ligne. Voyons ce qui se cache derrière la fonction affiche_image() : function affiche_image(src, id, name) { var img = document.createElement("img"); img.src = src; img.id = id; img.name = name; document.body.appendChild(img); } La première instruction crée un élément img et l’affecte à la variable img. Les trois lignes suivantes initialisent les attributs src (le nom de l’image), id (l’identifiant de l’image) et name (le nom de l’image) avec les trois paramètres passés à la fonction. Enfin, la dernière instruction ajoute l’image au DOM, et donc, fait apparaître une carte retournée. Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape3.htm
  • 9. 8 Etape 4 - Ajout de l’interactivité Dans cette étape, nous allons permettre à l’utilisateur de retourner les cartes en cliquant dessus. Pour cela, nous allons ajouter la prise en compte de l’événement onclick dans la fonction affiche_image() : img.onclick = function() { document.getElementById(id).src = name; setTimeout(function() {document.getElementById(id).src = 'dos.jpg'; } , 1000); } Lorsqu’une image est cliquée, la fonction affectée à img.onclick est exécutée. La première instruction affecte le contenu de l’attribut name à l’attribut src de l’image. Rappelez-vous, l’attribut name contient une chaîne du type 1.jpg, 2.jpg, etc. qui donne le nom de la figure représentée sur la carte. En affectant cette valeur à l’attribut source de la carte, la carte apparaît sur l’écran. La deuxième instruction retourne la carte au bout d’une seconde. Pour cela, un timer est mis en place avec la fonction setTimeout(). Cette fonction admet deux paramètres :  Les instructions à exécuter ;  Le délai en millisecondes au bout duquel ces instructions sont exécutées. Comme vous le voyez, l’instruction exécutée au bout de 1000 millisecondes, c’est-à-dire au bout d’une seconde, cache la carte qui a été cliquée en affichant son dos. Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape4.htm
  • 10. 9 Etape 5 - Mise en forme de la page Dans cette étape, nous allons ajouter : 1) Un gradient en arrière-plan de la page ; 2) Un espace à droite de chaque carte pour obtenir un écartement régulier, horizontalement et verticalement ; 3) Un titre au-dessus des cartes. Le gradient est défini avec la propriété CSS3 linear-gradient. Cette propriété n’étant pas encore finalisée, il est nécessaire d’utiliser les préfixes –ms (pour Internet Explorer), -moz (pour Firefox), -o (pour Opera) et –webkit (pour Chrome et les autres navigateurs WebKit). La propriété linear-gradient admet trois arguments :  Le point de départ du gradient ;  La couleur de départ ;  La couleur de fin. Pour que l’arrière-plan utilise la propriété linear-gradient, il suffit de l’affecter à la propriété background-image de l’élément body : body { background-image: -ms-linear-gradient(left, #FFFFFF, #00A3EF); background-image: -moz-linear-gradient(left, #FFFFFF, #00A3EF); background-image: -o-linear-gradient(left, #FFFFFF, #00A3EF); background-image: -webkit-linear-gradient(left, #FFFFFF, #00A3EF); } Voyons maintenant comment ajouter un espace à droite de chaque image. Pour cela, il suffit de définir la propriété margin-right des éléments img : img { margin-right: 5px; } Enfin, pour ajouter un titre au-dessus des cartes, vous insèrerez une balise <h1> juste après la balise <body> : <body> <h1>Memory - Evaluez votre mémoire</h1> … </body> Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape5.htm
  • 11. 10 Etape 6 - Détection des cartes appariées Dans cette étape, nous allons ajouter du code pour que les cartes appariées restent visibles. Pour cela, vous aurez besoin de plusieurs variables. Définissez-les dans l’en-tête du document : <script> var i, j, k; // Compteurs de boucles var memo_carte = ''; // Mémorisation du nom de la carte précédente var memo_position = 0; // Mémorisation de la position de la carte précédente var visible = new Array(0,0,0,0,0,0,0,0,0,0,0,0); // Indique si les cartes sont visibles (1) ou retournées (0, valeur par défaut) Lorsque le joueur clique sur une carte il est nécessaire de la comparer à la carte qui a été retournée précédemment. Pour cela, il faut mémoriser le coup précédent. C’est la raison d’être des variables memo_carte et memo_position qui mémorisent (respectivement) le nom de la carte précédente et sa position dans le jeu. Le tableau visible contient 12 valeurs qui représentent l’état retourné (0) ou visible (1) des cartes. Nous allons maintenant agir sur la partie img.onclick du code : img.onclick = function() { document.getElementById(id).src = name; // On montre la carte if (memo_carte == name) { // Deux cartes identiques retournées visible[memo_position-1] = 1; visible[id-1] = 1; } else { memo_carte = name; memo_position = id; setTimeout(function() {if (visible[id-1]==0) {document.getElementById(id).src = 'dos.jpg'; }}, 1000); // On la cache après un délai de une seconde } } Lors du premier clic sur une carte, memo_carte a la valeur qui lui a été affectée dans l’en-tête du document, à savoir une chaîne vide. Le test if (memo_carte == memo) n’est donc pas vérifié, et la partie else du code s’exécute. Ici, on mémorise la carte cliquée dans la variable memo_carte et sa position dans la variable memo_position : else { memo_carte = name;
  • 12. 11 memo_position = id; Comme vous pouvez le voir, le premier paramètre de la fonction setTimeout() a été modifié. Lorsque les 1000 millisecondes sont écoulées, un test if s’intéresse au tableau visible, et plus particulièrement à la valeur qui correspond à la carte cliquée. Si cette valeur est égale à zéro, la carte est retournée : if (visible[id-1]==0) {document.getElementById(id).src = 'dos.jpg'; } Lorsque l’utilisateur clique sur une deuxième carte, on teste si la carte cliquée est identique à celle qui avait été cliquée au tour précédent : if (memo_carte == name) { Dans l’affirmative, les éléments qui correspondent aux deux cartes sont mis à 1 dans le tableau visible afin que ces cartes restent visibles : visible[memo_position-1] = 1; visible[id-1] = 1; Nous allons tester le code. Comme vous le voyez, les cartes appariées restent visibles : Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape6.htm
  • 13. 12 Etape 7 - Interdiction de retourner plus de deux cartes Pour donner un peu de piment au jeu, nous allons maintenant interdire de retourner plus de deux cartes en même temps, en ne tenant bien sûr pas compte des cartes appariées. Pour cela, nous allons comptabiliser le nombre de cartes visibles dans la variable nombre_retourne. Ajoutez cette variable dans l’en-tête du document : <script> var i, j, k; // Compteurs de boucles var nombre_retourne = 0; // Nombre de cartes retournées Lorsque l’utilisateur clique sur une carte, le clic n’est pris en compte que dans le cas où deux cartes ne sont pas déjà retournées. Dans ce cas, le nombre de cartes retournées est incrémenté d’un : img.onclick = function() { if (nombre_retourne !=2) { nombre_retourne++; Lorsque deux cartes identiques sont identifiées, elles restent retournées jusqu’à la fin du jeu. Elles ne doivent donc plus entrer en compte dans le calcul du nombre de cartes retournées. La variable nombre_retourne est donc mise à zéro : if (memo_carte == name) { // Deux cartes identiques retournées nombre_retourne=0; Enfin, le premier paramètre de la fonction setTimeout() est ajusté pour prendre en compte la gestion de la variable nombre_retourne. Lorsque le délai d’affichage de 1000 millisecondes est atteint, un premier test if regarde la valeur de l’élément visible de la carte concernée. Si cet élément vaut 0, il faut retourner la carte. Cela se fait en affectant la valeur dos.jpg à l’attribut src de la carte. Comme la carte est retournée, il faut aussi décrémenter d’un le nombre de cartes retournées. Enfin, lorsque le nombre de cartes retournées est égal à zéro, il faut « oublier » la dernière carte qui a été mémorisée. Vous vous demandez peut-être pourquoi cela est nécessaire. Si c’est le cas, imaginez cette situation : La dernière carte rendue visible représente disons … un lapin. L’utilisateur marque alors une petite pause et toutes les cartes qui étaient visibles et non appariées sont retournées. Supposons maintenant que le joueur clique sur la carte qui représente un lapin. Etant donné que la carte précédente représentait également un lapin, elle reste visible … sans pour autant être appariée. C’est un bug de jeu facilement évitable en mettant à zéro la variable memo_carte lorsqu’aucune carte non appariée n’est visible : setTimeout(function() {if (visible[id-1]==0) {document.getElementById(id).src = 'dos.jpg'; nombre_retourne--;} if (nombre_retourne==0) memo_carte='';}, 1000); Exécutons cette version du jeu. Comme vous pouvez le voir, il est maintenant impossible d’afficher plus de deux cartes simultanément. Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape7.htm
  • 14. 13 Etape 8 - Ajout de sons pour réagir au jeu Pour rendre le jeu un peu plus sympathique, nous allons lui ajouter du son. Pour cela, nous ferons appel aux balises HTML5 <audio>. Vous pouvez télécharger des sons et effets spéciaux sur le site http://www.universal-soundbank.com/. Internet Explorer sait lire les sons au format MP3. Quant à Chrome et Firefox, ils savent lire les sons au format OGG. Pour assurer la compatibilité avec ces trois navigateurs, vous devrez donc fournir chaque son aux formats MP3 et OGG. Le navigateur choisira le format qui lui convient. Pour convertir des sons, je vous conseille d’utiliser le freeware Free MP3 WMA Converter en vous rendant sur la page http://www.koyotesoft.com/. Pour insérer un son dans le document, vous utiliserez le code suivant. Ici, le son a pour identifiant « oui ». Il est fourni aux formats MP3 et OGG via deux balises <source> : <audio preload="auto" id="oui"> <source src="oui.mp3" type="audio/mp3"> <source src="oui.ogg" type="audio/ogg"> </audio> Le jeu va utiliser quatre sons d’identifiants oui, non, bravo et superbravo : Le son d’identifiant oui sera joué lorsque le joueur clique sur une carte qui peut être rendue visible. Le son d’identifiant non sera joué lorsque le joueur essaye de rendre plus de deux cartes visibles simultanément. Le son d’identifiant bravo sera joué lorsque le joueur apparie deux cartes. Enfin, le son d’identifiant superbravo sera joué lorsque la partie est terminée. Les balises <audio> sont insérées dans le code HTML, juste après le titre H1 : <body> <h1>Memory - Evaluez votre mémoire</h1> <audio preload="auto" id="superbravo"> <source src="superbravo.mp3" type="audio/mp3"> <source src="superbravo.ogg" type="audio/ogg"> </audio> <audio preload="auto" id="bravo"> <source src="bravo.mp3" type="audio/mp3"> <source src="bravo.ogg" type="audio/ogg"> </audio> <audio preload="auto" id="oui"> <source src="oui.mp3" type="audio/mp3">
  • 15. 14 <source src="oui.ogg" type="audio/ogg"> </audio> <audio preload="auto" id="non"> <source src="non.mp3" type="audio/mp3"> <source src="non.ogg" type="audio/ogg"> </audio> Pour jouer un son, le plus simple consiste à utiliser une instruction jQuery. Par exemple, pour jouer le son d’identifiant oui, vous utiliserez cette instruction : $('#oui')[0].play(); Avant de pouvoir utiliser ce type d’instruction, vous devez faire référence à la bibliothèque jQuery dans l’en-tête du document en utilisant une balise <script>. <script src="http://code.jquery.com/jquery-1.6.1.min.js"></script> Ici, la bibliothèque jQuery vient du CDN jQuery. Pour ceux qui ne le sauraient pas, CDN signifie Content Delivery Network. Ce terme fait référence à des ordinateurs reliés à Internet qui mettent à disposition du code (ici jQuery) aussi rapidement que possible. Il existe trois « gros » CDN pour jQuery : jQuery, Google et Microsoft. Ici, nous avons choisi d‘utiliser le CDN jQuery, mais rien ne vous empêche de choisir un des deux autres, ou pourquoi pas, d’héberger la bibliothèque jQuery sur votre propre site. Pour l’instant, nous allons insérer le code qui permet de jouer les sons d’identifiants oui, non et bravo. Nous nous intéresserons au son d’identifiant superbravo par la suite, lors de l’implémentation du code qui détecte la fin de la partie. Lorsque le joueur clique sur une carte, le son d’identifiant non doit être joué si deux cartes sont déjà visibles. Dans le cas contraire, le code défini à l’étape précédente peut être exécuté : if (nombre_retourne==2) $('#non')[0].play(); else { … Lorsqu’une carte peut être rendue visible, le son d’identifiant oui doit être joué : else { nombre_retourne++; document.getElementById(id).src = name; // On montre la carte $('#oui')[0].play(); … Enfin, lorsque deux cartes viennent d’être appariées, le son d’identifiant bravo doit être joué : if (memo_carte == name) { $(‘#bravo’)[0].play() ;
  • 16. 15 Exécutons ce code. Comme vous pouvez le constater, les trois sons sont maintenant opérationnels. Ici, nous utilisons le navigateur Google Chrome, mais le résultat est identique dans Internet Explorer 10 et Firefox. Le code est accessible à cette adresse : http://www.mediaforma.com/memory/etape8.htm
  • 17. 16 Etape 9 - Détection du nombre de coups joués et du temps en fin de partie Nous arrivons déjà à la neuvième et dernière étape du jeu : la détection du nombre de coups joués et l’affichage du temps écoulé en fin de partie. Commencez par définir quatre nouvelles variables dans l’en-tête du document : … var visible = new Array(0,0,0,0,0,0,0,0,0,0,0,0); var nombre_clics = 0; // Nombre de cartes retournées var d = new Date(); // Pour obtenir l'heure de début de partie var heure_depart; // Heure de début de partie var ns; // Nombre de secondes écoulées depuis le début de la partie Pour afficher le nombre de clics pendant la partie, insérez une balise <span> d’identifiant ncr à la fin du code, juste avant la balise </body> : <br><br>Nombre de cartes retournées : <span id="ncr">0</span> </body> Lorsque le joueur clique sur une carte, le nombre de cartes cliquées est incrémenté d’un, et le nombre de clics est affiché dans la balise <span> d’identifiant ncr : else { nombre_retourne++; nombre_clics++; document.getElementById('ncr').innerHTML = nombre_clics; Nous allons maintenant nous intéresser au temps de jeu. Commencez par mémoriser l’heure de début de jeu dans la variable heure_depart en faisant appel à la fonction getTime(). Cette instruction est insérée au début du script. Elle sera donc exécutée dès l’affichage de la page : <script> heure_depart = d.getTime(); Pour ceux qui voudraient en savoir plus sur la fonction getTime(), sachez qu’elle retourne le nombre de millisecondes écoulées depuis le 1 janvier 1970 à minuit. Nous allons maintenant nous intéresser au temps nécessaire pour terminer une partie. Commencez par ajouter une balise <span> d’identifiant temps_ecoule à la fin du document, juste avant la balise </body> : <br><br>Nombre de cartes retournées : <span id="ncr">0</span> <br><br><span id ="temps_ecoule"></span> </body> Pour savoir quand le jeu est terminé, nous allons mémoriser chaque appariement de cartes dans la variable nombre_apparies :
  • 18. 17 if (memo_carte == name) { // Deux cartes identiques retournées $('#bravo')[0].play(); nombre_apparies = nombre_apparies + 2; Pour savoir si la partie est terminée, il suffit de tester la valeur de la variable nombre_apparies. Une valeur égale à 12 indique que la partie est terminée : if (nombre_apparies == 12) { Dans ce cas, le son d’identifiant superbravo est émis : $('#superbravo')[0].play(); Pour calculer le temps écoulé depuis le début de la partie, nous définissons un deuxième objet Date() : var d2 = new Date(); La quantité d2.getTime() donne le nombre de millisecondes écoulées depuis le 1 janvier 1970 à minuit. En soustrayant la valeur mémorisée au début de la partie dans la variable heure_depart et en divisant le résultat par 1000, nous obtenons le nombre de secondes écoulées depuis le début de la partie : ns = (d2.getTime() - heure_depart) / 1000; Il suffit maintenant d’afficher cette valeur dans la balise <span> d’identifiant temps_ecoule : document.getElementById('temps_ecoule').innerHTML = 'Partie terminée en ' + ns + ' secondes !'; Nous allons terminer ce jeu en ajoutant un lien dans le bas de la page pour rafraîchir la page, et donc pour recommencer une partie. Ce code doit être ajouté juste avant la balise </body> : <br><br><a href="memory.htm">Recommencer le jeu</a> Le jeu est entièrement opérationnel. Vous pouvez l’essayer en vous rendant sur cette page : http://www.mediaforma.com/memory/