8710 Project - Foundations of Software Engineering
Witchy Pairings
Index – Table of Contents
About
This is a simple Memory Game Web Application based on Halloween theme called "Witchy Pairings", created as part of our Foundations of Software Engineering coursework. The game is designed to test a user's memory and is made up of a deck of cards, each card containing an image assigned randomly. The goal is to click on a card to reveal the image behind it, memorise the card containing that image and match cards with similar images until all the pairs are matched.
Challenge
The challenge is to match all the cards in as little time as possible, making the fewest selections possible
Instructions
-
Click on the level of your choice (Easy, Medium, Hard) to start the game.
-
Click on the blocks to reveal the image behind it. Do it to the remaining blocks and find the matching pair.
-
Continue revealing cards and working your memory to remember each unveiled card.
-
Match cards properly with less moves and in faster time.
-
You can reset the game using “Reset” button.
-
Check the time with the help of “Timer” at the top of the game.
-
You can go to the home page with the help of home button.
Game Layout
The index page is made up of a modal that contains instructions on how to play the game, and a Start Game button taking the user to the game page. The user can also click on the level of their choice and play the game. The Start Game button takes users to the default Easy level of the game. The The game is made up of a single page containing a header, a score panel that keeps tabs of performance indicators such as the time, the number of moves and the current star rating of the user, depending on the performance, and also contains the reset button.
The game board is made up of a deck division containing cards based on the level, which were created dynamically in javascript. Each card consists of a front face and a backface. On card hover, the card background lightens up, and on card click, the card flips 180 degrees and reveals the image behind it, which the user then needs to memorise to improve performance.
A "Win-Game" Modal appears in the center of the screen upon completion of the game, providing feedback concerning grade, star rating and time taken to complete the game.
The deck of cards was designed using CSS grid, in order to ensure responsiveness.
Fonts used were Exo 2 and quicksand as they are very readable and game-friendly, conveying a slight comical feel which is appropriate to the goal of the game.
Game Logic
-
An array that stores the image paths, which will be assigned to the cards and displayed on their backfaces.
-
An array that stores opened cards and an array that stores matched cards.
-
Function that shuffles the images array when the game is loaded
-
A function that initiates the game which invokes the shuffle function, assigns random image onto each individual card and appends cards to the deck.
-
A timer function which is called in the card eventListener that updates the innerHTML every 1 second interval from the moment a card is clicked.
-
A stopTime function that clears the time function interval.
-
A reset function that resets all global variables and the content of HTML elements (timer, stars, moves, and their innerHTML) and empties all arrays.
-
A movesCounter function that updates the number of moves made.
-
A function that updates the star rating depending on the number of moves the player has made to complete the Game.
-
The number of starts will decrease the more moves a player makes.
-
A function that compares two cards in the openedCards array when its length is 2, and decides whether they're a match or a noMatch.
-
If they match, they will be pushed to the matched cards array, otherwise they will be removed from the openedCards array.
-
A function that fetches the player stats, and provides appropriate feedback based on the stats.
-
A function that displays the win-game modal.
-
A Win-game function that displays the win-game modal when game is completed, and calls the stats function and stoptimer function.
-
A function that handles clicked cards, applies flip animation, plays audio, reveals backface and adds card content to openedCards array.
User Stories
As a user, I would like to:
- See a visually appealing, intuitive, challenging, fun game!
- I want to be rated based on my performance
- Click on any card as first card and clicked card should turn.
- Click any card as second card and clicked card should turn.
- Want to restart the game at any time.
- Want the game to be responsive so I can play on both mobile and desktop devices..
- The game to have a Halloween theme to match the title
- Get confirmation and performance feedback when the game is completed.
- Want to play at different difficulty levels.
- See a main menu so that I can choose to start the game or view instructions
Features
Existing features
Home
- Intuitve instructions modal.
- Call to action: Encourage the user to take action. In the case of the home page, start the game.
Game page
- Game cards: clickable, and turn on click.
- Game logic: in case there is a match, the cards animate and remain visible.
- Moves counter: after each move (when two cards turned) the counter updates.
- Game over modal.
- Congratulations header.
- Call to action: encourage the user to take action. In this case restart the game.
- Evaluation/feedback messages: depending on performance.
- Call to action: Encourage the user to take action. In this case to try again and beat your best score.
- Reset score: Restart the game again at any stage.
Features that can be implemented
- High all-time board: show all time statistics of all users.
- Auditory cues to assist memorisation.
- Timed mode: add a timer to make the game more challenging, i.e. finish game before timer runs out.
Technologies Used
- HTML
- CSS
- Javascript
- Google Fonts
- Font Awesome Library
- Chrome Developer Tools
- Markup Validation Service
- CSS Validation Service
- JSHint for testing JS code
- Am I responsive
- Gitpod.io - for writing the code. Using the command line for committing and pushing to GitHub
- GitHub - Used to host repository
- GIT - for version control of the project.
Responsiveness
As a backup to using Chrome developer tools to check for responsiveness across multiple devices, I have also used http://ami.responsivedesign.is and was very pleased with the outcome, and the game layout across various screen sizes. -->
Setup Instructions for Local:
- Clone the repository Git clone git@github.com:sejal-bansal/8710-project-game.git
- Change your current directory to the game's directory.
- Open the index.html file using a web browser to play the game locally.
Deployment
Netlify
To publish the website:
- Install netlify using cli
- Enter the command netlify login on terminal
- It will take you to the netlify account, login using your github credentials
- Select the repository to be deployed
- Click on Deploy Site, Netlify will then pull the latest code from the selected branch and deploy it
- After deployment, a unique Netlify URL will be provided, such as https://witchy-pairings.netlify.app/.
- Click on the link to access the deployed game
Credits
- W3C schools
- Mozilla Developer Networks
- Flaticon.com for the all images used in the project
- Kris DeBruine Media - How to shuffle an array
- Adam Khoury - Visualising the Fisher-Yates shuffle method
- FreeCodeCamp.org for tutorials regarding breaking down Memory game logic
- Sandra Israel's Memory game process for inspiration
- Flip Cards based on W3C flip card tutorial
- SVG Backgrounds for free customisable SVG Backgrounds.
- CSS gradient generator
- Game reference