rayhatron / memory-game Goto Github PK

A web app of a classic matching game where a player turns over two cards at a time in order to turn over a matching pair. The player uses their memory to remember where other cards they've turned over that didn't match are located, hence the name memory game.

Home Page: https://rayhatron.github.io/memory-game/

CSS 18.81% HTML 29.68% JavaScript 51.51%

memory-game matching-game javascript html5-game css3-flexbox

memory-game's Introduction

Memory Game

Getting Started

Here's a live version of the Memory Game deployed on my github pages website for to get started playing the game.

How To Install

To play the game on your laptop instead of the live version, follow these instructions:

Enter the following command git clone https://github.com/Rayhatron/memory-game.git in your terminal or cmd to clone the repository to your laptop OR download the zip folder with the files for this project.
Once that's done, navigate to the directory where the repository was cloned using your file explorer so you can view the files OR unzip the downloaded zip folder then open the resulting folder to view all the files.
Finally, right click index.html and select open with Chrome or your favourite browser to run the Memory Game on your laptop.

That's it, Enjoy!

How To Play

Playing the game is really simple, click/touch any card to reveal it and then touch another card to attempt to match a pair. Once you've clicked/touched the first card, a timer will begin and once you have attempted to match a pair, your moves will start to be recorded.

A star rating will be shown and will decrease as you make more moves. The less moves you take to complete the game the higher your star rating.

The game will end once you have successfully matched all the cards on the board.

To start a new game, simply press the restart button and the cards will be reshuffled, your moves, timer and star rating will also reset.

If you'd like to take a closer look at the code and see how it all works, simply fork this repository and then clone it to your local machine. Once that's done, you can open the files to edit them with a text editor or open up index.html with your favourite browser to play the Memory Game (with any changes you make) on your laptop.

You can also take a look at the project board to see how the Memory Game progressed since the first line of code was written. Feel free to leave any comments here or you can tweet me @Rayhatron and we can chat there.

Built With

HTML5 - Used to create the structure of the Memory Game
CSS3 - Used to style the Memory Game
JavaScript - Used to implement the logic and functionality of the Memory Game
Font Awesome 5 - Used to add the different icons that the player has to match in the Memory Game

Acknowledgments

Special thanks to Laurens Holst for writing this StackOverflow answer on how to implement Durstenfeld's version of the Fisher–Yates shuffle algorithm

memory-game's People

Contributors

Stargazers

Watchers

memory-game's Issues

Setup the project files

Setup the basic project structure with the necessary files

Make the Star Rating responsive to the performance of the player

After some number of moves, it should change to a 2 star rating. After a few more moves, it should change to a 1 star rating. The number of moves needed to change the rating is up to you, but it should happen at some point.

Bug: Star rating system changes too quickly

The current star rating system is implemented such that the stars changing from 3 to 2 to 1 very quickly. Would be better to allow more moves to be made before the stars start dropping.

Timer to track how long the player has been playing

Implement a timer to track the time of how long the player has been playing the game
Stop the timer once the player has won the game
Should be constantly updated as the player is playing the game

Restart Button

Implement a restart button that a player can click in order to reset the board to random order, clear all moves and start the game again

Up your style game ;)

Alright, logic is done but man this game doesn't look that pretty. Let's do something about that hey.

Create board layout

Create the board layout with the required number of cards and styling

Bug: Timer only starts after 2 clicks

Current implementation has the timer starting after a move has been made and a move is consisting of 2 clicks. The timer should start once the player clicks on any card as long as it's the first card to be clicked in current game play.

Refactor the code

Refactor the code as much as possible by removing any unecessary console.log, TODO comments and implementing better logic/functions/comments.

Update README

Update the README to contain more information so it is useful to contributors or players of the game.

Create a container to display the top 10 players

Implement a congratulatory screen once the player has won

When a user wins the game, a modal appears to congratulate the player and ask if they want to play again. It should also tell the user how much time it took to win the game, and what the star rating was.

Shuffle Cards

Implement the shuffling of the cards on the board

At the beginning of a game, it should display 3 stars.

The game displays a star rating (from 1-3) that reflects the player's performance. At the beginning of a game, it should display 3 stars.

Pick a card

Implement selecting a card:

A player flips one card over to reveal its underlying symbol
The player then turns over a second card, trying to find the corresponding card with the same symbol

Limit to only selecting 2 cards.

Match Cards

If the cards match, both cards stay flipped over
If the cards do not match, both cards are returned to their initial hidden state

Once done, get to tracking the moves.

Implement counter for moves made by player

Implement a counter to track the number of moves made by a player
Display the moves on the screen as the player makes them