Memory Match Game
Let’s go with **Memory Match** (Game #2 from the list). If you’d like the code for the others, let me know, and I can provide them one at a time!
---
### **Memory Match Game**
#### **HTML (index.html)**
```html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Memory Match Game</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Memory Match Game</h1>
<p>Find all matching pairs!</p>
<div id="game-board"></div>
<p>Moves: <span id="move-count">0</span></p>
<button id="reset-button">Reset</button>
<script src="script.js"></script>
</body>
</html>
```
---
#### **CSS (styles.css)**
```css
body {
font-family: Arial, sans-serif;
text-align: center;
background-color: #f0f0f0;
margin: 0;
padding: 20px;
}
#game-board {
display: grid;
grid-template-columns: repeat(4, 100px);
grid-template-rows: repeat(4, 100px);
gap: 10px;
margin: 20px auto;
width: max-content;
}
.card {
width: 100px;
height: 100px;
background-color: #333;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 24px;
cursor: pointer;
border-radius: 10px;
transition: transform 0.3s, background-color 0.3s;
}
.card.flipped {
background-color: #007bff;
transform: rotateY(180deg);
}
.card.matched {
background-color: #33cc33;
cursor: default;
}
#reset-button {
padding: 10px 20px;
font-size: 16px;
cursor: pointer;
background-color: #007bff;
color: white;
border: none;
border-radius: 5px;
margin-top: 20px;
}
#reset-button:hover {
background-color: #0056b3;
}
```
---
#### **JavaScript (script.js)**
```javascript
const gameBoard = document.getElementById('game-board');
const moveCountDisplay = document.getElementById('move-count');
const resetButton = document.getElementById('reset-button');
let cards = [];
let flippedCards = [];
let moveCount = 0;
const cardValues = ['A', 'B', 'C', 'D', 'E', 'F', 'G', 'H', 'A', 'B', 'C', 'D', 'E', 'F', 'G', 'H'];
// Initialize the game
function initGame() {
moveCount = 0;
moveCountDisplay.textContent = moveCount;
cards = shuffleArray(cardValues);
renderGameBoard();
}
// Shuffle the array
function shuffleArray(array) {
return array.sort(() => Math.random() - 0.5);
}
// Render the game board
function renderGameBoard() {
gameBoard.innerHTML = '';
cards.forEach((value, index) => {
const card = document.createElement('div');
card.classList.add('card');
card.dataset.value = value;
card.dataset.index = index;
card.textContent = '';
card.addEventListener('click', flipCard);
gameBoard.appendChild(card);
});
}
// Flip a card
function flipCard() {
if (flippedCards.length < 2 && !this.classList.contains('flipped')) {
this.classList.add('flipped');
this.textContent = this.dataset.value;
flippedCards.push(this);
if (flippedCards.length === 2) {
moveCount++;
moveCountDisplay.textContent = moveCount;
checkMatch();
}
}
}
// Check if the flipped cards match
function checkMatch() {
const [card1, card2] = flippedCards;
if (card1.dataset.value === card2.dataset.value) {
card1.classList.add('matched');
card2.classList.add('matched');
flippedCards = [];
checkWin();
} else {
setTimeout(() => {
card1.classList.remove('flipped');
card2.classList.remove('flipped');
card1.textContent = '';
card2.textContent = '';
flippedCards = [];
}, 1000);
}
}
// Check if all cards are matched
function checkWin() {
const matchedCards = document.querySelectorAll('.matched');
if (matchedCards.length === cards.length) {
alert(`You won in ${moveCount} moves!`);
initGame();
}
}
// Reset the game
resetButton.addEventListener('click', initGame);
// Initialize the game on page load
initGame();
```
---
### **How It Works**
1. **HTML**: Creates the structure for the game, including a game board, move counter, and reset button.
2. **CSS**: Styles the cards, game board, and buttons.
3. **JavaScript**:
- Shuffles the card values and renders the game board.
- Allows the player to flip two cards at a time to find matching pairs.
- Tracks the number of moves and checks if all pairs are matched.
- Resets the game when the player wins or clicks the reset button.
---
### **How to Run**
1. Save the code into three files: `index.html`, `styles.css`, and `script.js`.
2. Open `index.html` in Chrome.
3. Play the game by clicking on cards to find matching pairs!
---
Let me know which game you’d like me to implement next! 🎮
Comments
Post a Comment