Médiaforma

All posts tagged cartes

Windows 8 est livré avec quelques applications multimédia Modern UI dignes d’intérêt :

  • L’application Vidéo permet de lire les clips vidéo enregistrés dans la bibliothèque Vidéos. Vous pouvez également acheter ou louer les films à la Une, ou encore parcourir le store Films pour accéder à un plus grand nombre de titres.
  • L’application Musique permet de lire les musiques stockées dans la bibliothèque Musique, mais aussi d’accéder au Store musique Xbox et d’avoir une idée des titres les plus téléchargés.
  • L’application Jeux permet de découvrir les jeux à la Une, mais aussi de télécharger des jeux sur votre PC ou sur votre Xbox 360.
  • 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. Cliquez sur la vignette Cartes, tapez albi 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 du bouton droit sur la carte. Vous pouvez afficher les conditions de circulation, choisir le type de vue ou encore définir un itinéraire.
  • L’application Actualités 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 ? Faites défiler l’écran pour accéder aux catégories Divertissement, Economie, Sports, Sciences et techniques.
  • L’application Voyage vous permet d’explorer plus de 2000 destinations à travers le monde. Découvrez les destinations à la Une. Consultez des informations pratiques avant de partir, réservez des vols, connaissez la monnaie locale et les conditions météo, et bien d’autres choses encore. Vous en voulez plus ? Bing voyage vous propose des panoramas à vous couper le souffle et des articles de magazines. Bref, Voyage vous propose un kit complet pour vous donner envie de voyager.
  • L’application Finance vous informe sur les marchés, sur les actualités marquantes, sur les devises, les matières premières.
  • L’application Sports 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. Si vous êtes fan de l’OM, cliquez sur l’icône + sous Equipes préférées, tapez Marseille et validez. Vous serez ainsi informé sur les prochaines rencontres et sur les joueurs. Cela n’est pas suffisant ? Cliquez du bouton droit et faites votre choix dans la barre des applications.
  • L’application Cuisine & vins vous propose des recettes, des vins et des cocktails.
  • Enfin, l’application Santé & forme est une source d’inspiration pour tous ceux et toutes celles qui veulent rester en forme et surveiller leur alimentation.

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.


Dans les versions précédentes du système, Microsoft fournissait plusieurs jeux accessibles dans le dossier Jeux du menu Démarrer. L’écran d’accueil est le remplaçant du menu Démarrer. Les jeux devraient donc logiquement se trouver sur cet écran. Plusieurs utilisateurs m’ont fait part de leur désarroi en constatant qu’il n’en était rien. Si vous vous languissez du jeu Dames de pique, Solitaire ou Démineur, sachez que leurs équivalents existent dans le Windows Store.

Tapez jeu microsoft dans l’écran d’accueil et cliquez sur Windows Store. Les jeux disponibles dans les anciennes versions de Windows sont à portée de souris :

  • Microsoft Solitaire Collection regroupe les jeux de cartes ;
  • Microsoft Minesweeper est la version Modern UI du Démineur ;
  • Microsoft Mahjong est la version Modern UI du jeu de Mahjong.

Tous les anciens jeux de Microsoft n’ont pas (encore) leur version Modern UI, mais vous pourrez trouver de nombreux autres jeux gratuits ou payants pour compléter votre collection !


Windows 8 est livré avec quelques applications multimédia Modern UI dignes d’intérêt :

  • L’application Vidéo permet de lire les clips vidéo enregistrés dans la bibliothèque Vidéos. Vous pouvez également acheter ou louer les films à la Une, ou encore parcourir le store Films pour accéder à un plus grand nombre de titres.
  • L’application Musique permet de lire les musiques stockées dans la bibliothèque Musique, mais aussi d’accéder au Store musique Xbox et d’avoir une idée des titres les plus téléchargés.
  • L’application Jeux permet de découvrir les jeux à la Une, mais aussi de télécharger des jeux sur votre PC ou sur votre Xbox 360.
  • 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 sur l’écran d’accueil et cliquez sur Cartes. La carte 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 du bouton droit sur la carte. Vous pouvez afficher les conditions de circulation, choisir le type de vue ou encore définir un itinéraire.
  • L’application Actualités 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 ? Faites défiler l’écran pour accéder aux catégories Divertissement, Economie, Sports, et High-Tech.
  • L’application Voyage vous permet d’explorer plus de 2000 destinations à travers le monde. Découvrez les destinations à la Une. Consultez des informations pratiques avant de partir, réservez des vols, connaissez la monnaie locale et les conditions météo, et bien d’autres choses encore. Vous en voulez plus ? Bing voyage vous propose des panoramas à vous couper le souffle et des articles de magazines. Bref, Voyage vous propose un kit complet pour vous donner envie de voyager.
  • L’application Finance vous informe sur les marchés, sur les actualités marquantes, sur les devises, les matières premières.
  • L’application Sports 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. Si vous êtes fan de l’OM, cliquez sur l’icône + sous Equipes préférées, tapez Marseille et validez. Vous serez ainsi informé sur les prochaines rencontres et sur les joueurs. Cela n’est pas suffisant ? Cliquez du bouton droit et faites votre choix dans la barre des applications.

Si vous avez Windows 8, vous pouvez cliquer sur cette icône pour accéder à la formation vidéo complète de Mediaforma (100 vidéos) :


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.