23 |
24 |
25 |
26 |
27 |
28 |
29 |
30 |
31 |
32 |
33 |
34 |
35 |
36 |
37 |
38 |
39 |
40 |
41 |
42 |
43 |
44 |
45 |
46 |
47 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 |
2 | # *** The Memory Game ***
3 |
4 | ## This a functioning example project utilizing HTML, CSS, and javaScript language.
5 |
6 |
7 | The following project was built to improve memory and programming knowledge. In the program, we will be creating a display of cards, that can be selected and exposed. If they are a match, the cards will stay revealed, if they are not, they will change back to neutral color. There will be a timer counting down during the game to prompt the user to have 8 matches before game over. Every part of the is sample code of how to do the following:
8 |
9 | * Create an HTML Boilerplate for website
10 | * Manipulation of site with CSS properties
11 | * JavaScript implementation for functionality
12 | * The DOM API for efficient usability
13 | * Live Server extension to access local server environment
14 |
15 | Prerequisites:
16 | Download Visual Studio Code:
17 | A: Windows users:
18 | 1. Go to google browser and type Visual Studio Code download.
19 | - (helpful resource)[Youtube](https://www.youtube.com/watch?v=H103ryTTiVA&t=10s)
20 | 2. Click option for Windows User Installer. (latest version)
21 | 3. Open file once download is complete and click acceptance for license agreement.
22 | 4. Select location for instalment. (default will be C: drive)
23 | 5. Click next for each option (customization is optional)
24 | 6. Click to install
25 | 7. Click finish
26 | 8. Search for VScode in start menu or created shortcut to open.
27 |
28 | B. For Mac users:
29 | 1. Follow step 1
30 | 2. Click option for MacOS (latest version)
31 | 3. Follow same steps for installation.
32 |
33 | C. In VScode, create HTML, CSS and javaScript file inside Memory Game folder.
34 |
35 | D. Open extensions in VScode search and download Live Server for installation.
36 |
37 | ## Contact:
38 | https://github.com/anst314/memoryGame/settings/pages
39 |
40 | ## Known issues:
41 | Could not determine the winner by the maximum of 8 matches to win the game.
42 |
43 |
44 | ## Acknowledgments:
45 | 1. How to code a Card Matching Game - [YouTube](https://www.youtube.com/watch?v=28VfzEiJgy4).
46 | 2. Live Coding a Memory Game - [YouTube](https://www.youtube.com/watch?v=bbb9dZotsOc).
47 | 3. Sample Game Timer - [Codepen.io](https://codepen.io/awkay/pen/ExzGea).
48 | 4. Github README Template - [GitHub](https://github.com/othneildrew/Best-README-Template).
49 | 5. W3 Schools
50 |
51 |
52 |
53 |
--------------------------------------------------------------------------------
/index.js:
--------------------------------------------------------------------------------
1 | // This is for the div container
2 | const cards = document.querySelectorAll('.card');
3 |
4 | // add event handler to all cards
5 | cards.forEach((card) => {
6 | card.addEventListener('click', changeColor)});
7 |
8 | const resetBtn = document.getElementById('reset-btn');
9 | let savedCard = null;
10 | let matchedCards = new Set();
11 | let timer = null;
12 | let timeLeft = 30; // seconds
13 | let gameRunning = false;
14 | resetGame();
15 |
16 | function changeColor(e){
17 | if (!gameRunning) return;
18 | const target = e.currentTarget;
19 | if (savedCard !== null && savedCard === target) return;
20 | if (matchedCards.has(target)) return;
21 |
22 | target.className = target.className.replace('color-hidden', '');
23 | if (savedCard === null) {
24 | savedCard = target;
25 | } else {
26 | if (savedCard.className === target.className) {
27 | matchedCards.add(savedCard);
28 | matchedCards.add(target);
29 | } else {
30 | savedCard.classList.add('color-hidden');
31 | target.classList.add('color-hidden');
32 | }
33 | savedCard = null;
34 | }
35 | }
36 |
37 | // What to do when the timer runs out
38 | function gameOver() {
39 | // This cancels the setInterval, so the updateTimer stops getting called
40 | clearInterval(timer);
41 | gameRunning = false;
42 | }
43 |
44 | function updateTimer() {
45 | timeLeft = timeLeft - 1;
46 | if(timeLeft >= 0)
47 | document.getElementById('timer').innerHTML = timeLeft;
48 | else {
49 | gameOver();
50 | }
51 | }
52 |
53 | // The button has an on-click event handler that calls this
54 | function start() {
55 | if (gameRunning) return;
56 |
57 | // setInterval is a built-in function that will call the given function
58 | // every N milliseconds (1 second = 1000 ms)
59 | timer = setInterval(updateTimer, 1000);
60 |
61 | gameRunning = true;
62 |
63 | // It will be a whole second before the time changes, so we'll call the update
64 | // once ourselves
65 | updateTimer();
66 | }
67 |
68 | resetBtn.addEventListener('click', () => {
69 | resetGame();
70 | });
71 |
72 | function resetGame() {
73 | timeLeft = 30;
74 | document.getElementById('timer').innerHTML = timeLeft;
75 | cards.forEach((card) => {
76 | if (matchedCards.has(card) ||
77 | (savedCard != null && savedCard === card)) {
78 | card.classList.add('color-hidden');
79 | }
80 | });
81 | matchedCards.clear();
82 | savedCard = null;
83 | }
84 |
85 |
--------------------------------------------------------------------------------