# Memory card game

**URL:** <https://discourse.processing.org/t/memory-card-game/7160>\
**Category:** Coding Questions\
**Tags:** homework\
**Created:** [January 4, 2019, 11:52am UTC](https://discourse.processing.org/t/memory-card-game/7160 "2019-01-04T11:52:25Z")\
**Posts on this page:** 19\
**Page:** 1

<div class="post-metadata">

**Author:** ![roeludh](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@roeludh](https://discourse.processing.org/u/roeludh)\
**Post date:** [January 4, 2019, 11:52am UTC](https://discourse.processing.org/t/memory-card-game/7160/1 "2019-01-04T11:52:25Z")

</div>

Hi,  
I have to make this memory card game in processing and Im a little stuck somewhere. I have three screens and on the third screen the game is displayed based on the selected number of cards in the second screen. This is what I have so far for the memory game:  
I can’t seem let the front images show when you click on the back of a card.

```auto
PImage backing;
PImage memory;
PImage[] voorkant;
int aantalKaarten = 32;

int kaarten[] = new int [aantalKaarten];

boolean one_showing = false;
boolean two_showing = false;
int aantalKlikken = 0;

boolean beurtSpelerEen;
boolean beurtSpelerTwee;
boolean gelijkeKaarten = false;
int kaartAchterkant = 0;
    
String[] afbeeldingen = {
      "kaart1.jpg",
      "kaart2.jpg",
      "kaart3.jpg",
      "kaart4.jpg",
      "kaart5.jpg",
      "kaart6.jpg",
      "kaart7.jpg",
      "kaart8.jpg",};
      
void drawHetSpel(){ 
  
 background(#BFBFBF); 
 fill(#FF8C00);
 stroke(0);
 rect(windowX, windowY, windowBreedte, windowHoogte);
 backing = loadImage( "kaart0.jpg");      
 voorkant = new PImage[aantalKaarten];
      
 kaartenMaken();
 spelerInformatie();
 kaartDraaien();

}
      
void kaartenMaken(){
 float kaartenX = windowX + 25;
 float kaartenY= windowY + 10;
 float reset = kaartenX;
 aantalKaarten = sliderPositie + 16;
  
 if (aantalKaarten%2==0 && kaartAchterkant == 0) {   
    gelijkeKaarten = true;
 for(int i = 0; i < aantalKaarten; i++){
    image(backing, kaartenX, kaartenY,75,100);
    kaartenX+=85;
        
    if(kaartenX>=windowBreedte){
       kaartenY+=110; 
       kaartenX= reset;
      }
    if(kaartenY >= windowHoogte && kaartenX >= windowBreedte){
      
      }
  }
    
  if(mouseX > kaartenX && mouseX <= kaartenX + 75 && mouseY > kaartenY && mouseY <= kaartenY + 100){
    
    noFill();
    stroke(0,0,255);
    strokeWeight(5);
    rect(kaartenX, kaartenY, 75, 100);
    
  }else{
    stroke(0);
  }
}
 
else{
  gelijkeKaarten = false;
  fill(#BFBFBF);
  rect(width/2-100, height/2, 200, 100);
  fill(0);
  text("Oneven Kaarten, ", width / 2 - 75, height / 2 + 30);
  text("Ga terug! ", width / 2 - 50, height / 2 + 50);
  if(mousePressed && mouseX > width/2-100 && mouseX <= width/2 +100 && mouseY > height/2 && mouseY <= height/2 + 100){
    drawInstellingen();
    level = 1;
  }
 }
}

void spelerInformatie(){
  float spelerEenX =windowX+( windowX * 2);
  float spelerY = windowHoogte - 100;
  float spelerBreedte = 200;
  float spelerHoogte = 100;
  float spelerTweeX = spelerEenX + (windowBreedte / 2);
  
  
  fill(#BFBFBF);
  noStroke();
  rect(spelerEenX, spelerY, spelerBreedte,spelerHoogte);
  rect(spelerTweeX, spelerY, spelerBreedte,spelerHoogte);
  
  fill(0);
  textSize(20);
  text("Speler 1: ", spelerEenX, spelerY-10);
  text("Speler 2: ", spelerTweeX, spelerY-10);
  text("Paren: ", spelerEenX, spelerY+50);
  text("Paren: ", spelerTweeX, spelerY+50);
}

void kaartDraaien(){
  boolean kaartDraaien = false;
  float kaartenX = windowX + 25;
  float kaartenY= windowY + 10; 
  
   if(kaartDraaien == true){
   for(int i = 0; i < aantalKaarten; i++){ 
     voorkant[aantalKaarten] = loadImage("kaart" + i + ".jpg");
   }
  }
  if(mousePressed && mouseX > kaartenX && mouseX <= kaartenX + 75 && mouseY > kaartenY && mouseY <= kaartenY + 100){
   kaartDraaien = true;
   }
  //kaartDraaien = false;
  println(kaartDraaien);
 
}

```

I hope someone can help me out.  
I know there is still a lot left to do to make the code look better:)

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 4, 2019, 12:55pm UTC](https://discourse.processing.org/t/memory-card-game/7160/2 "2019-01-04T12:55:21Z")

</div>

> [@roeludh](#):
>
> //kaartDraaien = false;

Do front images display with this line commented?  
Beause I have an idea, but I cant try it by myself  
(nobody can try this code bc we dont have your .jpg files)

---

<div class="post-metadata">

**Author:** ![roeludh1](https://avatars.discourse-cdn.com/v4/letter/r/0ea827/32.png) [@roeludh1](https://discourse.processing.org/u/roeludh1)\
**Post date:** [January 4, 2019, 1:15pm UTC](https://discourse.processing.org/t/memory-card-game/7160/3 "2019-01-04T13:15:38Z")

</div>

I hope this will work:  
[https://drive.google.com/open?id=1OwgO0yDizwzmBbBOcJwjBNV-dAW8b\_0z](https://drive.google.com/open?id=1OwgO0yDizwzmBbBOcJwjBNV-dAW8b_0z)  
This is the entie file with images and code 🙂

---

<div class="post-metadata">

**Author:** ![Sky](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/sky/32/3013_2.png) [@Sky](https://discourse.processing.org/u/Sky)\
**Post date:** [January 4, 2019, 1:43pm UTC](https://discourse.processing.org/t/memory-card-game/7160/4 "2019-01-04T13:43:36Z")

</div>

```auto
void kaartDraaien(){
  boolean kaartDraaien = false; // exists only inside the function
  float kaartenX = windowX + 25;
  float kaartenY= windowY + 10; 
  
   if(kaartDraaien == true){
   for(int i = 0; i < aantalKaarten; i++){ 
     voorkant[aantalKaarten] = loadImage("kaart" + i + ".jpg");
      kaartenX += 85;
      kaartenY += 110;
   }
  }
  if(mousePressed && mouseX > kaartenX && mouseX <= kaartenX + 75 && mouseY > kaartenY && mouseY <= kaartenY + 100){
   kaartDraaien = true;
   }
  //kaartDraaien = false;
  println(kaartDraaien);
 
}

```

I think your problem is that  
_boolean kaartDraaien = false;_  
is a variable declared inside the function and you are modifying the variable inside the function,  
then the function ends, the variable goes out of scope (stop existing).  
The function is called once again and the variable exists again and its false  
I tried switching the order : if(mouse pressed … ){…} --\> if(kaartDraaien == true){…}  
But i get “out of index” error.  
(I dont program Java but I see a lot of similiraties with C++, and understand what is written( in english 😉 ))  
More than this I cant help, but I hope i was useful  
When you started Java?

---

<div class="post-metadata">

**Author:** ![roeludh1](https://avatars.discourse-cdn.com/v4/letter/r/0ea827/32.png) [@roeludh1](https://discourse.processing.org/u/roeludh1)\
**Post date:** [January 4, 2019, 2:10pm UTC](https://discourse.processing.org/t/memory-card-game/7160/5 "2019-01-04T14:10:52Z")

</div>

Thank you for you reply and time. I will look further into this!  
I have to make this for school and we began a couple of weeks ago.

---

<div class="post-metadata">

**Author:** ![roeludh](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@roeludh](https://discourse.processing.org/u/roeludh)\
**Post date:** [January 5, 2019, 5:59pm UTC](https://discourse.processing.org/t/memory-card-game/7160/6 "2019-01-05T17:59:58Z")

</div>

The problem is solved

---

<div class="post-metadata">

**Author:** ![player](https://avatars.discourse-cdn.com/v4/letter/p/e19b73/32.png) [@player](https://discourse.processing.org/u/player)\
**Post date:** [October 16, 2019, 3:59pm UTC](https://discourse.processing.org/t/memory-card-game/7160/7 "2019-10-16T15:59:19Z")

</div>

@roeludh, @roeludh1  
May I like to know how the problem has been solved?  
And can I please have your complete working code?  
Let me plz know if it is possible!  
Thanks!

---

<div class="post-metadata">

**Author:** ![roeludh](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@roeludh](https://discourse.processing.org/u/roeludh)\
**Post date:** [October 17, 2019, 2:25pm UTC](https://discourse.processing.org/t/memory-card-game/7160/8 "2019-10-17T14:25:35Z")

</div>

Sure, if you want you can leave your email. If that is easier.

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 17, 2019, 3:59pm UTC](https://discourse.processing.org/t/memory-card-game/7160/9 "2019-10-17T15:59:45Z")

</div>

Well, that is homework and we all try to resist the temptation to offer full code solutions…

And why email, why not publicly?

---

<div class="post-metadata">

**Author:** ![roeludh](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@roeludh](https://discourse.processing.org/u/roeludh)\
**Post date:** [October 17, 2019, 4:42pm UTC](https://discourse.processing.org/t/memory-card-game/7160/10 "2019-10-17T16:42:50Z")

</div>

Im not offering the full code, just the solution.

---

<div class="post-metadata">

**Author:** ![WickedElf](https://avatars.discourse-cdn.com/v4/letter/w/6bbea6/32.png) [@WickedElf](https://discourse.processing.org/u/WickedElf)\
**Post date:** [October 31, 2019, 7:31pm UTC](https://discourse.processing.org/t/memory-card-game/7160/11 "2019-10-31T19:31:06Z")

</div>

Hey roeludh,

I have similar problem with the cards.  
How did you solved the issue?

---

<div class="post-metadata">

**Author:** ![roeludh](https://avatars.discourse-cdn.com/v4/letter/r/8e8cbc/32.png) [@roeludh](https://discourse.processing.org/u/roeludh)\
**Post date:** [November 3, 2019, 5:29pm UTC](https://discourse.processing.org/t/memory-card-game/7160/12 "2019-11-03T17:29:02Z")

</div>

I made the code inside a mouseClicked function.  
I made an if statement inside a for loop inside an if statement like this:

```auto
If( game has started){
  for ( here the array for the cards){
    if( the coordinates of your mouse inside a card for the array[i]){
      function clickedOnCard();
    }
  }
}

```

I hope this helps you a little bit without giving the code solution

---

<div class="post-metadata">

**Author:** ![WickedElf](https://avatars.discourse-cdn.com/v4/letter/w/6bbea6/32.png) [@WickedElf](https://discourse.processing.org/u/WickedElf)\
**Post date:** [November 3, 2019, 8:09pm UTC](https://discourse.processing.org/t/memory-card-game/7160/13 "2019-11-03T20:09:45Z")

</div>

Awesome Thank you so much

---

<div class="post-metadata">

**Author:** ![qwert](https://avatars.discourse-cdn.com/v4/letter/q/7bcc69/32.png) [@qwert](https://discourse.processing.org/u/qwert)\
**Post date:** [October 29, 2020, 6:47pm UTC](https://discourse.processing.org/t/memory-card-game/7160/14 "2020-10-29T18:47:30Z")

</div>

hi, could you share the source code of this with me?

---

<div class="post-metadata">

**Author:** ![Chrisir](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/chrisir/32/45_2.png) [@Chrisir](https://discourse.processing.org/u/Chrisir)\
**Post date:** [October 29, 2020, 7:23pm UTC](https://discourse.processing.org/t/memory-card-game/7160/15 "2020-10-29T19:23:21Z")

</div>

Well, we all try to resist the temptation to offer full code solutions…

---

<div class="post-metadata">

**Author:** ![qwert](https://avatars.discourse-cdn.com/v4/letter/q/7bcc69/32.png) [@qwert](https://discourse.processing.org/u/qwert)\
**Post date:** [October 30, 2020, 11:49am UTC](https://discourse.processing.org/t/memory-card-game/7160/17 "2020-10-30T11:49:18Z")

</div>

could you share it with me?

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [October 30, 2020, 6:43pm UTC](https://discourse.processing.org/t/memory-card-game/7160/18 "2020-10-30T18:43:45Z")

</div>

Memory card games are easy. Just write a Card class that remembers a card’s position and state, and add a render() function to the class that draws it and a is\_mouse\_over() function that determines if the mouse is over the card.

Then the main logic needs a single state variable to track which state you’re in when it comes to clicking on cards, and probably a couple of variables to record the values for the first flipped card. The card class itself can deal with some logic too.

```auto
class Card {
  int suit, value;
  float x, y;
  boolean face_down;
  Card(int _suit, int _value){
    // ...
  }
  void render(){
    // ...
  }
  void mouse_over(){
    // ...
  }
}

int state, saved_suit, saved_value;
Card[] cards;

void setup(){
  size(600,400);
  // ...  
}

void draw(){
  background(0,200,0);
  // ... draw cards...
}

void mousePressed(){
  // Loop over all cards.
  // If over a card, do stuff.
}

```

---

<div class="post-metadata">

**Author:** ![qwert](https://avatars.discourse-cdn.com/v4/letter/q/7bcc69/32.png) [@qwert](https://discourse.processing.org/u/qwert)\
**Post date:** [November 4, 2020, 10:23pm UTC](https://discourse.processing.org/t/memory-card-game/7160/19 "2020-11-04T22:23:41Z")

</div>

The only thing is… we aren’t allowed to use classes yet.

---

<div class="post-metadata">

**Author:** ![TfGuy44](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tfguy44/32/41_2.png) [@TfGuy44](https://discourse.processing.org/u/TfGuy44)\
**Post date:** [November 5, 2020, 12:43am UTC](https://discourse.processing.org/t/memory-card-game/7160/20 "2020-11-05T00:43:15Z")

</div>

Then don’t use classes. Your code will be a jumbled mess of arrays, but it can still work.

Instead of a class for the Card, which keeps track of that Card’s variables, you will need an array for each variable, where the i’th value in that array is the value for the i’th card.

```auto
int[] suits;
int[] values;
boolean[] is_face_up;
// etc...

```