JavaScript Essentials: Teil Mastermind in Javascript)

In diesem Abschnitt implementieren wir ein Spiel namens Mastermind in JavaScript. Diese Spielentwicklung würde viele der Konzepte abdecken, die wir bisher besprochen haben. Wir werden Funktionen definieren, Argumente an sie übergeben, Variablen verwenden und Schleifen und if-Anweisungen verwenden. Wir werfen einen kurzen Blick auf ein anderes Konzept rund um Funktionen, bekannt als IIFE, „Sofort aufgerufener Funktionsausdruck“. Wir werden uns auch ansehen, wie Benutzereingaben über die Befehlszeile entgegengenommen werden. Zu diesem Zeitpunkt handelt es sich lediglich um Konsolenanwendungen.

Sie können hier auf eine ähnliche Implementierung verweisen, Mastermind in Python

Mastermind ist ein einfaches Brettspiel, das Farben verwendet, aber wir würden stattdessen Zahlen verwenden.

Zusammenfassung: Hinter einer Leiste stehen vier Farben, die von einem Spieler aufgestellt wurden. Der andere Spieler kann die Farben des Startspielers nicht sehen. Die Farben des ersten Spielers werden als Code-Maker bezeichnet und die Farben des anderen Spielers als Code-Brecher. Der Code-Knacker hat insgesamt zwischen 2 und 12 Versuche, die Code-Ersteller zu erraten. Die Anzahl der Versuche muss gerade sein.

Durchführung

• Erstellen Sie einen Ordner mit dem Namen mastermind auf Ihrem PC (oder dort, wo Sie Ihre Projekte ablegen) und initialisieren Sie in mastermind ein Knotenprojekt mit npm init -y (in der Befehlszeile). . Ich arbeite auf einem Linux-Rechner und werde mein Projekt so einrichten.

  • Öffne mein Terminal, führe es aus, cd, um mich in den Benutzerordner zu verschieben.
  • Dann cd ~/projects. Unter „Projekte“ bewahre ich meine Projekte auf.
  • Dann mkdir mastermind und cd mastermind, um den Ordner mastermind zu erstellen und in diesen Ordner zu wechseln.
  • Initialisieren Sie ein Knotenprojekt mit npm init -y. Es wird eine package.json-Datei erstellt.
  • Erstellen Sie app.js mit Touch app.js.
  • Schreiben Sie console.log("Mastermind") in app.js und führen Sie es mit dem Knoten app.js aus. Ich erwarte, dass Mastermind angezeigt wird. Ansonsten habe ich ein Problem mit meinem Setup.

• Der Startpunkt (Einstiegspunkt) dieses Spiels wird in der App sein, einer Funktion. Erstellen wir eine Funktion namens App und fügen wir console.log("App") hinzu. Anschließend können wir App() aufrufen und den Code mit dem Knoten app.js ausführen. Ich werde Ihnen nicht sagen, dass Sie Ihren Code ausführen sollen, aber es ist etwas, was Sie beim Programmieren tun sollten. Dies ist der aktuelle Inhalt meiner app.js-Datei.
  
  

console.log("Mastermind");

function App() {
  console.log("App");
}

App();

• Wenn das Spiel beginnt

  • Der Benutzer gibt die Anzahl der Runden ein, die er spielen möchte, und der eingegebene Wert muss validiert werden
  • Der Benutzer wählt, ob Duplikate zugelassen werden sollen oder nicht
  • Irgendwo wird der Code-Ersteller zufällig generiert
  • Benutzer hat den Codeknacker eingegeben
  • Der Codebrecher wird mit dem Codehersteller verglichen und es wird ein Hinweis gegeben, wenn er nicht übereinstimmt
  • Dabei machen wir die Anzahl der Runden
  • und um das Ganze spielerischer zu machen, haben wir die gesamte App in eine Endlosschleife
  versetzt

• Lassen Sie uns eine Funktion implementieren, um Zufallszahlen für den Code-Ersteller zu generieren und dadurch Zufallswerte für den Code-Ersteller festzulegen.

