Home > Article > Web Front-end > JavaScript Essentials: Part Mastermind in Javascript)
In this section, we will implement a game called Mastermind in JavaScript. This game development would cover a lot of the concepts that we have discussed so far. We will define functions, pass arguments to them, make use of variables, and make use of loops and if statements. We would briefly look at another concept around functions, known as IIFE, Immediately Invoked Function Expression. We will also look at how to take user input via the command line. At this point, it is just console applications.
You can reference a similar implementation here, Master mind in python
Mastermind is a simple board game that uses colours but We'd use numbers instead.
Summary: Behind a bar are four colours put up by one player. The other player can not see the first player's colours. The first player's colours are called the code maker and the other player's colours are the code breaker. The code breaker has, inclusively, between 2 to 12 attempts at guessing the code makers'. The number of attempts must be even.
Create a folder called mastermind on your pc (or where you put your projects) and in mastermind, initialize a node project using npm init -y (on the command line). I am on a Linux machine so this is how I will set up my project.
The starting (entry) point of this game will be in App, a function. Let's create a function called App and add console.log("App"). We can then call App() and execute the code with node app.js. I won't be telling you to run your code but it is something you should be doing as you code along. This is the current content of my app.js file.
console.log("Mastermind"); function App() { console.log("App"); } App();
When the game starts
Let's implement a function to generate random numbers for the code make, thereby setting random values to the code maker.
First, we need a way to generate random numbers. Not to interfere with the code in the app.js, let's create another file called scratch_pad.js and in this file we experiment.
JavaScript has a simple way to generate random numbers calling Math.random(). In the scratch pad, let's log 4 random numbers using a looping construct.
console.log("Mastermind"); function App() { console.log("App"); } App();
what we want are integers (numbers like) 0, 1, 2, ..., 9 not decimals. We can multiply the value returned from the Math.random() by 10 and we would have x.something where x will now be in 1,2,3,...,9. Remember these experiments are all done on the scratch pad. Give it a try.
What we want is a number before the dot, the whole number part. We can write code to convert the number to a string and then split it by the "." and get the first element. However, there is a functionality for that called floor which we can use.
for (let i = 0; i < 4; i++) { console.log(Math.random()); } // 0.10037268097853191 // 0.20981624777230534 // 0.47828165742292583 // 0.8160883929470153
for (let i = 0; i < 4; i++) { console.log(Math.floor(Math.random() * 10)); } // 4 // 7 // 3 // 4
At this point, we can now go back into our app.js and add the function above to generate the random numbers for the code maker. Put it above the App function.
From the summary the number of colours used is 4. So we need to generate 4 numbers for the code maker. We also have to handle if duplicates are allowed. Back to the scratchpad.
We have functions, if and else statements, the for and while loops, etc. These constructs all have a block or a body. Variables initialized in these blocks can be used within the block and not outside of it. This is known as the scope of a variable. So a variable can exist in the global scope, which means that that variable can be used or assessed everywhere. When we declare a variable in a block. The variable becomes internal or limited in that scope. Run this in the scratchpad.
console.log("Mastermind"); function App() { console.log("App"); } App();
for (let i = 0; i < 4; i++) { console.log(Math.random()); } // 0.10037268097853191 // 0.20981624777230534 // 0.47828165742292583 // 0.8160883929470153
At this point I want to bring to your attention the idea about scopes.
for (let i = 0; i < 4; i++) { console.log(Math.floor(Math.random() * 10)); } // 4 // 7 // 3 // 4
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)); }
const HP = 100; if (true) { console.log("IF BLOCK::", HP); } console.log("End::", HP); // IF BLOCK:: 100 // End:: 100
There is no issue with this approach of taking user input. It is just that we have to use a callback function and there is no way to pass the entered input to the outer scope of the callback function of readlineOInstance.question.
What are you thinking? Try it out in the "scratch pad". If you are thinking about declaring a variable in the outer scope of readlineOInstance.question the assigning the input entered to it, then it is a good approach but ... Still try it.
Do you remember the concept of Promises? We can use promise here and resolve the input. However, we have to wrap the whole process in function. There are a few parts of the readlineOInstance.question has a header similar to question(query: string, callback: (answer: string) => void. The query is the query (or prompt) to the user and the callback is how we handle the input collection. Since we might reuse the same function somewhere later, we'd pass the query as an argument.
console.log("Mastermind"); function App() { console.log("App"); } App();
for (let i = 0; i < 4; i++) { console.log(Math.random()); } // 0.10037268097853191 // 0.20981624777230534 // 0.47828165742292583 // 0.8160883929470153
for (let i = 0; i < 4; i++) { console.log(Math.floor(Math.random() * 10)); } // 4 // 7 // 3 // 4
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)); }
Run the app.js and interact with it. This is a similar output during the interaction.
const HP = 100; if (true) { console.log("IF BLOCK::", HP); } console.log("End::", HP); // IF BLOCK:: 100 // End:: 100
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
// 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 ]
Now we can add the HINTS and compareCode function to the app.js. It is a great time to run your app.js, above the App function.
Now that we implemented a function to compare the code maker and the code breaker, we can now put this in a loop to account for the rounds (rounds = number of times to play the game). So if the number of rounds is 6, then the game would be played 6 times but we'd have to terminate the game when the user guesses all the codes correctly, that is when the values in the HINTS are all 0s. So when we count the number of 0s in HINTS and it is 4, we can terminate the game and say the user won.
console.log("Mastermind"); function App() { console.log("App"); } App();
for (let i = 0; i < 4; i++) { console.log(Math.random()); } // 0.10037268097853191 // 0.20981624777230534 // 0.47828165742292583 // 0.8160883929470153
for (let i = 0; i < 4; i++) { console.log(Math.floor(Math.random() * 10)); } // 4 // 7 // 3 // 4
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)); }
I guess we can enjoy our hard work so far. I have about 130 lines. How many do you have?
This is the full code
const HP = 100; if (true) { console.log("IF BLOCK::", HP); } console.log("End::", HP); // IF BLOCK:: 100 // End:: 100
Even though this is a simple console/terminal/text-based app, there is more we can do about it.
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
// 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 ]
// 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 ]
We have used all that we have learnt in this project and there is more. I mentioned that we could group some functions and export them. For this, we will discuss how to import and export in Javascript. I will provide another project that I think will be useful to you. This is the end of the mastermind game and I hope you will also do some refactoring since there are a lot of places that need to be refactored. Best of luck...
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(); });
The above is the detailed content of JavaScript Essentials: Part Mastermind in Javascript). For more information, please follow other related articles on the PHP Chinese website!