Scribd Logo
Upload

Welcome to Scribd!

  • Memory Card Game Webpage Code

    Uploaded by

    mongggo
    22 views2 pages
    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.

    Original Description:

    Original Title

    Memory Card Game webpage code

    Copyright

    © © All Rights Reserved

    Available Formats

    DOCX, PDF, TXT or read online from Scribd

    Did you find this document useful?

    Is this content inappropriate?

    Report this Document
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    22 views2 pages

    Memory Card Game Webpage Code

    Uploaded by

    mongggo
    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.

    Copyright:

    © All Rights Reserved
    Download as DOCX, PDF, TXT or read online from Scribd
    Flag for inappropriate content
    Download as docx, pdf, or txt
    of 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