• Zuerst brauchen wir eine Möglichkeit, Zufallszahlen zu generieren. Um den Code in app.js nicht zu beeinträchtigen, erstellen wir eine weitere Datei namens scratch_pad.js und experimentieren in dieser Datei.

• JavaScript bietet eine einfache Möglichkeit, Zufallszahlen zu generieren, indem es Math.random() aufruft. Lassen Sie uns im Notizblock 4 Zufallszahlen mit einem Schleifenkonstrukt protokollieren.
  
  

console.log("Mastermind");

function App() {
  console.log("App");
}

App();

• Was wir wollen, sind ganze Zahlen (Zahlen wie) 0, 1, 2, ..., 9, keine Dezimalzahlen. Wir können den von Math.random() zurückgegebenen Wert mit 10 multiplizieren und hätten x.something, wobei x jetzt in 1,2,3,...,9 liegt. Denken Sie daran, dass diese Experimente alle auf dem Notizblock durchgeführt werden. Probieren Sie es aus.

• Was wir wollen, ist eine Zahl vor dem Punkt, der ganze Zahlenteil. Wir können Code schreiben, um die Zahl in eine Zeichenfolge umzuwandeln und sie dann durch das „.“ zu teilen. und erhalte das erste Element. Es gibt jedoch eine Funktion namens „Boden“, die wir nutzen können.
  

for (let i = 0; i < 4; i++) {
  console.log(Math.random());
}
// 0.10037268097853191
// 0.20981624777230534
// 0.47828165742292583
// 0.8160883929470153

• Die Funktionsweise besteht darin, dass wir, wenn wir Zufallszahlen zwischen einer Zahl min und max erhalten möchten, wobei max größer als min ist, Folgendes tun können: min Math.floor(Math.random() * (max - min 1)). min ist der minimale erwartete Wert und max ist der maximale erwartete Wert. In unserem Fall beträgt unser Mindestwert 0 und der Höchstwert 9.
• Dies ist mein Snippet zum Generieren der Zufallszahl. Ich habe der Funktion Parameter hinzugefügt, weil ich nicht möchte, dass die Funktion einen internen Status hat.

for (let i = 0; i < 4; i++) {
  console.log(Math.floor(Math.random() * 10));
}
// 4
// 7
// 3
// 4

• An diesem Punkt können wir nun zu unserem app.js zurückkehren und die obige Funktion hinzufügen, um die Zufallszahlen für den Code-Ersteller zu generieren. Platzieren Sie es über der App-Funktion.

• Aus der Zusammenfassung geht hervor, dass 4 Farben verwendet werden. Wir müssen also 4 Zahlen für den Code-Ersteller generieren. Wir müssen uns auch darum kümmern, ob Duplikate zulässig sind. Zurück zum Notizblock.

• Wir haben Funktionen, if- und else-Anweisungen, for- und while-Schleifen usw. Diese Konstrukte haben alle einen Block oder einen Körper. In diesen Blöcken initialisierte Variablen können innerhalb des Blocks und nicht außerhalb davon verwendet werden. Dies wird als Gültigkeitsbereich einer Variablen bezeichnet. Eine Variable kann also im globalen Geltungsbereich existieren, was bedeutet, dass diese Variable überall verwendet oder ausgewertet werden kann. Wenn wir eine Variable in einem Block deklarieren. Die Variable wird in diesem Bereich intern oder begrenzt. Führen Sie dies im Notizblock aus.
  

console.log("Mastermind");

function App() {
  console.log("App");
}

App();

• Aktualisieren Sie dies nun, indem Sie eine Variable x in der if-Anweisung console.log(x) außerhalb des if-Blocks initialisieren und Ihr Scratchpad ausführen. Sie sollten eine ähnliche Fehlermeldung erhalten.

for (let i = 0; i < 4; i++) {
  console.log(Math.random());
}
// 0.10037268097853191
// 0.20981624777230534
// 0.47828165742292583
// 0.8160883929470153

