7 days
- JavaScript (ES6)
- HTML5 + HTML5 Audio
- CSS
- Git
- Clone or download the repo
- Open the
index.htmlin your browser of choice
Mastermind is my own re-creation of the classic 1970's board game. The aim of the game is to guess the 4 colour code that has been randomly created by the computer.
You can find a hosted version here - https://adamponddesign.github.io/mastermind/
- Upon page load the first player guess circle is highlighted.
- Player then clicks on the coloured buttons at the bottom of the screen to place their colour choice into the selected circle. Other colour buttons can be clicked to change the choice.
- Player then clicks on to the next circle to highlight it for selection.
- This process is repeated until the player has their first full line of colours, and is ready to guess. Once the 'Guess' button is clicked, the player receives feedback on their guess in the results on the right side of the board.
- Results Key
- Green Circle = correct colour, correct location
- Orange Circle = correct colour, incorrect location
- Empty Circle = selected colour is nowhere in the code.
The results colours are placed randomly in the results area, so the player must determine which of their choices equates to which result indicator.
- The row selector is automatically moved down, and the player can make another guess. The player has 10 attempts to correctly guess the computer code.
Prior to coding, I utilised an online task manager (Trello), and sudo code to break the project down to achievable chunks.
I initially worked on the logic side of the game, using numbers for the code rather than colours, as I found numbers easier to work with and generate.
Once I had the logic completed for a one line guess, I moved on to the basic styling via HTML and CSS. Multiplying my one line to ten lines, then adding in the coloured buttons for user selection.
I then adjusted the logic to use colours rather than numbers.
Upon completion of my game board, I added in some media breakpoints so that the game would display correctly on multiple screen sizes and devices.
Once I had completed the logic for one line of code, I initially struggled to carry that logic on throughout the game. I also had some issues with the selection rows and highlighted circles not behaving as expected.
Big wins for me in this project were
- Building on my knowledge of array methods
- Improving my troubleshooting skills
- Moving the gameplay selection areas down a line upon 'guess' button click
- Achieving a full board reset upon conclusion of the game.
In the future I would like to add
- a game timer/countdown
- varying difficulty levels with more colour options and longer code lengtha
- An introduction screen detailing the game rules.