Memory card game

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.

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:)

1 Like

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)

I hope this will work:
https://drive.google.com/open?id=1OwgO0yDizwzmBbBOcJwjBNV-dAW8b_0z
This is the entie file with images and code :slight_smile:

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 :wink: ))
More than this I cant help, but I hope i was useful
When you started Java?

1 Like

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.

The problem is solved

@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!

1 Like

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

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

And why email, why not publicly?

Im not offering the full code, just the solution.

1 Like

Hey roeludh,

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

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

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

2 Likes

Awesome Thank you so much

1 Like