JB
jQuery Lab Task
Task Title: Memory Matching Game: Flip and Match the Pairs
Objective
Students will build a Memory Matching Game where:
• Players flip cards to find matching pairs
• Game logic tracks matched pairs
• Timer and moves are recorded
• Sound effects enhance gameplay
Skills Practiced:
• jQuery selectors and events
• DOM manipulation
• Game state management
• Animations & effects
• HTML5 Audio API
Problem Statement
Create a Memory Matching Game with the following functionality:
1. Display a grid of face-down cards.
2. When a player clicks a card:
• Card flips to reveal its symbol/image
• Only 2 cards can be flipped at a time
3. If the 2 flipped cards match:
• Keep them face up
• Play a “match” sound
4. If they don’t match:
• Flip them back after 1 second
• Play a “wrong” sound
5. Track:
JB • Number of moves
• Timer (optional)
6. Display a “You Win!” message when all pairs are matched
Starter HTML (Provide to Students)
<div id="gameHeader">
<h2>Memory Matching Game</h2>
<p>Moves: <span id="moves">0</span></p>
<p>Time: <span id="timer">0</span> seconds</p>
</div>
<div id="gameBoard" style="width:400px; display:flex; flex-
wrap:wrap;"></div>
<div id="winMessage" style="display:none;">
<h2>You Win! </h2>
</div>
<audio id="matchSound" src="match.mp3"></audio>
<audio id="wrongSound" src="wrong.mp3"></audio>
Starter CSS (optional)
.card {
width: 80px;
height: 80px;
margin: 5px;
background-color: #333;
display:flex;
justify-content:center;
align-items:center;
font-size:40px;
color: #fff;
cursor:pointer;
border-radius:8px;
user-select:none;
}
.[Link] {
background-color: #fff;
color: #333;
}
JB
Functional Requirements
1. Generate Cards Dynamically
• 8–12 pairs of cards
• Shuffle the cards randomly
2. Flip Logic
• Clicking a card flips it
• Only 2 cards can be flipped at a time
3. Match Checking
• If flipped cards match → keep flipped & play match sound
• If flipped cards do not match → flip back & play wrong sound
4. Move Counter & Timer
• Moves increase each time player flips 2 cards
• Optional: start timer on first flip
5. Win Condition
• All pairs matched → display “You Win” message
• Stop timer
6. Animations
• Smooth flip (e.g., fadeIn/fadeOut or CSS transform)
Bonus Features
• Add difficulty levels (easy, medium, hard)
• Use images instead of emojis for cards
• Add leaderboard for moves/time
• Add background music toggle
Learning Outcomes
After completing this task, students will:
• Understand game state management in jQuery
• Handle click events and conditional logic
• Manipulate DOM dynamically
JB
• Implement simple animations and sounds
• Learn problem-solving skills for interactive applications