Jeu de empilement de fruits avec HTML, CSS, JavaScript

Intermédiaire

Dans ce projet, vous apprendrez à créer un simple jeu de empilement de fruits en utilisant HTML, CSS et JavaScript. Le but est d'empiler les fruits qui tombent en haut de la page dans la boîte en bas. Si trois fruits identiques se trouvent dans la boîte, ils seront automatiquement supprimés.

jQueryJavaScript

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

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 :

Démo du jeu d'élimination de fruits

L'effet non éliminable est le suivant :

Effet de superposition de fruits non éliminable

🎯 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

Enseignant

labby

Labby

Labby is the LabEx teacher.