No description, website, or topics provided.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Failed to load latest commit information.
css
images
js
README.md
index.html
memoryBoard.png
memoryDifficulty.png

README.md

Memory

Classic memory game in which a player tries to match overturned cards in pairs.

Github Link:

Memory GitHub

Technologies used:

Languages:

  • JavaScript
  • HTML5
  • CSS

Frameworks:

  • jQuery
  • Bootstrap

Code snippets:

Gameplay:

$('button').click(function(){
        gridSize = $(this).attr("diff"); // We made this attribute up just for this purpose.

        cards.map((card, index)=>{
            cardsToUse.push(card, card); // So we have 2 of each card.
        })

        var memoryHTML = "";
        for(let i = 0; i < gridSize; i++){
            memoryHTML += `<div class="card col-sm-3">`;
                memoryHTML += `<div class="card-holder">`; // Indent for our own purposes.
                    memoryHTML += `<div class="card-front">${cardsToUse[i]}</div>`;
                    memoryHTML += `<div class="card-back"></div>`;
                memoryHTML += `</div>`;
            memoryHTML += `</div>`;
        }
        $('.mg-stuff').html(memoryHTML);

        $('.card-holder').click(function(){
            $(this).addClass('flip');
            // A card just flipped over.
            // Is there another one turned over already?
            // - If not, do nothing.
            // - If so, check and see if they match.

            var cardsUp = $('.flip');
            if(cardsUp.length === 2){
                // 2 cards up. Check. The only way the length can be 2 is if 2 elements have a class of 'flip'.
                var card1 = cardsUp[0];
                var card2 = cardsUp[1];
                if(card1.innerHTML === card2.innerHTML){
                    // MATCH!
                    cardsUp.addClass('matched');
                    cardsUp.removeClass('flip');
                }else{
                    // not a match
                    cardsUp.removeClass('flip');
                    cardsUp.addClass('temp-flip'); // in case someone clicks quickly, let's replace 'flip' with 'temp-flip'
                    setTimeout(()=>{
                        cardsUp.removeClass('temp-flip');
                    }, 1500);
                }
            }
        });
    });

Card-flip CSS:

img{
    /*Keep the image inside the parent no matter what.*/
    max-width: 100%;
}

/*Card is the grandparent and needs perspective.
This doesn't make card 3d, but everything else.*/
.card{
    perspective: 800px;
    border: 2px solid black;
    height: 300px;
}

.card-holder{
    position: relative;
    transform-style: preserve-3d;
    transition: 1s all;
    cursor: pointer;
}

.card-front, .card-back{
    position: absolute;
    top: 0;
    left: 0;
    backface-visibility: hidden; /*So we cannot see it when flipped.*/
}

.card-front{
    transform: rotateY(180deg);
}

.card-back{
    background: url('../images/logo-bw.png') no-repeat 50% 50%;
    height: 300px;
    width: 100%;
}

.flip, .temp-flip{
    transform: rotateY(-180deg);
}

.matched{
    transform: rotateY(540deg);
}

Screenshots:

User can choose between three difficulty levels: Difficulty Board