How do I make other cards unclickable after I've clicked 2

Question

See I want to removeEventListener on everyother cards on the screen while function flipcard does it's thing except the 2 you've already clicked so that a person cannot click more than 2 cards ♦️♠️ at a time
https://code.sololearn.com/WhoNrk6iui16/?ref=app

Answer 1

The object card can have a state property, which you can change if you want.

Answer 2

By the way if you didn‘t see that: if you start the game and click 5 times on first card you get points and then 5 times on second card etc. After 6 cards you won the game.

Answer 3

That what I mean the code needs more structure.

For the other site more easier to manage all that is when the game will have a few states. So you know in what state is the game and what the code has in this time to do.

For example something like this:
if(State===1): waiting for users move to opening first of two cards. User clicked first card (now remove click listener for this card and set State=2);

if(State===2): and user clicked card that means this is second card (remove click listener for all cards) and wait for turning over these both cards some time if they are different and activate all click listeners back. Else if the both have the same picture they stay without listeners and you increase the cards counter. After that you check the counter and if there are cards in game you will set State=1 else set State=3;

if(State=3) display the result for end of this game. The variables and pictures will be reseted etc and so on and you set State=1.

You have to develop your plan on a sheet of paper.

Answer 4

Fixed that one where you click 5 times same card JaScript thanks

Answer 5

I've added a few lines of code to prevent more than two cards at a time.
https://code.sololearn.com/Wp3pE8Xf0ptp/?ref=app

Answer 6

Wdym state property?

Answer 7

I have a function named flipcard
It's executed in 990ms

When you press Card A and Card B it will be activated then the pictures of the 2 cards show then flip back and you see the back side again the light purple which is fine

But now there's a hidden error I wanna fix ,
Now press Card A, Card B, Card C.
Card C will also show image but will not revert back to purple or new light purple. Card A and will Card will flip normal if the cards are not the same...But Card C will not and there will be an extra Card missing it's match ...
So I want it to be able to click Card A and Card B then after that no other Card(Card C etc ) to be clickable while function Flipcard is taking place... It's a bit hard to explain, hope I tried and if still don't get just randomly click Card A, Card B,Card C it'll become clearer

Answer 8

Suggestions:
(Use jQuery for this!)
- Try making a counter variable, when a user clicks on a card, it increases.
When it reaches 2, try using css () function and set pointer-events property to none(value).
- Now, create a class and set a cooldown for it, I would recommend using transition property, with the transition delay of N(Set whatever u want) seconds. When the class is active (.del:active), set property pointer-events to auto.
- Lastly, toggle the class in the previous part.. This will set pointer-events of the cards to none, and then set it to auto after N seconds..
I haven't tried it out yet..