Passer la navigation

Ma version de démineur

En 2021, au cégep Édouard-Montpetit, j'ai créé un jeu du démineur en JavaScript pour un projet de synthèse. Plus de 1000 lignes de code ont été écrites. Essayez-le en cliquant ci-dessous !

JouerVoir le code sur Github

Structures, codes et annotations

Ma répartition de fichiers
Ma répartition de fichiers
Le début du code
Le début du code
La fonction pour placer les mines aléatoirement
La fonction pour placer les mines aléatoirement
La fonction indiquant la victoire
La fonction indiquant la victoire

Aperçus de l’interface

Interface démineur : partie terminée
Interface démineur : difficulté moyenne
Interface démineur : difficulté difficile

Démo jouable

Appuyer sur le bouton « Commencer » pour commencer un partie. Voyez le code grâce aux onglets au coin à gauche.

See the Pen MineSweeper JS by Shayne Fortier (@shaynefortier) on CodePen.

Processus

La structure HTML et CSS

Tout d'abord, j'ai préparé le HTML et le CSS. En m'inspirant du jeu original, j'ai initié la grille avec CSS Grid et des styles simples. J'ai testé les classes CSS pour garantir le bon fonctionnement des grilles pour les niveaux de difficulté et les états des cases.

    Aperçu de code HTML et CSS

    Ajouter l’interaction

    Ensuite, j'ai travaillé sur le JavaScript, en créant une fonction à la fois, chacune accomplissant une tâche spécifique. Par exemple, générer les grilles pour les modes facile, moyen et difficile, ainsi que gérer la révélation des cases cliquées.

      Aperçu du début de code JavaScript

      Le défi

      Pendant le développement, je n'avais pas anticipé la détection des mines dans les bords et les coins des cases voisines. J'ai résolu ce problème en calculant leur numéro de case grâce à la fonction de génération du jeu.

        Aperçu de code HTML et CSS

        Des améliorations possibles

        En ayant appris davantage de JavaScript pendant la réalisation du projet, j'aurais pu :

        1. Créer une classe par case, regroupant les données essentielles, évitant les approximations.
        2. Laisser JavaScript gérer les rangées et colonnes pour personnaliser le jeu.
        3. Améliorer l'affichage du chronomètre.
        Aperçu de code HTML et CSS

        Voir d’autres projets

        Aperçu en perspective de la page CSS parallax

        Parallax avec HTML et CSS

        Projet HTML/CSS, effets parallax, conception responsive avant formation intégration multimédia.

        Voir +
        Aperçu du site web WordPress sur laptop, tablette et téléphone

        Refonte de site WordPress

        Site web WordPress plus performant qu’auparavant avec des fonctionnalités faites sur mesure.

        Voir +
        Aperçu de la page CSS Grid sur laptop et téléphone

        Le layout simplifié avec CSS Grid

        Projet web 2018, examen synthèse Dawson. Utilisation avancée de CSS Grid, dépassant les exigences. Focus sur le design et l'innovation. Acquisition de compétences précieuses en développement web.

        Voir +