Create Memory Game using HTML, CSS, JAVASCRIPT
Create Memory Game using HTML, CSS, JAVASCRIPT
Introduction
Welcome to an exciting journey into the world of memory games! In this blog, we'll explore the fascinating realm of creating a Memory Game using HTML, CSS, and JavaScript. Whether you're a seasoned developer or just starting, this guide will walk you through the process of building an interactive and visually appealing Memory Game.
The Memory Game Logic
Card Setup
The first step in creating our Memory Game is to set up the cards. We'll use HTML to define a grid of cards, and each card will have a hidden value. In the JavaScript logic, we'll randomly assign pairs of values to the cards, ensuring a challenging yet fair game. HTML👇
<!-- Declares this document to be HTML5 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Memmory Game</title>
<link rel="stylesheet" href="css/style.css" />
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
rel="stylesheet"
/>
<script defer src="script.js"></script>
<style>
.mdl_box {
position: absolute;
display: flex;
}
.mdl {
margin-left: 30px;
}
</style>
</head>
<body>
<div class="head">
<h2>SKIN SELECTION GAME</h2>
<div class="score">Score: <span>0</span></div>
</div>
<div class="container">
<div class="cell">
<div class="front" data-index="1">
<img src="css/img/assets/01.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="2">
<img src="css/img/assets/2.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="3">
<img src="css/img/assets/3.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="4">
<img src="css/img/assets/4.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="5">
<img src="css/img/assets/5.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="6">
<img src="css/img/assets/6.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="7">
<img src="css/img/assets/7.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="8">
<img src="css/img/assets/8.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="1">
<img src="css/img/assets/01.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="2">
<img src="css/img/assets/2.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="3">
<img src="css/img/assets/3.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="4">
<img src="css/img/assets/4.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="5">
<img src="css/img/assets/5.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="6">
<img src="css/img/assets/6.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="7">
<img src="css/img/assets/7.png" alt="" />
</div>
<div class="back"></div>
</div>
<div class="cell">
<div class="front" data-index="8">
<img src="css/img/assets/8.png" alt="" />
</div>
<div class="back"></div>
</div>
</div>
<div class="box" id="box">
<div style="height: 85px">
<!-- <span id="won" class="match-font"></span> -->
<div class="mdl_box">
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="a" >
<img src="css/img/assets/01.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="b" >
<img src="css/img/assets/2.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="c" >
<img src="css/img/assets/3.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="d" >
<img src="css/img/assets/4.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="e" >
<img src="css/img/assets/5.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="f" >
<img src="css/img/assets/6.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="g" >
<img src="css/img/assets/7.png" alt="" class="mdl"/>
</div>
</div>
<div class="front" style="display: contents;">
<div data-index="1" style="display: none" id="h" >
<img src="css/img/assets/8.png" alt="" class="mdl"/>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
Designing a Visual Delight
Responsive Layout
Aesthetics play a crucial role in user engagement. With CSS, we'll craft a visually appealing and responsive layout that adapts seamlessly to various screen sizes. The grid of cards will be displayed elegantly, ensuring an immersive experience on both desktop and mobile devices.
Animations and Transitions
To enhance the user experience, we'll incorporate subtle animations and transitions using CSS. Flipping cards, smooth transitions between states, and a visually pleasing design will captivate players, making the Memory Game not just a challenge but also a delight for the eyes.
Custom Styling
Personalize your Memory Game with custom styling. Choose color schemes, fonts, and iconography that resonate with your audience. The design isn't just about making it look good; it's about creating a memorable experience that users will want to revisit.
CSS👇
/**
* CSS styles for memory game page.
*
* Sets up overall page layout, fonts, colors, etc.
* Defines grid layout for game board.
* Animations and transitions for flipping cards.
* Responsive styles for different screen sizes.
*/
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
body {
background-image: url(img/assets/bgImage.png);
}
.head {
max-width: 480px;
margin: auto;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
margin-top: 20px;
font-family: "Orbitron", sans-serif;
color: #333;
}
.score {
margin-top: 10px;
}
.match-font {
display: flex;
margin-left: 235px;
padding-top: 35px;
font-size: 33px;
font-family: "Orbitron";
font-weight: 900;
color: antiquewhite;
}
.container {
max-width: 960px;
display: grid;
grid-template-columns: repeat(3, auto);
gap: 1rem;
margin: auto;
padding: 20px;
}
.cell div {
height: 130px;
border-radius: 4px;
}
.cell {
position: relative;
cursor: pointer;
}
.front {
position: absolute;
height: 100%;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border: 2px solid #a6a6a6;
background-color: #f2f2f2;
transform: rotateY(90deg);
transition: all 0.5s;
}
.back {
background-color: #333;
}
img {
height: 120px;
width: 85px;
}
.flip {
transform: rotateY(0deg);
}
.match {
transform: rotateY(0deg);
}
.show {
transform: rotateY(0deg);
}
.box {
width: 60%;
background-image: url(img/assets/gb@4x.png);
background-size: cover;
background-repeat: no-repeat;
height: 100px;
margin: auto;
}
.box img {
}
@media screen and (min-width: 770px) {
.head {
max-width: 760px;
}
.container {
grid-template-columns: repeat(4, auto);
}
.cell div {
height: 170px;
}
}
Game Mechanics
When a player clicks on a card, we'll reveal its hidden value. If the player clicks on a second card, we'll compare the values. If they match, the cards stay open; if not, we'll hide them again. The game continues until all pairs are matched. JavaScript will handle these interactions, creating a seamless and enjoyable gaming experience. JAVASCRIPT👇
/**
* This code implements the memory card matching game functionality.
*
* It selects DOM elements, shuffles the card order randomly, handles
* card click events, checks for matches, updates the score, and handles
* flip animations.
*
* The key functions are:
*
* - suffleImage() - shuffles card order randomly
*
* - clicking() - adds click handlers to cards
*
* - match() - checks if 2 clicked cards match and handles scoring
*/
const card = document.querySelectorAll(".cell");
const front = document.querySelectorAll(".front");
const container = document.querySelector(".container");
const score = document.querySelector(".score span");
const box = document.querySelector(".box");
suffleImage();
clicking();
function suffleImage() {
card.forEach((c) => {
const num = [...Array(card.length).keys()];
const random = Math.floor(Math.random() * card.length);
c.style.order = num[random];
});
}
function clicking() {
for (let i = 0; i < card.length; i++) {
front[i].classList.add("show");
setInterval(() => {
front[i].classList.remove("show");
}, 2000);
card[i].addEventListener("click", () => {
front[i].classList.add("flip");
const filppedCard = document.querySelectorAll(".flip");
if (filppedCard.length == 2) {
container.style.pointerEvents = "none";
setInterval(() => {
container.style.pointerEvents = "all";
}, 1000);
match(filppedCard[0], filppedCard[1]);
}
});
}
}
function match(cardOne, cardTwo) {
if (cardOne.dataset.index == cardTwo.dataset.index) {
score.innerHTML = parseInt(score.innerHTML) + 1;
cardOne.classList.remove("flip");
cardTwo.classList.remove("flip");
cardOne.classList.add("match");
cardTwo.classList.add("match");
box.classList.add("match");
// document.getElementById('won').innerHTML = "Match Image";
if (cardTwo.dataset.index == "1") {
document.getElementById("a").style.display = "block";
}
if (cardTwo.dataset.index == "2") {
document.getElementById("b").style.display = "block";
}
if (cardTwo.dataset.index == "3") {
document.getElementById("c").style.display = "block";
}
if (cardTwo.dataset.index == "4") {
document.getElementById("d").style.display = "block";
}
if (cardTwo.dataset.index == "5") {
document.getElementById("e").style.display = "block";
}
if (cardTwo.dataset.index == "6") {
document.getElementById("f").style.display = "block";
}
if (cardTwo.dataset.index == "7") {
document.getElementById("g").style.display = "block";
}
if (cardTwo.dataset.index == "8") {
document.getElementById("h").style.display = "block";
}
} else {
setTimeout(() => {
cardOne.classList.remove("flip");
cardTwo.classList.remove("flip");
}, 1000);
}
}
Winning the Game
To add an extra layer of excitement, we'll implement a winning condition. Once all pairs are matched, a congratulatory message will appear, celebrating the player's success. This enhances the overall user experience and provides a sense of accomplishment. ✌HAPPY CODIND✌
Comments
Post a Comment