minesweeper

Dragueur de mines

Démineur... oui, ce vieux jeu classique auquel vous vous souvenez avoir joué sur le bon vieux Windows 95 à l'époque (en fait, il a été implémenté dans les mises à jour logicielles de Microsoft jusqu'à Windows 8). Minesweeper trouve ses origines dans les premiers jeux mainframe des années 1960 et 1970. Le premier ancêtre du dragueur de mines était le cube de Jerimac Ratliff. Le style de jeu de base est devenu un segment populaire du genre des jeux de réflexion dans les années 1980.

Révisez votre historique de dragueur de mines ici.

Savez-vous ce qu'est un véritable dragueur de mines ? Moi non plus jusqu'à ce que je lise ceci.

Je me souviens que ma première expérience avec les ordinateurs dans les années 90 consistait à jouer beaucoup à ce jeu, alors je me suis demandé quel meilleur jeu que celui-ci pour boucler la boucle ?

Ma version

Commencer

Jouez au jeu ici !

Gameplay de base

1. Sélectionnez votre niveau de difficulté.

• Facile = 9x9, 10 mines
• Moyen = 16x16, 40 mines
• Difficile = 30x30, 160 mines

2. Cliquez n'importe où sur le tableau pour commencer et démarrer le chronomètre. *Les nombres indiquent combien de mines sont adjacentes à une cellule donnée.
3. Utilisez "Maj + Clic" pour ajouter des drapeaux à une cellule si vous pensez que c'est une mine.

Gagner/Perdre

• Si tu touches une mine... c'est fini, mon pote.
• Gagnez en découvrant toutes les cellules sans mines !

(compris... LE MIEN... BALAYEUR... ?)

Technologies utilisées

Les bons vieux Trois Amigos :

• HTML
• CSS
• Javascript

HTML

Comme vous pouvez le voir dans le code source, le HTML est très concis, car la plupart des actions se déroulent dans le JavaScript. Sans oublier que le plateau de jeu lui-même n’est qu’une simple table.

CSS

J'ai eu beaucoup de plaisir à adapter cela à l'ancienne apparence de la vue du bureau de Windows 95. Je veux toujours jouer un peu avec ça pour que ce soit parfait (je n'ai pas trouvé la police exacte utilisée par MS).

Mon plus grand défi avec le CSS a été de déterminer les styles de tableau (bordures, tailles td, etc.)

Javascript

Comme c'était la première fois que j'écrivais une application Web fonctionnelle en utilisant JavaScript, il n'est pas surprenant que cette section ait été de loin le plus grand défi du projet pour moi.

Voici quelques faits saillants :

1. Dimensionner dynamiquement le tableau lorsque vous cliquez sur un niveau de difficulté

• J'ai créé une fonction (avec l'aide de Jim, bien sûr) qui analyse le numéro de l'ID sur la table et le convertit en une variable ${size} qui ajoute essentiellement des lignes/colonnes en fonction du nombre saisi. Ce concept m’a époustouflé.

2. À son tour, créer dynamiquement un tableau de tableaux pour correspondre au tableau visuel.
3. Création d'une classe "Cell" que j'ai utilisée pour créer des "objets cellules" individuels auxquels j'ai attribué une tonne de propriétés : row#, col#, bomb t/f, # of adjacent bombs (un autre défi en soi, d'ailleurs) , révélé t/f et signalé t/f.

• Cette approche a permis d'écrire beaucoup plus facilement du code plus concis et de ne pas me répéter encore et encore, ainsi que de créer des méthodes sur la classe qui s'exécuteraient pour chaque objet cellule.

4. Création d'une minuterie fonctionnelle affichant les secondes écoulées.
5. Placement aléatoire des bombes sur le réseau.
6. Tout rendre dans le DOM.
7. Affectation de gestionnaires de clics à différents événements.
8. Créer une logique gagnant/perdant
9. Déterminer le flux de contrôle de la façon dont les fonctions sont toutes enchaînées de manière synchrone.
10. En savoir plus sur la récursivité et comment écrire correctement une fonction qui crée un tel effet.

Mes choix de conception

J'ai décidé d'adopter le look OG Windows '95. Je crois fermement au principe « Imiter. Assimiler. Innover ». modèle d'apprentissage, j'ai donc pensé que pour mon premier projet, je devais marcher avant de pouvoir courir et commencer la phase d'imitation du processus d'apprentissage.

Je suis très heureux d'avoir choisi cette voie, car j'ai BEAUCOUP appris en essayant simplement de faire correspondre les styles du jeu original.

Cela dit, je vais certainement créer une version modernisée de cela bientôt.

Prochaines étapes !

Ce projet a vraiment été très amusant pour moi. J’ai l’intention de continuer à l’affiner et de revenir sur les nombreuses leçons apprises dans les années à venir.

• Comme je l'ai mentionné plus tôt, j'aimerais créer un "bascule d'affichage" qui transforme le CSS en une interface utilisateur modernisée, propre, plate et minimaliste.
• Il y a quelques petits bugs esthétiques stupides qui me font m'arracher les cheveux, comme la façon dont la largeur/hauteur des cellules est modifiée de quelques pixels lorsque le tableau est totalement révélé. Je dois réparer ça.
• J'aimerais également étoffer davantage Windows 95, en faisant en sorte que le bouton Démarrer fasse quelque chose, en ajoutant une horloge dans le coin inférieur droit et des icônes fonctionnelles sur le bureau.
• Une fonctionnalité vraiment difficile que j'aimerais aborder serait de créer une fonctionnalité permettant à l'utilisateur de choisir la difficulté en saisissant des nombres (numéros de ligne/colonne/mine).

Ce sera pour un jour de pluie.

Merci d'avoir lu! J'espère que vous apprécierez le jeu :)