-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy pathfruitmatch.html
220 lines (199 loc) · 7.1 KB
/
fruitmatch.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
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
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Game</title>
<style>
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}
.game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-gap: 10px;
}
.card {
width: 100px;
height: 100px;
background-color: #fff;
border: 2px solid #ccc;
border-radius: 8px;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
cursor: pointer;
}
.flipped {
background-color: #ccc;
}
#timer {
margin-top: 10px;
font-size: 20px;
font-weight: bold;
}
</style>
</head>
<body>
<div class="game-board" id="gameBoard">
<!-- The cards will be generated dynamically using JavaScript -->
</div>
<div id="timer"></div>
<h1>How to Play Memory Game</h1>
<ol>
<li><strong>Objective:</strong> The objective of the memory game is to match all the pairs of cards on the game board.</li>
<li><strong>Preparation:</strong>
<ul>
<li>Gather friends or family to play with you or play solo.</li>
<li>Open the Memory Game on a computer or mobile device with a compatible web browser.</li>
</ul>
</li>
<li><strong>Game Setup:</strong>
<ul>
<li>A grid of faced-down cards will be displayed on the screen, each containing a random word.</li>
<li>The cards are shuffled, so their positions are random.</li>
</ul>
</li>
<li><strong>Game Rules:</strong>
<ul>
<li>The cards can be flipped by clicking on them one by one.</li>
<li>When a card is clicked, it will briefly show the word it contains for 2 seconds.</li>
<li>After 2 seconds, the card will flip back to its faced-down position.</li>
<li>The goal is to remember the positions of the cards and match the ones with the same word.</li>
</ul>
</li>
<li><strong>Gameplay:</strong>
<ul>
<li>Click on any two cards to flip them.</li>
<li>If the two flipped cards have the same word, they will remain face up, and you have successfully found a matching pair.</li>
<li>If the two flipped cards have different words, they will be flipped back to faced-down position after 2 seconds.</li>
<li>Keep flipping cards to find matching pairs until all pairs are successfully matched.</li>
</ul>
</li>
<li><strong>Tips:</strong>
<ul>
<li>Pay attention to the positions of the cards when they are briefly shown. Try to memorize the words and their positions.</li>
<li>As you flip more cards, your memory will be tested, and you will improve your matching skills.</li>
</ul>
</li>
<li><strong>Winning the Game:</strong>
<ul>
<li>The game ends when all pairs of cards are successfully matched.</li>
<li>A congratulatory message will appear, displaying the time it took you to complete the game.</li>
</ul>
</li>
<li><strong>Try Again:</strong>
<ul>
<li>If you want to play again, simply refresh the page or start a new game from the beginning.</li>
</ul>
</li>
<li><strong>Have Fun:</strong>
<ul>
<li>The Memory Game is a fun way to challenge and improve your memory skills. Play as many times as you like and enjoy the process of finding matching pairs!</li>
</ul>
</li>
</ol>
<script>
// List of words to use in the game
var words = [
'apple', 'banana', 'orange', 'grape', 'kiwi', 'strawberry', 'mango', 'pear'
];
// Double the words to create matching pairs
var wordsForGame = words.concat(words);
// Shuffle the words randomly
function shuffle(array) {
var currentIndex = array.length, temporaryValue, randomIndex;
while (currentIndex !== 0) {
randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = array[currentIndex];
array[currentIndex] = array[randomIndex];
array[randomIndex] = temporaryValue;
}
return array;
}
// Create and display the cards on the game board
function createGameBoard() {
var gameBoard = document.getElementById('gameBoard');
wordsForGame = shuffle(wordsForGame);
for (var i = 0; i < wordsForGame.length; i++) {
var card = document.createElement('div');
card.className = 'card';
card.textContent = wordsForGame[i];
card.addEventListener('click', flipCard);
gameBoard.appendChild(card);
}
}
var firstCard = null;
var secondCard = null;
var lockBoard = false;
var numPairs = 0;
var startTime = null;
// Function to flip a card and check for a match
function flipCard() {
if (lockBoard) return;
if (this === firstCard) return;
this.classList.add('flipped');
if (!firstCard) {
firstCard = this;
} else {
secondCard = this;
checkForMatch();
}
}
// Function to check if the two flipped cards match
function checkForMatch() {
var isMatch = firstCard.textContent === secondCard.textContent;
isMatch ? handleMatch() : unflipCards();
}
// Function to handle a matching pair
function handleMatch() {
firstCard.removeEventListener('click', flipCard);
secondCard.removeEventListener('click', flipCard);
numPairs++;
if (numPairs === words.length) {
var endTime = new Date();
var timeTaken = (endTime - startTime) / 1000; // Time in seconds
alert('Congratulations! You matched all the pairs in ' + timeTaken + ' seconds.');
location.reload()
}
resetBoard();
}
// Function to unflip the cards if they don't match
function unflipCards() {
lockBoard = true;
setTimeout(function () {
firstCard.classList.remove('flipped');
secondCard.classList.remove('flipped');
resetBoard();
}, 2000); // Show the words for 2 seconds
}
// Function to reset the flipped cards
function resetBoard() {
[firstCard, secondCard] = [null, null];
lockBoard = false;
}
// Function to start the timer
function startTimer() {
startTime = new Date();
setInterval(updateTimer, 1000); // Update the timer every second
}
// Function to update the timer display
function updateTimer() {
var currentTime = new Date();
var timeElapsed = (currentTime - startTime) / 1000; // Time in seconds
document.getElementById('timer').textContent = 'Time: ' + timeElapsed + ' seconds';
}
// Initialize the game board and start the timer when the page loads
createGameBoard();
startTimer();
</script>
</body>
</html>