Fruit for Fun | Développement de jeux HTML, CSS, JavaScript

Introduction

Dans ce projet, vous allez apprendre à créer un simple jeu "Fruit for Fun" à l'aide de HTML, CSS et JavaScript. Le jeu consiste à trouver des paires d'images de fruits en cliquant sur les carrés du plateau de jeu.

👀 Aperçu

Aperçu du jeu de correspondance de fruits

🎯 Tâches

Dans ce projet, vous allez apprendre :

Comment configurer les fichiers et les dossiers du projet
Comment implémenter la fonctionnalité du bouton Démarrer pour afficher et cacher les images de fruits
Comment implémenter la fonctionnalité de clic sur les carrés pour afficher les images de fruits
Comment implémenter la fonctionnalité pour comparer les deux images cliquées et mettre à jour le score en conséquence
Comment mettre à jour l'affichage du score en temps réel

🏆 Réalisations

Après avoir terminé ce projet, vous serez capable de :

Structurer et organiser un projet de développement web
Utiliser JavaScript pour manipuler le DOM et gérer les interactions utilisateur
Utiliser jQuery pour simplifier le code JavaScript et les animations
Mettre à jour l'interface utilisateur en temps réel en fonction de la logique du jeu

Configurer la structure du projet

Dans cette étape, vous allez configurer les fichiers et la structure du projet. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le dossier du projet. La structure de répertoire est la suivante :

├──css
│ └── style.css
├── Images
│ ├── apple.png
│ ├── cherry.png
│ ├── grape.png
│ ├── peach.png
│ ├── pear.png
│ ├── strawberry.png
│ ├──tangerine.png
│ └── watermelon.png
├─ js
│ ├── index.js
│ └── jquery-3.6.0.min.js
└── index.html

Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.

Ensuite, ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement la page pour voir le résultat. Le jeu ne fonctionne pas correctement lorsque vous cliquez sur le bouton Démarrer, comme suit :

Interface de jeu inachevée

Implémenter la fonctionnalité de comparaison

Dans cette étape, vous allez implémenter la fonctionnalité pour comparer les deux images cliquées. Suivez les étapes ci-dessous pour terminer cette étape :

En bas du fichier js/index.js, ajoutez la fonction compare() suivante :

// Compare deux images l'une avec l'autre pour voir si elles sont identiques
function compare() {
  if ($("#" + images[0]).attr("src") == $("#" + images[1]).attr("src")) {
    score += 2;
    $("#score").text(score);
    // Masquer
    $("#" + images[0])
      .parent()
      .css("visibility", "hidden");
    $("#" + images[1])
      .parent()
      .css("visibility", "hidden");
    images = [];
    foundImage += 2;
  } else {
    score -= 2;
    $("#score").text(score);
    $("#" + images[0]).hide();
    $("#" + images[1]).hide();

    images = [];
  }
}

Cette fonction compare la source des deux images cliquées. Si elles sont identiques, le score est augmenté de 2 et les carrés sont masqués. Si elles ne sont pas identiques, le score est diminué de 2 et les images sont masquées. $("#score").text(score) met à jour l'affichage du score dans la section <p>The current number of points is <span id="score">0</span></p> du fichier html en temps réel.

Implémenter la fonctionnalité du bouton de démarrage

Dans cette étape, vous allez implémenter la fonctionnalité du bouton Démarrer. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le fichier js/index.js.
Dans la fonction startGame(), ajoutez le code suivant pour afficher puis cacher les images sur les carrés lorsque le bouton Démarrer est cliqué :

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
}

Dans la fonction startGame(), continuez avec le code précédent suivi du code suivant pour cacher le bouton "Démarrer" :

// Cache le bouton Démarrer
$("#start").css("visibility", "hidden");

Implémenter la fonctionnalité de clic

Dans cette étape, vous allez implémenter la fonctionnalité de clic sur les carrés. Suivez les étapes ci-dessous pour terminer cette étape :

Ouvrez le fichier js/index.js.
Dans la fonction startGame(), ajoutez le code suivant pour gérer l'événement de clic sur les carrés :

function startGame() {
  $(".img-box img").show(1000, function () {
    $(this).hide(1000);
  });
  // Cache le bouton Démarrer
  $("#start").css("visibility", "hidden");
  $(".img-box").bind("click", function () {
    var id = $(this).children().attr("id"); // Récupère l'ID de l'image cliquée
    images.push(id);

    if ($(this).children().is(":hidden")) {
      $(this).children().show();
    } else {
      images.pop(id);
    }
    if (images.length == 2) {
      setTimeout(compare, 500);
    }
  });
}

Ce code ajoutera l'ID de l'image cliquée au tableau images. Si l'image est cachée, elle sera affichée. Si l'image est déjà affichée, elle sera supprimée du tableau images. Lorsque deux images sont dans le tableau images, la fonction compare() sera appelée après un délai de 500 ms.

Après avoir effectué ces étapes, le jeu "Fruit for Fun" devrait être entièrement fonctionnel et le résultat final est le suivant :

Démonstration du jeu terminé