I need help fixing my code

Question

0.00/5 (No votes)

See more:

I am new to coding and I'm trying to replicate a memory game with my own images but I cant get things to run. can anyone help? thres probably a lot wrong but just getting the game to start would be something to work from.

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>
       recycle Memory Game
    </title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <section class="recycle memory game">
        <div class="memory card">
            <img class="face of card" src=" img/cup-9.png" dataset-framework="cup"
                 alt="cup" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/cup-9.png" dataset-framework="cup"
                 alt="cup" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/green-leaves-54.png" dataset-framework="leaves"
                 alt="leaves" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/green-leaves-54.png" dataset-framework="leaves"
                 alt="leaves" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/recycle-bin-20.png" dataset-framework="recycle"
                 alt="recycle" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/recycle-bin-20.png" dataset-framework="recycle"
                 alt="recycle" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>

        <div class="memory card">
            <img class="face of card" src=" img/trash-bag.png" dataset-framework="trash"
                 alt="trash" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/trash-bag.png" dataset-framework="trash"
                 alt="trash" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/trash-can-43.png" dataset-framework="trashcan"
                 alt="trashcan" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/trash-can-43.png" dataset-framework="trashcan"
                 alt="trashcan" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/battery-icon.png" dataset-framework="battery"
                 alt="battery" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
        <div class="memory card">
            <img class="face of card" src=" img/battery-icon.png" dataset-framework="battery"
                 alt="battery" />
            <img class="back of card" src="img/earth-29.png"
                 alt="earth" />
        </div>
       

    </section>

    <script src="scripts.js"></script>
</body>
</html>

JavaScript

const card = document.querySelectorAll('card');

let hasFlippedCard = false;
let lockgame = false;
let firstCard, secondCard;

function flipCard() {
    if (lockgame) return;
    if (this === firstCard) return;
    this.classlist.add('flip');

    if (!hasFlippedCard) {
        //first pick
        hasFlippedCard = true;
        firstCard = this;
        return;
    }
   
        //second click
        secondCard = this;

        checkForMatch();
}

function checkForMatch() {//do cards match?
    if (firstCard.dataset.framework ===
        secondCard.dataset.framework) {
        disableCards();
        //match
        firstCard.removeEventListener('click', flipCard);
        secondCard.removeEventListener('click', flipCard);
    } else {
        unflipcards();
    }
}

function disableCards() {
    //match
    firstCard.removeEventListener('click', flipCard);
    secondCard.removeEventListener('click', flipCard);
    resetgame;
}
function unflipcards() {
    lockgame = true;
    //no match
    setTimeout(() => {
        firstCard.classlist.remove('flip');
        secondCard.classlist.remove('flip');

        resetgame = false;
    }, 1500);

}

function resetgame(){
    [hasFlippedCard, lockgame] = [false, false];
    [firstCard, secondCard] = [null, null];   
}

(function shufflecards() {
    cards.forEach(card => {
        let randomPos = Math.floor(Math.random() * 12);
        card.style.order = randomPos;
    });
})();
card.forEach(card => card.addEventListener('click' ,flipCard));

/*styles.css*/

CSS

*{
    padding:0;
    margin:0;
    box-sizing: border-box;
}

body{
    height:100vh;
    display: flex;
    background: #ffd800;
}

recycle memory game {
    height: 650px;
    width: 650px;
    margin: auto;
    display: flex;
    flex-wrap:wrap;
    perspective: 1000px;
}

card {
    height:calc(33.33% - 10px);
    width:calc(25% - 10px);
    margin:6px;
    position:relative;
    transform: scale(1);
    transform-style:preserve-3d;
    transition:transform .6s;
}
card:active{
    transform: scale(.95);
    transition: transform .6s;

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

front_of_card,
back_of_card {
    height:95%;
    width:95%;
    position:absolute;
    padding:15px;
    border-radius : 2px;
    background: #ff0000;
    backface-visibility: hidden;
}
front_of_card{
    transform: rotateY('180deg');
}

What I have tried:

I'm using vs2019 and I have no errors when I analyse or debug but when I run it the game doesn't play.

Posted 19-Aug-20 2:25am

birch2644

Updated 25-Aug-20 6:41am

Sandeep Mewara

v2

Add a Solution

Comments

Sandeep Mewara 19-Aug-20 8:39am

Currently, with limited info what you have shared, it's difficult to comment on whats going wrong.

Did you try Debugging and see if the steps are in desired sequence and holding values as you plan/expect to?

Richard MacCutchan 19-Aug-20 9:16am

"thres probably a lot wrong"
Without more information it is impossible to suggest much. You need to find a point at which you can explain what is not happening against what should be happening.

[no name] 19-Aug-20 12:22pm

Being "new to coding", this looks pretty ambitious. There seems to be a total disconnect between the HTML and the JavaScript. If you copied it, you're missing something.

1 solution

Add a Solution

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

W∴ Balboos, *GHB* · Answer 1 · 2020-08-25T06:41:00

When you say you "you can't get the thing to run" - does that mean before your changes or only after them?

If before your changes - you need to find the problem (what you're missing, probably) and this may be found through debugging (as suggested in comments).

If after your changes, undo all the changes you tried and put in ONE AT A TIME. When it stops working you know where you problem is and should be able to figure it out. Do not forget to consider that your paths are wrong relative to where the code for your page is.