Memory Game is a small javascript based game that is based on logic, javascript, HTML, and some CSS. This is a really good example of what you can achieve if you add a little CSS and HTML into the mix. The objective of the game is simple – you have to match all the cards that are turned over in as few moves as you possibly can. For this to happen, you will need to remember the cards. Hence the name – Memory Game. The game is actually built entirely using Javascript, but some coders went ahead and added HTML into the mix to see what happens.
There are four options available in Memory Game:
- cards – there are different arrays of cards that you can use in the game
- onGameEnd – this is a callback function that will automatically run on its own once when the game is finished
- wrapper id – you need to enter the id of the respective div that you would like to attach to the memory
- onGameStart – this particular function will run itself when you open the game for the first time
Cards
The Memory Game is currently available in the 8 x 4 grid which means that it can fit a maximum of 32 cards. So, if you want to run the Memory Game at 3 different levels, you will need to mention unique ids for all the 16 cards and map it to its image path.
Public Functions
As far as the Public Function is concerned, there is only one available which is the reset Game function. As the name pretty much says, this function will reset the game to its original state and restart the game from the beginning.
Learning about these functions, cards, Sass, and codes will help you create and manage the game more effectively.