Scribd
Upload
63 views

Memory Card Game Webpage Code

This document contains the code for a memory card game webpage including HTML, CSS, and JavaScript. The HTML defines the basic page structure and links the CSS for styling and the JavaScript for interactivity. The CSS styles the cards, matched cards, and flipped cards. The JavaScript handles creating the card elements, shuffling the cards, flipping cards on click, checking for matches, and resetting the game when complete. When a player finds all the matches, an alert pops up to congratulate them on winning the game.

Uploaded by

mongggo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
63 views

Memory Card Game Webpage Code

This document contains the code for a memory card game webpage including HTML, CSS, and JavaScript. The HTML defines the basic page structure and links the CSS for styling and the JavaScript for interactivity. The CSS styles the cards, matched cards, and flipped cards. The JavaScript handles creating the card elements, shuffling the cards, flipping cards on click, checking for matches, and resetting the game when complete. When a player finds all the matches, an alert pops up to congratulate them on winning the game.

Uploaded by

mongggo
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 2

Memory Card Game: webpage code

index.html:

htmlCopy code
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta
name="viewport" content="width=device-width, initial-scale=1.0"> <title> Memory Card
Game </title> <link rel="stylesheet" href="styles.css"> </head> <body> <div
class="memory-game"> <div class="cards" id="card-container"></div> </div> <script
src="script.js"></script> </body> </html>

styles.css:

cssCopy code
body { font-family : 'Arial' , sans-serif; background-color : #f4f4f4 ; margin : 0 ; display :
flex; align-items : center; justify-content : center; height : 100vh ; } .memory-game {
display : flex; flex-wrap : wrap; gap : 10px ; } .cards { display : flex; flex-wrap : wrap; }
.card { width : 100px ; height : 150px ; background-color : #ddd ; margin : 5px ; display :
flex; align-items : center; justify-content : center; font-size : 18px ; cursor : pointer;
transition : transform 0.3s ease-in-out; } .card.matched { background-color : #8aff8a ;
cursor : default; } .card.flipped { transform : rotateY ( 180deg ); } .card img { max-width :
100% ; max-height : 100% ; }

script.js:

jsCopy code
const cardsContainer = document . getElementById ( 'card-container' ); let flippedCards = [];
let matchedCards = []; const cardData = [ { id : 1 , img : 'image1.jpg' }, { id : 2 , img :
'image2.jpg' }, { id : 3 , img : 'image3.jpg' }, { id : 4 , img : 'image4.jpg' }, // Add more card
data as needed ]; // Duplicate the cards to create pairs const cardPairs =
[...cardData, ...cardData]; shuffleArray (cardPairs); createCards (); function createCards ()
{ cardPairs. forEach ( card => { const cardElement = document . createElement ( 'div' );
cardElement. classList . add ( 'card' ); cardElement. dataset . id = card. id ; const cardFront =
document . createElement ( 'div' ); cardFront. classList . add ( 'card-front' ); const cardBack =
document . createElement ( 'div' ); cardBack. classList . add ( 'card-back' );
cardBack. style . backgroundImage = `url('${card.img}')` ;
cardElement. appendChild (cardFront); cardElement. appendChild (cardBack);
cardElement. addEventListener ( 'click' , flipCard);
cardsContainer. appendChild (cardElement); }); } function flipCard () { if
(flippedCards. length < 2 && ! this . classList . contains ( 'flipped' )) {
this . classList . add ( 'flipped' ); flippedCards. push ( this ); if (flippedCards. length === 2 ) {
setTimeout (checkMatch, 500 ); } } } function checkMatch () { const [card1, card2] =
flippedCards; if (card1. dataset . id === card2. dataset . id ) { card1. classList . add ( 'matched' );
card2. classList . add ( 'matched' ); matchedCards. push (card1, card2); } else
{ card1. classList . remove ( 'flipped' ); card2. classList . remove ( 'flipped' ); } flippedCards = [];
if (matchedCards. length === cardPairs. length ) { setTimeout ( () => {
alert ( 'Congratulations! You won!' ); resetGame (); }, 500 ); } } function resetGame ()
{ cardsContainer. innerHTML = '' ; flippedCards = []; matchedCards = [];
shuffleArray (cardPairs); createCards (); } function shuffleArray ( array ) { for ( let i =
array. length - 1 ; i > 0 ; i--) { const j = Math . floor ( Math . random () * (i + 1 )); [array[i],
array[j]] = [array[j], array[i]]; } }

This code sets up a simple memory card game with a grid of cards. When you click
on a card, it flips over, and you try to find matching pairs. The game is won when all
pairs are matched. You can replace the image URLs in the cardData array with your
own images.

You might also like