Eino Hummel

Mastermind Explanation: Mastermind is an old game in which you have to guess 4 random colours that are randomly generated.
To guess you have to click 4 colours in the right order and That is when you can see how many colours you had right,
how many there are half right and how many there are wrong. This will be shown by little circle's under the colors.
These circle's change according to the answer. such as a right answer makes a circle red, a wrong answer changes nothing,
and a half right answer makes a circle white. But you won't know which colour is right or wrong so you have to find that out
By yourself. I made this web-game together with two teammates.

mastermind-game

The game mastermind was a good choice because the algorithm we need to understand is quite challenging.
which is why we really had to dig deep into the code to understand what it was doing.
This web-game was made with the language Javascript. which was actually quite fun to work with.
our team had absolutely no experience with Javascript but we managed to make a well-made web-game with it.
The hardest part by far was to make the code check which colour was right or wrong or halfway.
Because we had no idea what we were about to do. We did not prepare as much as we needed.
But that is actually a good thing because that means we can learn from our mistakes.
the second-hardest part was sending the data of the game to an API and then back to the leaderboard.

mastermind-scoreboard

This page is the Home page of the mastermind web-game.
You also have a button to log out, read the explanation or to start the game.
To send the game data to an api we used an axios. See picture below.
The scoreboard will first filter on least attempts and then filter on least amount of time.
That way if you want to get high on the leaderboard you need to be quick, but you will also need to
be smart about your actions. All the names you can see on the leaderboard are of the players
that have tested this game.

mastermind-axios-code

mastermind-check-code

In this bit of code the code will check if the colours are the same as the random colours chosen by the code.
You can see in this code that we had to use splice a few times. We needed to do this to
make the code know which colour is right or partially right.
You can also see that when a colour is right it will send an empty remaining.
And when it is wrong it will send the chosen colour to remaining.
that way the code knows that if it is wrong it can be checked again.
If the colour that was chosen was right a black pin under the bigger circles will change red.
but if the colour is not completely right but is still one of the colours the black pin will turn white.
But if the colours are not right it will be sent through the code and will be deleted at the end.
That way nothing happens with the black pins.

If there is some interest in playing this game you can play it here.

Think game Mastermind