Médiaforma

All posts tagged jeu

Troisième étape : 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.

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.

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.


Deuxième étape : 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é.


Première étape : 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>

Dans cette formation, je vais vous montrer comment réaliser un jeu de Memory en utilisant les langages et standards HTML5, CSS3, JavaScript et jQuery.

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.