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 :
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>
