Alright, time for another JavaScript exercise today! I asked for a game and here is what I got from ChatGPT (as always my code and solution are below)
Exercise: Memory Matching Game
The Memory Matching Game is a classic card game where all cards are laid face down, and two cards are flipped face up over each turn. The objective of the game is to turn over pairs of matching cards. It's an excellent exercise for practicing JavaScript, HTML, and even CSS for styling.
Features to Implement:
-
Game Setup:
- Create a grid layout using HTML and CSS. This will be the game board.
- Use an array to store card information, including matched pairs. Each pair should have a unique identifier.
-
Card Flipping Logic:
- Implement a function to flip a card. This should change the visual representation of the card to reveal its face.
- Ensure that no more than two cards can be flipped over at any given time.
-
Match Checking:
- After flipping two cards, check if they match. If they do, keep them face up.
- If the cards do not match, flip them back over after a short delay.
-
Win Condition:
- The game is won when all pairs have been correctly matched.
- Display a message to the player when they win the game.
-
Reset Functionality:
- Allow the player to reset the game at any time.
Basic Implementation Steps:
-
HTML/CSS:
- Create a simple grid layout with cards using
<div>elements. Use classes to differentiate between face-down and face-up cards. - Style the cards and the game board with CSS for a pleasant user interface.
- Create a simple grid layout with cards using
-
JavaScript:
- Initialize the game by randomly placing the card pairs on the board.
- Attach event listeners to cards for the flip action.
- Implement the logic to handle matches and determine the game's end.
My Code
… Turns out this is way over my head. I even don’t know how to make the div grid structure, so instead of doing it I got the first steps from ChatGPT and learned from them.
Here is a code that just allows me to show 2 cards and flip them without doing anything, and below I list a few learnings I had
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Exerise: Memory Matching Game</title>
<style>
.game-board {
display: grid;
grid-template-columns: repeat(4, 1fr);
/* Adjust the number of columns based on your preference */
gap: 10px;
/* Space between cards */
max-width: 600px;
/* Adjust based on your preference */
margin: auto;
/* Center the game board */
}
.card {
background-color: #f0f0f0;
/* Card's back color */
height: 150px;
/* Adjust based on your preference */
display: flex;
justify-content: center;
align-items: center;
cursor: pointer;
/* Change cursor on hover */
border-radius: 10px;
/* Optional: round corners */
perspective: 1000px;
/* Gives a 3D effect */
}
.card-inner {
width: 100%;
height: 100%;
transition: transform 0.6s;
transform-style: preserve-3d;
position: relative;
}
.card-front,
.card-back {
width: 100%;
height: 100%;
backface-visibility: hidden;
/* Hides the back side of the card when it is facing away */
position: absolute;
top: 0;
left: 0;
border-radius: 10px;
}
.card-front {
background: #f7adad;
/* Front face color */
color: black;
/* Text color */
display: flex;
justify-content: center;
align-items: center;
transform: rotateY(180deg);
/* Initially flipped to show the back side */
}
.card-back {
background-color: #f0f0f0;
/* Adjust to match your card back color */
border-radius: 10px;
}
.is-flipped {
transform: rotateY(180deg);
}
</style>
</head>
<body>
<div id="gameBoard" class="game-board">
<div class="card" data-card-id="1">
<div class="card-inner">
<div class="card-front">card 1</div>
<div class="card-back"></div>
</div>
</div>
<div class="card" data-card-id="2">
<div class="card-inner">
<div class="card-front">card 2</div>
<div class="card-back"></div>
</div>
</div>
</div>
<script>
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('click', function () {
card.querySelector('.card-inner').classList.toggle('is-flipped');
});
});
</script>
</body>
</html>
Learnings
- While the HTML is all really straight for me, I really need to learn more about CSS. Grid pattern, animation, etc. It’s not all JavaScript but a lost just CSS. I should learn it.
-
is-flippedis super interesting. First of all how it looks in CSS.is-flipped {transform: rotateY(180deg);}, but then also in JavaScriptcard.querySelector('.card-inner').classList.toggle('is-flipped');. This kind of movement is what makes modern websites look great, so I also need to learn more about this
That’s basically it. If anyone of you knows great practice material for this kind of stuff I’d appreciate if you could share in a comment :D
Have a great day!
Top comments (0)