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

Rai Taylor 0
Viewed 38

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!

javascript
3 Answers

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)

Delano van londen0

You are not setting isGameOver = true

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

Mohammed Sherif KK0

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'
     }
   });
}
harpal0
Related