Matching card game, game over after 3 miss

JavaScript
1

Hello,

I am pretty new with Javascript, i am making a matching card game and i want the game over screen to come out if the player fails to match cards 3 times. What would be the correct way to do it ?

Thanks a lot

2

Hello Julien,

How are you wanting to play this game?

If you want to learn more about simple JavaScript game making, look at this YouTube channel:
Coding Train
This is how I started to learn Javascript; using the p5.js framework is very beginner friendly, and Dan’s videos are extremely educational and fun.

Enjoy.

1 Like
3

Hi, thank you for your answer, it’s a very basic matching card game with 5 types of card (10 total). i already built it, it’s just that fonction i can’t figure out.

4

If you look at the last function in this code:
Flipper Card Game

Depending on how you have implemented the rest of your game’s functionality, you could replace everything in the if statement with whatever you wanted to show, as well as add the necessary conditionals to the if statement keeping track of the number of clicks vs the number of correctly selected tiles.

Feel free to look at the rest of the files in the repository to make sense of what is happening.

The main idea is that:

  1. Keep track of how many selections have been made.
  2. Keep track of how many correct matches have been made.
  3. Figure out:
if (numberOfSelections - 2*numberOfMatches == 6) {
  endGame();
}
5

@Sky020
Its always nice to look at other projects to get an idea of how someone else did it.
I would think to set a variable of misses, so let missedMatch = 0; and when you get a match wrong, update that variable and increase it every time you miss a match. Of course check to make sure that variable is less than the number of allotted missed guesses, and run the endGame() function and reset that variable back to 0 if you want to play again.
You could even set the variable to, say 3 like you said, and decrease it when you miss. You could show that on the screen as well and give the player a visual indication of how many wrong attempts they have left.

let missedMatch = 3; 

function miss(){
  missedMatch--; 

  if(missedMatch === 0) {
    endGame();
  }
}
//Pretty basic implementation
6

Thanks a lot for your answers ! i will try it out and let you know. :grinning:

7

@Julien If you post a link to your code on pastebin.com we would probably be able to help you out better

8
  1. show cards
  2. player goes. did it match or not? 3. No match. continue.

3.Match. continue. 4. keep checking when the player matches cards or not.

  1. player failed to match cards. display losing screen.

or 5. Player matched all cards. display a wining screen.

9

Hi, here is my code
well it’s not very clean i think i took already made code here and there and somewhat managed to make it work.

https://pastebin.com/k7z2yGmV

1 Like
10

@Julien The quick answer would be to increment a variable every time the player selects the wrong pair of cards. run a function after every turn to check if that variable has reached three, and if so, you can call whatever type of game over screen you’d like. Unfortunately I have to go to work, but if this is not solved by tomorrow and you’re still here, we can solve it together.

12

thanks a lot, i still can’t figure out how to write that correctly.

https://pastebin.com/W9PY275q

13

@Julien Alright, now that I have time, I would be more than happy to go through this code with you. Check this out:

  1. let cardMismatch = 3;
  • function miss(){
  1. cardMismatch–;
  • if(cardMismatch === 3) {

  1. this.gameOver();

  2. }

  3. }

Firstly, when you use the === operator, you are checking if two objects are of the same data type and the same value. It is stricter than the == operator, and I feel that the latter is more than sufficient for your code.

Secondly, since you are decrementing the cardMismatch variable, your if statement should be * if(cardMismatch == 0). As it stands, it looks as if your game over screen would get called at the beginning of every new game, making for a possibly discouraging experience.

Let me know if this helped. :pirate_flag:

14

HI, thank you so much for your help.
i got an error (miss is defined but never used (no-unused-vars))

let cardMismatch = 3;
function miss(){
cardMismatch–;
if(cardMismatch === 3) {
this.gameOver();

}

}

how can i fix this ?

thank you again for your help

15

@Julien This one’s easy. It looks like somewhere in your code, you have declared a variable with the name of “miss”, defined it, but never used it. Did you remember to call your miss function?

16

well i searched for it but i don’t have any other variable called miss…
to call for the function is like this right ?
miss();

thank you again for your help

1 Like
17

@Julien Yes that’s exactly right. You’ve got it, let me know how it turns out.

18

Well, it’s the same result. Again “miss is defined but never used (no-unused-vars)” .

Now I am not on my computer I will send you the code later.

19

hi saturna,
here is the code. well i don’t understand what i did wrong…

function miss(){
cardMismatch–;
let cardMismatch = 3;
if(cardMismatch === 3) {
this.gameOver();

}
miss();

if you can help me solve this i will be eternally grateful, lol

20

Hi, I am also planning to create my own game, thanks for the helpful thread, this is a very useful information and experience for me. But while I don’t have much time, so I always want to make money and have fun in parallel, I recommend that you go to https://casinospieles.de/zahlungsmethoden/google-pay/ this is a proven resource with an up-to-date review on Google Pay online casinos in Germany, there are collected the most highly rated resources with great bonus offers for new players, make a choice and start earning as well, good luck!