Médiaforma

All posts tagged cartes

Windows 10 est livré avec quelques applications multimédia modernes dignes d’intérêt :

  • L’application Films et séries TV permet de visualiser des films et des séries TV achetées ou louées sur le Store et des vidéos personnelles, qui n’ont été ni achetées ni louées sur le Store.
  • L’application Microsoft Solitaire Collection rassemble plusieurs jeux de cartes à jouer en solitaire : Klondike, Spider, FreeCell, Pyramid et TriPeaks.
  • L’application Groove Musique permet de lire les musiques stockées dans la bibliothèque Musique. C’est la version moderne de l’application Windows Media Player.
  • L’application Xbox permet de jouer à des jeux Xbox proposés sur le Store, y compris si vous n’avez pas de Xbox One. Si vous avez une Xbox One, vous pourrez diffuser ces jeux depuis votre Xbox pour y jouer sur votre PC, communiquer votre activité, votre historique de jeu et vos succès à vos amis et obtenir le même genre d’informations en ce qui les concerne.
  • L’application Cartes vous permet de trouver très rapidement des lieux géographiques. A titre d’exemple, supposons que vous vouliez afficher la carte d’Albi, dans le Sud de la France. Tapez albi dans la zone de texte Rechercher et appuyez sur la touche Entrée. La carte correspondante est immédiatement affichée. Si nécessaire, vous pouvez effectuer un zoom avant ou un zoom arrière. Sur un écran tactile, étirez ou pincez l’écran. Sur un écran traditionnel, maintenez la touche Ctrl enfoncée et faites bouger la roulette de la souris. Cliquez sur l’icône Vues cartographiques. Vous pouvez afficher une vue aérienne de la carte et afficher les conditions de circulation. Cliquez sur l’icône Itinéraires. Choisissez la ville de départ et la ville d’arrivée. Lorsque vous appuyez sur la touche Entrée, l’itinéraire et la feuille de route apparaissent dans la fenêtre.
  • L’application Actualité vous permet de consulter les informations à la Une, et de rester informé sur les actualités en France et dans le monde. Vous en voulez plus ? Sélectionnez les catégories affichées dans la partie supérieure de la fenêtre : Economie, Insolite, Sports, Tech & Sciences, etc.
  • L’application Finance vous informe sur les marchés, sur les actualités marquantes, sur les devises, les matières premières.
  • L’application Sport passe en revue les actualités sportives en France et dans le monde, donne accès au calendrier des prochaines rencontres et permet d’obtenir des informations sur vos équipes préférées.


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;

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 :


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.