36 Chambers Mental Agility Game (Memory)

Project Summary

This is my Module 1 DOM project for Per Scholas Software Engineering Intensive. In this project I was tasked with creating a 2 person game using html, css and javascript.

I created a memory card matching game with a take on one of my favorite rap groups, Wu-Tang Clan. In this variation, you will participate in a mental agility test for entry into the 36 chambers. You must correctly match each Wu-Tang member to successfully complete your challenge and flex your skills.

How to Play

To begin play, click the "Accept Challenge" button to begin the timer

1. click on a square to flip a card a reveal a Wu-Tang member

2. choose another square to flip that card to reveal a Wu-Tang member: if it is a match to the first Wu-Tang member revealed the cards will remain revealed on the game board OR if it is not a match, the cards will flip back over and you will choose another card to reveal another member

3. continue to flip cards and match all of the members of the Wu-Tang Clan until you have revealed all of the cards on the board! Ready to test your mental agility skills?

Hit the "Accept Challenge" button to begin!

Technologies Used

HTML

CSS

JavaScript

How I Built My Game

Before beginning my game, I needed to pinpoint the object of the game as well as the steps players would need to take to play. I mapped out the steps to the game and determined the following to create a functioning game:

1. How many cards I would need to display
2. Show back of card initially and flip on select
3. How will I randomize the display of cards
4. Only allow for two cards to be flipped at a time
5. Determine if the two flipped cards match or if not, flip back over
6. Add time interval delay to flip card back over
7. End game when all cards are flipped and matched, with no cards left
8. Display winning text box

Main Coding Function

In creating the game, the main coding function I needed to create was flipping cards and only allowing for two cards to be flipped at a time, then checking for a match and if no match flipping the cards back without resetting the cards on the gameboard. The following code proved to be the most useful.

Future Additions

Some feature that I would like to add in the future that I could not on this round due to project time constraints would be:

Ending the game after 45 moves with losing status message

Ending the game after 60 seconds with losing status message

Adding game levels where one gets chamber levels increases for difficulty level based on number of moves to successfully complete a round

On click music function looping as game starts

Adding a total high score and time with user name input values and storage

Play Now!:video_game:

https://jscardgame.netlify.app/

References

Memory Game Information: Wikipedia https://en.wikipedia.org/wiki/Concentration_(card_game)

Document.querySelector(): MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/API/Document/querySelector

Document.getElementById(): MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/API/Document/getElementById

DOMParser: MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/API/DOMParser

Fisher-Yates Shuffle Algorithm: Wikipedia https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle#The_modern_algorithm

Math.Random: MDN Web Docs https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Math/random

Math.floor: W3 Schools https://www.w3schools.com/jsref/jsref_floor.asp

Event Listeners: W3 Schools https://www.w3schools.com/js/js_htmldom_eventlistener.asp

Cubic Bezier: CSS Tricks https://css-tricks.com/advanced-css-animation-using-cubic-bezier/