Jeu de tas de fruits avec HTML, CSS, JavaScript

Introduction

Dans ce projet, vous allez apprendre à créer un simple jeu de superposition de fruits à l'aide de HTML, CSS et JavaScript. Le but est de superposer les éléments de fruits tombant au sommet de la page dans la boîte en bas. Si trois fruits identiques sont dans la boîte, ils seront automatiquement supprimés.

👀 Aperçu

L'effet éliminable ressemble à ceci :

L'effet non éliminable est le suivant :

🎯 Tâches

Dans ce projet, vous allez apprendre :

• Comment configurer le projet en ouvrant les fichiers fournis dans l'éditeur
• Comment ajouter un gestionnaire d'événements de clic aux éléments de fruits au sommet de la page
• Comment implémenter la logique du jeu pour ajouter, supprimer et éliminer les éléments de fruits
• Comment finaliser le projet et tester la fonctionnalité

🏆 Réalisations

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

• Utiliser jQuery pour manipuler le DOM et gérer les événements
• Implémenter la logique de base du jeu à l'aide de JavaScript
• Créer une interface utilisateur simple et interactive
• Tester et déboguer votre code pour vous assurer de la fonctionnalité souhaitée

Configurer la structure du projet

Dans cette étape, vous allez configurer le projet en ouvrant les fichiers fournis dans l'éditeur.

1. Ouvrez l'éditeur et vous devriez voir les fichiers suivants : index.html, style.css, jquery.min.js et les fichiers d'image.
2. Cliquez sur le bouton Go Live dans le coin inférieur droit de WebIDE pour exécuter le projet.
3. Ouvrez "Web 8080" en haut de la machine virtuelle et rafraîchissez manuellement pour voir la page.

Ajouter le gestionnaire d'événements de clic

Dans cette étape, vous allez ajouter le gestionnaire d'événements de clic aux éléments de fruits au sommet de la page.

1. Dans le fichier index.html, localisez la section TODO dans la balise <script>.
2. La balise <script> définit un tableau vide de variables ids à l'intérieur.

let ids = [];

$("#card li").on("click", function (e) {
  // TODO: Veuillez implémenter la fonction ici
});

3. Ajoutez le code suivant à l'intérieur de la section TODO :

$("#card li").on("click", function (e) {
  // TODO: Veuillez implémenter la fonction ici
  if ($("#box li").length >= 7) {
    return;
  }
  let clone = $(this).clone();
  $("#box").append(clone);

  let currentId = $(this).data("id");
  ids.push($(this).data("id"));

  let currentIdLen = ids.filter((id) => id == currentId)?.length;

  if (currentIdLen == 3) {
    ids = ids.filter((id) => id !== currentId);
    let three = $(`#box li[data-id=${currentId}]`);
    for (let index = 0; index < three.length; index++) {
      const element = three[index];
      $(element).addClass("active");
      setTimeout(() => {
        element.remove();
      }, 200);
    }
  }

  $(this).css({
    top: "600px",
    left: "200px",
    opacity: 0,
    transition:
      "left.2s linear, top.2s cubic-bezier(.08,-0.35,.99,.33),opacity.2s linear"
  });
});

Ce code ajoute un gestionnaire d'événements de clic aux éléments de fruits au sommet de la page. Lorsqu'un élément de fruit est cliqué, il sera cloné et ajouté à la boîte en bas de la page. Si trois fruits identiques sont dans la boîte, ils seront supprimés. Si l'élément rectangle inférieur (id=box) a 7 fruits et ne peut pas être éliminé, le nœud d'élément de fruit cliqué n'est pas dans l'élément rectangle ajouté.

Finaliser le projet

Dans cette dernière étape, vous allez terminer le projet en ajoutant les touches finales.

1. Testez le projet en cliquant sur les éléments de fruits au sommet de la page. Vérifiez que les fruits sont ajoutés à la boîte et supprimés s'il y en a trois identiques. L'effet éliminable ressemble à ceci :

2. Si la boîte contient 7 fruits et qu'aucun autre ne peut être éliminé, cliquer sur l'élément de fruit au sommet ne devrait avoir aucun effet. L'effet non éliminable est le suivant :

Félicitations ! Vous avez terminé le projet Fruit Stacker.

Résumé

Félicitations ! Vous avez terminé ce projet. Vous pouvez pratiquer plus de laboratoires dans LabEx pour améliorer vos compétences.