An dieser Stelle möchte ich Sie auf die Idee von Zielfernrohren aufmerksam machen.

• Beim Generieren des Code Makers möchten wir wissen, ob Duplikate zulässig sind, und zu diesem Zeitpunkt wissen wir, dass der Code Maker ein Array aus Zahlen (oder numerischen Zeichenfolgen) ist. Beginnen wir mit dem Notizblock. Wir möchten eine Funktion implementieren, die ein boolesches Argument akzeptiert, das angibt, ob Duplikate zulässig sind. Die Funktion fügt dem Code-Maker vier Zahlen hinzu (pusht sie), aber vorher müssen wir prüfen, ob Duplikate zulässig sind, und ggf. behandeln.

for (let i = 0; i < 4; i++) {
  console.log(Math.floor(Math.random() * 10));
}
// 4
// 7
// 3
// 4

• Wir haben unseren Code auch so geschrieben, dass in der Code Maker-Funktion nicht global auf den Code Maker zugegriffen wird. Daher wird stattdessen der Code-Maker zurückgegeben.

function generateRandomNumbersBetween(min, max) {
  return min + Math.floor(Math.random() * (max - min + 1));
}

for (let i = 0; i < 4; i++) {
  console.log(generateRandomNumbersBetween(0, 9));
}

• In app.js können wir jetzt die Code-Maker-Funktion und eine Variable für die Code-Erstellung hinzufügen.
• Jetzt zurück zum Notizblock. Wir möchten Eingaben des Benutzers vom Terminal entgegennehmen. Javascript bietet auch eine Möglichkeit, dies zu tun. Probieren Sie diesen Ausschnitt aus.

const HP = 100;

if (true) {
  console.log("IF BLOCK::", HP);
}

console.log("End::", HP);

// IF BLOCK:: 100
// End:: 100

• Bei diesem Ansatz, Benutzereingaben zu berücksichtigen, gibt es kein Problem. Wir müssen lediglich eine Callback-Funktion verwenden und es gibt keine Möglichkeit, die eingegebene Eingabe an den äußeren Bereich der Callback-Funktion von readlineOInstance.question zu übergeben.

• Was denkst du? Probieren Sie es im „Rubbelblock“ aus. Wenn Sie darüber nachdenken, eine Variable im äußeren Bereich von readlineOInstance.question zu deklarieren und ihr die eingegebene Eingabe zuzuweisen, dann ist das ein guter Ansatz, aber ... Versuchen Sie es trotzdem.

