minesweeper

Minensuchboot

Minesweeper ... ja, dieses alte klassische Spiel, an das Sie sich erinnern, als Sie es damals auf dem guten alten Windows '95 gespielt haben (tatsächlich wurde es in den Software-Updates von Microsoft bis Windows 8 implementiert). Minesweeper hat seinen Ursprung in den frühesten Mainframe-Spielen der 1960er und 1970er Jahre. Der früheste Vorfahre von Minesweeper war Jerimac Ratliff's Cube. Der grundlegende Spielstil wurde in den 1980er Jahren zu einem beliebten Segment des Puzzlespiel-Genres.

Frischen Sie hier Ihre Minesweeper-Geschichte auf.

Wissen Sie, was ein echter Minesweeper ist? Ich habe es auch nicht getan, bis ich das gelesen habe.

Ich erinnere mich an meine ersten Erfahrungen mit Computern in den 90er Jahren, bei denen ich dieses Spiel oft gespielt habe, also dachte ich mir, welches Spiel wäre besser geeignet als dieses, um den Kreis zu schließen?

Meine Version

Erste Schritte

Spielen Sie das Spiel hier!

Grundlegendes Gameplay

1. Wählen Sie Ihren Schwierigkeitsgrad.

• Einfach = 9x9, 10 Minen
• Mittel = 16x16, 40 Minen
• Schwer = 30x30, 160 Minen

2. Klicken Sie irgendwo auf die Tafel, um zu beginnen und den Timer zu starten. *Die Zahlen geben an, wie viele Minen an ein bestimmtes Feld angrenzen.
3. Verwenden Sie „Umschalt + Klicken“, um Markierungen zu einer Zelle hinzuzufügen, wenn Sie glauben, dass es sich um eine Mine handelt.

Gewinnen/Verlieren

• Wenn du eine Mine triffst, ist das Spiel vorbei, Kumpel.
• Gewinnen Sie, indem Sie alle Zellen ohne Minen aufdecken!

(verstehst du... MEINES... Kehrmaschine...?)

Verwendete Technologien

Die guten alten Three Amigos:

• HTML
• CSS
• JavaScript

HTML

Wie Sie dem Quellcode entnehmen können, ist der HTML-Code sehr prägnant, da die meisten Aktionen im JavaScript stattfinden. Ganz zu schweigen davon, dass das Spielbrett selbst nur ein einfacher Tisch ist.

CSS

Es hat mir viel Spaß gemacht, dies im alten Erscheinungsbild der Windows '95-Desktopansicht zu gestalten. Ich möchte immer noch ein bisschen damit herumspielen, um es perfekt hinzubekommen (konnte nicht die genaue Schriftart finden, die von MS verwendet wird).

Meine größte Herausforderung beim CSS bestand darin, die Tabellenstile (Ränder, TD-Größen usw.) herauszufinden.

JavaScript

Da ich zum ersten Mal eine funktionierende Web-App mit JavaScript geschrieben habe, ist es keine große Überraschung, dass dieser Abschnitt für mich die mit Abstand größte Herausforderung des Projekts darstellte.

Hier ein paar Highlights:

1. Dynamische Größenanpassung der Tabelle beim Klicken auf einen Schwierigkeitsgrad

• Ich habe eine Funktion erstellt (natürlich mit Hilfe von Jim), die die Zahl aus der ID in der Tabelle analysiert und sie in eine ${size}-Variable umwandelt, die im Grunde genommen Zeilen/Spalten basierend auf der erfassten Zahl anhängt. Dieses Konzept hat mich umgehauen.

2. Im Gegenzug wird dynamisch ein Array von Arrays erstellt, die der visuellen Tabelle entsprechen.
3. Erstellen einer „Cell“-Klasse, mit der ich einzelne „Cell-Objekte“ erstellt habe, denen ich eine Menge Eigenschaften zugewiesen habe: Zeilennummer, Spaltennummer, Bomben-T/F, Anzahl benachbarter Bomben (übrigens eine weitere Herausforderung für sich) , t/f aufgedeckt und t/f markiert.

• Dieser Ansatz machte es viel einfacher, prägnanteren Code zu schreiben und mich nicht immer wieder zu wiederholen, sowie Methoden für die Klasse zu erstellen, die für jedes Zellobjekt ausgeführt würden.

4. Erstellen eines funktionsfähigen Timers, der die verstrichenen Sekunden anzeigt.
5. Zufällige Bombenplatzierung auf dem Array.
6. Alles im DOM rendern.
7. Zuweisen von Click-Handlern zu verschiedenen Ereignissen.
8. Gewinn/Verlust-Logik erstellen
9. Herausfinden des Kontrollflusses, wie die Funktionen alle synchron miteinander verkettet werden.
10. Lernen Sie etwas über Rekursion und wie man eine Funktion richtig schreibt, die einen solchen Effekt erzeugt.

Meine Designauswahl

Ich habe mich für den OG-Look von Windows '95 entschieden. Ich glaube fest an das Prinzip „Nachahmen. Assimilieren. Innovieren“. Modell des Lernens, also ging ich davon aus, dass ich für mein erstes Projekt laufen musste, bevor ich laufen und mit der Nachahmungsphase des Lernprozesses beginnen konnte.

Ich bin sehr froh, dass ich diesen Weg gewählt habe, denn ich habe VIEL gelernt, indem ich einfach versucht habe, die Stile des Originalspiels zu übernehmen.

Vor diesem Hintergrund werde ich auf jeden Fall bald eine modernisierte Version davon erstellen.

Nächste Schritte!

Dieses Projekt hat mir wirklich sehr viel Spaß gemacht. Ich habe vor, es weiter zu verfeinern und auf die vielen gewonnenen Erkenntnisse in den kommenden Jahren zurückzugreifen.

• Wie ich bereits erwähnt habe, würde ich gerne einen „Anzeigeumschalter“ erstellen, der das CSS in eine modernisierte, saubere, flache und minimalistische Benutzeroberfläche umwandelt.
• Es gibt ein paar dumme kleine ästhetische Fehler, die mich stutzig machen, zum Beispiel, dass die Zellenbreite/-höhe um ein paar Pixel angepasst wird, wenn das Board vollständig sichtbar ist. Ich muss das beheben.
• Außerdem würde ich die Sache mit Windows '95 gerne weiter verfeinern, indem ich die Schaltfläche „Start“ dazu bringen würde, etwas zu tun, in der unteren rechten Ecke eine Uhr hinzuzufügen und einige funktionale Desktopsymbole hinzuzufügen.
• Eine wirklich schwierige Funktion, die ich gerne in Angriff nehmen würde, wäre die Entwicklung einer Funktion, bei der der Benutzer den Schwierigkeitsgrad durch Eingabe von Zahlen (Zeilen-/Spalten-/Minennummern) auswählen kann.

Das wird für einen regnerischen Tag sein.

Vielen Dank fürs Lesen! Ich hoffe, dass dir das Spiel gefällt :)