Card Game: My function won't end after X amount of clicks

Question

I've been researching how to fix my issue for the past week but can't. I am creating a "click a card and it adds to score" card game but I am having trouble getting the clicks to stop after x amount of cards have already been clicked. I have created a clickCounter function that tracks the clicks and executes with every click. I have also added an isGameOver boolean to stop the function once it hits a certain amount of clicks. However, the boolean doesn't execute as I'd hoped in the clickCounter function. Long story short: I just want the game to end once x amount of cards have been clicked.

Here is the JavaScript:

let isGameOver = false;
let counter = 0;

const clickCounter = function () {
switch (counter) {
    case 0:
    case 1:
        counter += 1
        break;
    case 2:
        isGameOver; //this is where I want the game to end//
        break;  
}
    //this keeps track of the counts in console//
  console.log(`counter equals: ${counter}`);
}


//this is my function that runs everything//
const cardSelection = function () {             
randomNumber() //just a function to generate random #//

//beginning of if statement//
if(!isGameOver) {

//CARD ONE//
document.querySelector('#cardOne').addEventListener('click', function (e) {
    cardOneFront(); //this changes card appearance, ignore please//
    clickCounter(); //clickCounter is being called here//
    if (randomNums[0]) {
        scoreDisplay.innerText = `SCORE: ${scoreCount += randomNums[0]}`;
        console.log(`score just added: ${randomNums[0]}`);
    }
    this.style.pointerEvents = 'none'
});

//CARD TWO//
document.querySelector('#cardTwo').addEventListener('click', function () {
    cardTwoFront(); //this changes card appearance, ignore please//
    cardCounter(); //clickCounter is being called here//
    if (randomNums[1]) {
        scoreDisplay.innerText = `SCORE: ${scoreCount += randomNums[1]}`;
        console.log(`score just added: ${randomNums[1]}`);  
    }
    this.style.pointerEvents = 'none'
});
} //if statement ends here//
} //cardSelection function ends here//
cardSelection()

I have visualization of it too. See Here: what appears in console

I have 10+ cards but I only included two here to keep the code from being super long but the cards all have the similar code and their own individual click events. So, according to the image above, I want card three to not be clickable after counter = 2. But, as you see in the image, even though counter has equaled 2, card 3 is clickable anyways.

I hope this explanation was thorough and I appreciate any help as I am newer to coding. Also, I am coding all of this using vanilla JavaScript.

Thank you!

instead of checking if(!isGameOver) outside, you should check it inside the click handlers. because once click handlers registered it will then execute code inside of that handler. if you check it outside it will actually never check. — harpal, Sep 23 '22 at 15:28

score 1 · Answer 1 · answered Sep 23 '22 at 14:24

1

i think you need to add 'true' to case 2

break;
    case 2:
        isGameOver = true; //this is where I want the game to end//
        break;  
}

I guess you already have tried, but i dont see what else would be wrong with the code,

you can also try to add an 'else' to the code. i can only see and If(!isGameOver)

answered Sep 23 '22 at 14:24

Delano van londen

398
1
19

Hi! Thanks for replying and yes I have tried that but my third card is, unfortunately, still clickable. Idk if it's because each card has their own individual click events or what but I wouldn't think that matters. It's really brain racking as the code looks fine but it doesn't execute properly :( – Rai Taylor Sep 23 '22 at 14:33
can you also click more cards? or is 3 cards the max? – Delano van londen Sep 23 '22 at 14:34
btw. you can try to make an if statement instead of a switch, ``` if (counter <= 2) counter ++; ``` and so on – Delano van londen Sep 23 '22 at 14:37
I can click a total of 13 cards and each one calls the clickCounter function. Ideally, I want the game to end after 5 cards have been clicked but I cut my code down temporarily to three cards to make it shorter and figure out why, out of 3 cards, the third card is still clickable. – Rai Taylor Sep 23 '22 at 14:40
I orginally went with the if statement but it wasn't working so I tried a switch case but that isn't working either – Rai Taylor Sep 23 '22 at 14:41

score 0 · Answer 2 · answered Sep 23 '22 at 14:27

0

You are not setting isGameOver = true

try isgameOver = true in isGameOver; //this is where I want the game to end// line

answered Sep 23 '22 at 14:27

Mohammed Sherif KK

666
1
5
11

Hello! Thanks for replying! I've, unfortunately, already tried that but my third card is still clickable. :( – Rai Taylor Sep 23 '22 at 14:36

harpal · Accepted Answer · 2022-09-24T08:21:17.090

Do the check inside click handlers.

Add card class on each card (this will help to find all cards in one go, so that we can disable each at one place/function).

break;
    case 2:
        isGameOver = true; //this is where I want the game to end//
        disableCards();
        break;  
}

function disableCards() {  
  // before doing this add `card` class on each card
  let cardsEl = document.querySelector('.card'); // document.getElementsByClassName('card')
  for(let i = 0; i< cardsEl.length; i++) {
    cardsEl[i].classList.add('disableCard');
  }
}

Add CSS into stylesheet

.disableCard {
    pointer-events: none;
    opacity: 0.7;
}

   //CARD ONE//
    document.querySelector('#cardOne').addEventListener('click', function (e) {
     if(!isGameOver) {
        cardOneFront(); //this changes card appearance, ignore please//
        clickCounter(); //clickCounter is being called here//
        if (randomNums[0]) {
            scoreDisplay.innerText = `SCORE: ${scoreCount += randomNums[0]}`;
            console.log(`score just added: ${randomNums[0]}`);
        }
        this.style.pointerEvents = 'none'
     }
   });

And if click handlers have quite similar code you can register them through for loop. like(it is just suggestion otherwise if the logic is not same for each card you can attach for eachone separatoly)

   //add handlers//
for (let I = 0; I< cards.length; i++) {
    document.querySelector('#card-'+i).addEventListener('click', function (e) {
     if(!isGameOver) {
        cardFront(i); //this changes card appearance, ignore please//
        clickCounter(); //clickCounter is being called here//
        if (randomNums[i]) {
            scoreDisplay.innerText = `SCORE: ${scoreCount += randomNums[i]}`;
            console.log(`score just added: ${randomNums[i]}`);
        }
        this.style.pointerEvents = 'none'
     }
   });
}

Hii! Thank you for responding! I implemented this code but unfortunately it still makes the remaining cards clickable. I appreciate your response though because I hadn't thought to try this before. Also, the logic isn't quite the same to loop them but I appreciate this suggestion as well. :D — Rai Taylor, Sep 23 '22 at 15:52
still clickable now I'm assuming, cards are clickable but nothing happens from that click(like no increment in counter). If you want you can disable the card/game area adding style/css dynamically. Updating the ans to disable card. https://stackoverflow.com/a/25328170/6310485 — harpal, Sep 24 '22 at 08:06
Hi! I tried the pointerEvents bit you suggested but to no avail. However! I went back to your original suggestion and instead of putting isGameOver in the beginning if statement, I checked for the counter and put an else statement of isGameOver = true. This worked and now my cards aren't clickable after certain clicks. Thanks so much for your help cause I never would've thought to put the check inside each click event. I hope you have a wonderful rest of your week and take care! :) — Rai Taylor, Sep 24 '22 at 19:01

Card Game: My function won't end after X amount of clicks

3 Answers3