• Erinnern Sie sich an das Konzept der Versprechen? Wir können hier Promise verwenden und die Eingabe auflösen. Allerdings müssen wir den gesamten Prozess in eine Funktion umwandeln. Es gibt einige Teile der readlineOInstance.question hat einen Header ähnlich wie Frage(query: string, callback: (answer: string) => void. Die Abfrage ist die Abfrage (oder Eingabeaufforderung) an den Benutzer und der Rückruf ist wie Wir kümmern uns um die Eingabesammlung. Da wir dieselbe Funktion möglicherweise später irgendwo wiederverwenden, würden wir die Abfrage als Argument übergeben.
  

  console.log("Mastermind");
  
  function App() {
    console.log("App");
  }
  
  App();
  

  • Jetzt können wir die getInput-Funktion zur app.js hinzufügen. Vergessen Sie nicht den Import, const readline = require("readline"). Der Inhalt der app.js sollte dem folgenden Snippet ähneln.

  for (let i = 0; i < 4; i++) {
    console.log(Math.random());
  }
  // 0.10037268097853191
  // 0.20981624777230534
  // 0.47828165742292583
  // 0.8160883929470153
  

  • Jetzt bitten wir den Benutzer, die Anzahl der Runden einzugeben und ob ein Duplikat zulässig ist. Wir wissen, dass die Anzahl der Runden gerade sein muss und zwischen 2 und 12 liegen muss. Wir werden eine Funktion implementieren, um zu validieren, dass ein Wert (eine Zahl) gerade ist und zwischen 2 und 12 liegt. Sie wird einen booleschen Wert zurückgeben. Eine Zahl ist gerade, wenn die Zahl modulo 2 Null ist. (d. h. Zahl % 2 == 0).

  for (let i = 0; i < 4; i++) {
    console.log(Math.floor(Math.random() * 10));
  }
  // 4
  // 7
  // 3
  // 4
  

  • Im Hauptteil der App-Funktion können wir nach Eingaben fragen und diese validieren. Wir werden kontinuierlich nach der richtigen Eingabe für die Anzahl der Runden fragen. Wenn der Benutzer bei den doppelten Werten im Code etwas anderes als erwartet eingibt, gehen wir davon aus, dass der Benutzer keine Duplikate möchte. Wir verwenden eine While-Schleife und setzen die Bedingung auf wahr und unterbrechen sie nur, wenn die Runden gültig sind. Wenn der Benutzer jedoch einen ungültigen Wert eingibt, verwenden wir einen Versuch und einen Fang (zur Fehlerbehandlung). Wir protokollieren eine Meldung, die angibt, dass der Wert eingegeben wurde ist ungültig. Probieren Sie es aus.

  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  for (let i = 0; i < 4; i++) {
    console.log(generateRandomNumbersBetween(0, 9));
  }
  

  Führen Sie app.js aus und interagieren Sie damit. Dies ist eine ähnliche Ausgabe während der Interaktion.
  

  const HP = 100;
  
  if (true) {
    console.log("IF BLOCK::", HP);
  }
  
  console.log("End::", HP);
  
  // IF BLOCK:: 100
  // End:: 100
  

  • Wir haben die Anzahl der Runden und den Wert für die Vervielfältigung genommen. Jetzt können wir den Code Maker generieren. Dazu können wir die Funktion „generateCodeMaker“ aufrufen und ihr den Wert der Duplikationsoption übergeben (oder ihn belassen, da er standardmäßig „false“ ist).

   IF BLOCK:: 100
   /home/Projects/mastermind/scratch_pad.js:8
   console.log(x)
      ^
  
   ReferenceError: x is not defined
      at Object.<anonymous> (/home/Projects/mastermind/scratch_pad.js:8:13)
      at Module._compile (node:internal/modules/cjs/loader:1469:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
      at node:internal/main/run_main_module:28:49
  
   Node.js v20.17.0
  

  • Jetzt können wir den Benutzer nach dem Code-Brecher fragen und ihn mit dem Code-Ersteller vergleichen. Der Codeknacker ist ebenfalls ein Zahlenarray. Wir werden auch einen Hinweis hinzufügen, damit der Benutzer weiß, wie weit er von einem bestimmten Code entfernt ist. Wenn also der Code des Codebrechers größer ist als der Code des Codeherstellers, sagen wir mehr. Wir sagen gleich, wenn sie gleich sind, und wir sagen weniger, wenn der Code vom Codebrecher kleiner ist als der Code des Codebrechers. Gehen wir zum Notizblock.
  • Wir erstellen eine Funktion, die ein numerisches Array aus 4 Elementen annimmt und dann die Eingaben des Benutzers vergleicht (Code-Brecher).

  // a global code maker that is accessible inside any other scope
  let CODE_MAKER = [];
  
  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  function generateCodeMaker(isDuplicatesAllowed = false) {
    let counter = 0;
  
    while (counter < 4) {
      let code = generateRandomNumbersBetween(0, 9);
  
      if (isDuplicatesAllowed) {
        CODE_MAKER.push(code);
        counter += 1;
      } else if (!CODE_MAKER.includes(code)) {
        CODE_MAKER.push(code);
        counter += 1;
      }
    }
  }
  
  console.log(CODE_MAKER);
  generateCodeMaker(true);
  console.log(CODE_MAKER);
  
  // reset the code maker
  CODE_MAKER = [];
  generateCodeMaker(false);
  console.log(CODE_MAKER);
  // []
  // [ 6, 6, 0, 9 ]
  // [ 2, 5, 0, 8 ]
  

  • Wir haben eine Variable zur Verarbeitung der Hinweise und einen Wert für jeden Code, der sich auf den Code-Ersteller und -Brecher bezieht.
  • Wir übergeben den Code-Ersteller an die Funktion, um ihn mit der Eingabe des Benutzers zu vergleichen.
  • Wir aktualisieren die Hinweise, um dem Benutzer mitzuteilen, wie er die Werte im Code Breaker aktualisieren kann

  • Jetzt können wir die Funktion HINTS und CompareCode zur app.js hinzufügen. Es ist ein guter Zeitpunkt, Ihre app.js oberhalb der App-Funktion auszuführen.

  • Da wir nun eine Funktion zum Vergleichen des Code Makers und des Code Breakers implementiert haben, können wir diese nun in eine Schleife einfügen, um die Runden zu berücksichtigen (Runden = Anzahl der Spiele). Wenn die Anzahl der Runden also 6 beträgt, würde das Spiel 6 Mal gespielt, aber wir müssten das Spiel beenden, wenn der Benutzer alle Codes richtig erraten hat, das heißt, wenn die Werte in den HINTS alle Nullen sind. Wenn wir also die Anzahl der Nullen in HINTS zählen und es 4 ist, können wir das Spiel beenden und sagen, dass der Benutzer gewonnen hat.
    

  console.log("Mastermind");
  
  function App() {
    console.log("App");
  }
  
  App();
  

  • Die Anzahl der Runden wird reduziert und wir wissen, ob der Benutzer gewonnen hat oder nicht, wenn die Anzahl der Runden nicht 0 ist.

  for (let i = 0; i < 4; i++) {
    console.log(Math.random());
  }
  // 0.10037268097853191
  // 0.20981624777230534
  // 0.47828165742292583
  // 0.8160883929470153
  

  • Einige Ausgaben, wenn Sie das Programm ausführen

  for (let i = 0; i < 4; i++) {
    console.log(Math.floor(Math.random() * 10));
  }
  // 4
  // 7
  // 3
  // 4
  

  • Wenn ich die Eingabetaste drücke

  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  for (let i = 0; i < 4; i++) {
    console.log(generateRandomNumbersBetween(0, 9));
  }
  

  • Ich denke, wir können unsere bisherige harte Arbeit genießen. Ich habe etwa 130 Zeilen. Wie viele hast du?

  • Dies ist der vollständige Code
    

  const HP = 100;
  
  if (true) {
    console.log("IF BLOCK::", HP);
  }
  
  console.log("End::", HP);
  
  // IF BLOCK:: 100
  // End:: 100
  

  Gibt es Raum für Verbesserungen?

  Auch wenn es sich um eine einfache konsolen-/terminal-/textbasierte App handelt, können wir noch mehr dagegen tun.

  • Wir können alle Konstanten wie Zeichenfolgen und Zahlen ersetzen.
  • Wir könnten die Code-Breaker-Eingabe und deren Aufteilung aus dem Vergleichscode herausziehen (umgestalten) und dann den Code-Breaker und den Code-Maker als Argumente übergeben. Wir könnten die Funktion sogar die Hinweise zurückgeben lassen, anstatt global auf die Hinweise zuzugreifen. Wir werden eine neue Hints-Variable erstellen und diese zurückgeben. CompareCode gibt also Hinweise zurück, die der Variablen hints zugewiesen sind.

   IF BLOCK:: 100
   /home/Projects/mastermind/scratch_pad.js:8
   console.log(x)
      ^
  
   ReferenceError: x is not defined
      at Object.<anonymous> (/home/Projects/mastermind/scratch_pad.js:8:13)
      at Module._compile (node:internal/modules/cjs/loader:1469:14)
      at Module._extensions..js (node:internal/modules/cjs/loader:1548:10)
      at Module.load (node:internal/modules/cjs/loader:1288:32)
      at Module._load (node:internal/modules/cjs/loader:1104:12)
      at Function.executeUserEntryPoint [as runMain] (node:internal/modules/run_main:174:12)
      at node:internal/main/run_main_module:28:49
  
   Node.js v20.17.0
  

  • Wir können console.clear() auch in eine Funktion einbinden.
  • Wir können das Programm vor dem nächsten Spiel langsamer machen
  • Wir können HINTS.filter((value) => 0 === value).length === 4 als Funktion herausziehen. Der Zweck besteht darin, zu überprüfen, ob der Codeknacker den Codehersteller richtig erraten hat.
  • Dasselbe können wir auch tun, um zu verkünden, wer das Spiel gewonnen hat

  // a global code maker that is accessible inside any other scope
  let CODE_MAKER = [];
  
  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  function generateCodeMaker(isDuplicatesAllowed = false) {
    let counter = 0;
  
    while (counter < 4) {
      let code = generateRandomNumbersBetween(0, 9);
  
      if (isDuplicatesAllowed) {
        CODE_MAKER.push(code);
        counter += 1;
      } else if (!CODE_MAKER.includes(code)) {
        CODE_MAKER.push(code);
        counter += 1;
      }
    }
  }
  
  console.log(CODE_MAKER);
  generateCodeMaker(true);
  console.log(CODE_MAKER);
  
  // reset the code maker
  CODE_MAKER = [];
  generateCodeMaker(false);
  console.log(CODE_MAKER);
  // []
  // [ 6, 6, 0, 9 ]
  // [ 2, 5, 0, 8 ]
  

  • Fügen Sie alle Funktionen, die eigenständig sein können, in ihre eigene Datei „functions.js“ ein und exportieren Sie sie. Anschließend können wir eigenständige Funktionen umgestalten, die von einer globalen Variablen abhängen, und diese Daten dann mithilfe eines Parameters als Argument an die Funktion übergeben.
  • Wir können sogar eine separate Datei dafür haben

  // a global code maker that is accessible inside any other scope
  let CODE_MAKER = [];
  
  function generateRandomNumbersBetween(min, max) {
    return min + Math.floor(Math.random() * (max - min + 1));
  }
  
  function generateCodeMaker(isDuplicatesAllowed = false) {
    let counter = 0;
    let codeMaker = [];
  
    while (counter < 4) {
      let code = generateRandomNumbersBetween(0, 9);
  
      if (isDuplicatesAllowed) {
        codeMaker.push(code);
        counter += 1;
      } else if (!codeMaker.includes(code)) {
        codeMaker.push(code);
        counter += 1;
      }
    }
  
    return codeMaker;
  }
  
  console.log(CODE_MAKER);
  CODE_MAKER = generateCodeMaker(true);
  console.log(CODE_MAKER);
  
  CODE_MAKER = generateCodeMaker(false);
  console.log(CODE_MAKER);
  
  // []
  // [ 6, 6, 0, 9 ]
  // [ 2, 5, 0, 8 ]
  

  Abschluss

  Wir haben alles, was wir in diesem Projekt gelernt haben, genutzt und es gibt noch mehr. Ich erwähnte, dass wir einige Funktionen gruppieren und exportieren könnten. Dazu besprechen wir den Import und Export in Javascript. Ich werde ein weiteres Projekt bereitstellen, von dem ich denke, dass es für Sie nützlich sein wird. Dies ist das Ende des Mastermind-Spiels und ich hoffe, dass Sie auch einige Umgestaltungen vornehmen, da es viele Stellen gibt, die umgestaltet werden müssen. Viel Glück...
  

  const readline = require("readline");
  
  const readlineOInstance = readline.createInterface({
    input: process.stdin,
    output: process.stdout,
  });
  
  readlineOInstance.question("Enter code maker: ", (userInput) => {
    console.clear();
    console.log(`INPUT: ${userInput}`);
    readlineOInstance.close();
  });
  

  Quellen

  • wiki-play-mastermind
  • wikipedia-mastermind
  • Meister in Python

  Das obige ist der detaillierte Inhalt vonJavaScript Essentials: Teil Mastermind in Javascript). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!