Memory Game Code

[San]

Im not so good with Processing. But I’m trying to make the Memory game.

so far this is what I got: I can print 6 sets of cards. (12 cards in total) I have to match color with color.
But I have been thinking all day and still cant get it done. I don’t know what to do now. I dont know how to ‘flip’ the cards. I also don’t like the codes that I have been copying. Maybe u guys can help me a little bit.

final IntList randomRangeList = IntList.fromRange(1, 25);
int[] numbers;
int[] randomNumbers() {
  randomRangeList.shuffle(this);
  return expand(randomRangeList.values(), 24);
}

int[] abc = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24};

int waarde = 0;

void drawFrontOfCard() {

  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  aantalSetjes(setjes3);
  int [][] tiles = new int[rijen][kolommen];
  for (int k = 0; k < abc.length; k++) {
    abc[k] = numbers[k];
  }
  tiles[0][0] = abc[0];
  tiles[1][0] = abc[1];
  tiles[2][0] = abc[2];
  tiles[3][0] = abc[3];
  tiles[0][1] = abc[4];
  tiles[1][1] = abc[5];
  tiles[2][1] = abc[6];
  tiles[3][1] = abc[7];
  tiles[0][2] = abc[8];
  tiles[1][2] = abc[9];
  tiles[2][2] = abc[10];
  tiles[3][2] = abc[11];
  tiles[0][3] = abc[12];
  tiles[1][3] = abc[13];
  tiles[2][3] = abc[14];
  tiles[3][3] = abc[15];
  tiles[0][4] = abc[16];
  tiles[1][4] = abc[17];
  tiles[2][4] = abc[18];
  tiles[3][4] = abc[19];
  tiles[0][5] = abc[20];
  tiles[1][5] = abc[21];
  tiles[2][5] = abc[22];
  tiles[3][5] = abc[23];
  //}
  int xPos = 0;
  int yPos =0;
  for (int i =0; i<tiles.length; i++) {
    for (int j =0; j<tiles[0].length; j++) {
      xPos = 100 + i * (widthCard + margeCard);
      yPos = 100 + j * (heightCard + margeCard);
      fill(#00ffff);
      textSize(30);

      if (tiles[i][j] > 0) {
        if (tiles[i][j] == 1 || tiles[i][j] == 2) {
          waarde = tiles[i][j];
          fill(#ff0000);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 3 || tiles[i][j] == 4) {
          waarde = tiles[i][j];
          fill(#00ff00);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 5 || tiles[i][j] == 6) {
          waarde = tiles[i][j];
          fill(#0000ff);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 7 || tiles[i][j] == 8) {
          waarde = tiles[i][j];
          fill(#ffff00);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 9 || tiles[i][j] == 10) {
          waarde = tiles[i][j];
          fill(#ff00ff);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 11 || tiles[i][j] == 12) {
          waarde = tiles[i][j];
          fill(#00ffff);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 13 || tiles[i][j] == 14) {
          waarde = tiles[i][j];
          fill(#c0c0c0);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 15 || tiles[i][j] == 16) {
          waarde = tiles[i][j];
          fill(#000080);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 17 || tiles[i][j] == 18) {
          waarde = tiles[i][j];
          fill(#008000);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 19 || tiles[i][j] == 20) {
          waarde = tiles[i][j];
          fill(#008080);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 21 || tiles[i][j] == 22) {
          waarde = tiles[i][j];
          fill(#800000);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 23 || tiles[i][j] == 24) {
          waarde = tiles[i][j];
          fill(#543090);
          rect(xPos, yPos, widthCard, heightCard);
        }
      }
    }
  }
}

[Tiemen]

Goedemorgen San,

I’ve tried the code you’ve provided, but it seems to miss some parts. Are you certain you’ve added everything?

In addition, could you please edit your post and fix the code? Make sure that all the code is placed inside the preformatted text ‘block’. Like this:

final IntList randomRangeList = IntList.fromRange(1, 25);
int[] numbers;
// ...
// rest of your code
// ...
      rect(xPos, yPos, widthCard, heightCard);
     }
   }
  }
 }
}

[San]

Goedemorgen Tiemen,
Bedankt dat je naar de code wilt kijken. Ik was inderdaad wat stukjes vergeten.
Ik heb alle blokjes van 1 tot 24 genummerd en daarna geef ik elke twee getallen 1 kleur. Dus 1 en 2 zijn rood en 3 en 4 zijn geel etc.
Daar ben ik al niet zo blij mee omdat ik steeds de stukjes opnieuw moet kopiëren voor elk setje.
En ik heb heel lang gezeten aan de het omdraaien van de kaartjes maar dat lukt ook niet. Daar kan ik eigenlijk ook wel wat tips voor gebruiken.

int widthCard = 60;
int heightCard = 60;
int margeCard = 10;

int xPosCard;
int yPosCard;

int gameState = 1;

int collums;
int rows;

final IntList randomRangeList = IntList.fromRange(1, 25);
int[] numbers;
int[] randomNumbers() {
  randomRangeList.shuffle(this);
  return expand(randomRangeList.values(), 24);
}

int[] abc = {1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15, 16, 17, 18, 19, 20, 21, 22, 23, 24};

int waarde = 0;


void setup() {

  background((color) random(#000000));
  numbers = randomNumbers();

  size(960, 540);
}

void draw() {
  background(#333333);
  switch(gameState) { 
  case 1:
    drawFrontOfTheCards();
    break;
  }
}

void drawFrontOfTheCards() {

  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  int rows = 4;
  int collums = 6;
  int [][] tiles = new int[rows][collums];
  for (int k = 0; k < abc.length; k++) {
    abc[k] = numbers[k];
  }
  tiles[0][0] = abc[0];
  tiles[1][0] = abc[1];
  tiles[2][0] = abc[2];
  tiles[3][0] = abc[3];
  tiles[0][1] = abc[4];
  tiles[1][1] = abc[5];
  tiles[2][1] = abc[6];
  tiles[3][1] = abc[7];
  tiles[0][2] = abc[8];
  tiles[1][2] = abc[9];
  tiles[2][2] = abc[10];
  tiles[3][2] = abc[11];
  tiles[0][3] = abc[12];
  tiles[1][3] = abc[13];
  tiles[2][3] = abc[14];
  tiles[3][3] = abc[15];
  tiles[0][4] = abc[16];
  tiles[1][4] = abc[17];
  tiles[2][4] = abc[18];
  tiles[3][4] = abc[19];
  tiles[0][5] = abc[20];
  tiles[1][5] = abc[21];
  tiles[2][5] = abc[22];
  tiles[3][5] = abc[23];
  //}
  int xPos = 0;
  int yPos =0;
  for (int i =0; i<tiles.length; i++) {
    for (int j =0; j<tiles[0].length; j++) {
      xPos = 100 + i * (widthCard + margeCard);
      yPos = 100 + j * (heightCard + margeCard);
      fill(#00ffff);
      textSize(30);


      if (tiles[i][j] > 0) {
        if (tiles[i][j] == 1 || tiles[i][j] == 2) {
          fill(#ff0000);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 3 || tiles[i][j] == 4) {
          fill(#00ff00);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 5 || tiles[i][j] == 6) {
          fill(#0000ff);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 7 || tiles[i][j] == 8) {
          fill(#ffff00);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 9 || tiles[i][j] == 10) {
          fill(#ff00ff);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 11 || tiles[i][j] == 12) {
          fill(#00ffff);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 13 || tiles[i][j] == 14) {
          fill(#c0c0c0);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 15 || tiles[i][j] == 16) {
          fill(#000080);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 17 || tiles[i][j] == 18) {
          fill(#008000);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 19 || tiles[i][j] == 20) {
          fill(#008080);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 21 || tiles[i][j] == 22) {
          fill(#800000);
          rect(xPos, yPos, widthCard, heightCard);
        } else if (tiles[i][j] == 23 || tiles[i][j] == 24) {
          fill(#543090);
          rect(xPos, yPos, widthCard, heightCard);
        }
      }
    }
  }
}

//void drawBackOfTheCards(){
//}

//void faceUp(){
//  if (tiles[i][j] >  0){
//    drawBackOfTheCards();
//  } else {
//    drawFrontOfTheCards();
//  }
//}

//void ClickOnCard(){
//  if(mousePressed == true){
//    if(mouseX > xPos && mouseX < xPos + widthCards && mouseY > yPos && mouseY < yPos + heightCards);
//   tiles[i][j] * -1;
//  }
//}

[Tiemen]

You’re welcome! Let’s talk English though, so others can help out as well.

I noticed you already tried to implement some suggestions from other posts. For now I think it’s wise to start by cleaning up your current code a bit and discussing some parts of it, to help you get a better understanding of it. Afterwards you’ll likely have to redo some parts to get the ‘flipping’ part to work, but I think it’s a valuable exercise nonetheless.

structure
I recommend using a structure in your code that has a logical order. Right now there is a function drifting somewhere between your global variables, making it a bit messy. An example of a logical structure is:

int x, y;
// other global variables

void setup(){
  //code
}

void draw() {
  //code
}

// your own functions, such as 'void drawFrontOfTheCards()'

// interactive functions, such as 'void mousePressed()'

arrays
You use IntList to make a list of numbers ranging from 1 till 24. Why not use these numbers to fill the array abc, instead of adding these numbers manually?

drawing the cards
To draw the board there are 24 lines of tile[][]. You probably know how you can use a for loop to draw 24 cards in a single row; two-dimensional arrays is an extension of that.

[San]

Thanks! it looks alot better now.

I want it to react to mouseEvents. If I add the ‘void mousePressed()’ It doesn’t know the xPos and yPos of the rectangles anymore. And mousePressed(int xPos, int yPos) doesn’t work.

final int RED = #ff0000;
final int LIME = #00ff00;
final int BLUE = #0000ff;
final int YELLOW = #ffff00;
final int FUCHSIA = #ff00ff;
final int AQUA = #00ffff;
final int SILVER = #c0c0c0;
final int NAVY = #000080;
final int TEAL = #008080;
final int GREEN = #008000;
final int MAROON = #800000;
final int BLACK = #000000;

int cardColors[] = {RED, LIME, BLUE, YELLOW, FUCHSIA, AQUA, SILVER, NAVY, TEAL, GREEN, MAROON, BLACK};

final IntList randomRangeList = IntList.fromRange(1, 25);
int[] abc;
int[] randomNumbers() {
  randomRangeList.shuffle(this);
  return expand(randomRangeList.values(), 24);
};

int widthCard = 60;
int heightCard = 60;
int margeCard = 10;

int gameState = 1;

int collums;
int rows;
int colorCard;
int aantalKaarten;
int value = 0;
int kaartje;

void setup() {
  abc = randomNumbers();
  size(960, 540);
}

void draw() {
  background(#333333);
  switch(gameState) { 
  case 1:
    drawFrontOfTheCards();
    break;
  }
}

void drawFrontOfTheCards() {
  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  int rows = 4;
  int collums = 6;
  int [][] tiles = new int[rows][collums];
  aantalKaarten = rows * collums;
  int xPos = 0;
  int yPos =0;
  int looploop = 0;
  for (int i =0; i<tiles.length; i++) {
    for (int j =0; j<tiles[0].length; j++) {
      xPos = 100 + i * (widthCard + margeCard);
      yPos = 100 + j * (heightCard + margeCard);
      fill(#00ffff);
      textSize(30);
      looploop++;
      tiles[i][j] = abc[looploop - 1];

      if (tiles[i][j] > 0) {
        drawCard(xPos, yPos, tiles[i][j]);
      }
    }
  }
}

void drawCard(int xPos, int yPos, int tiles) {
  for (int i = 1; i < (aantalKaarten + 1); i++) {
    kaartje = i;
    if (i % 2 == 0) {
      value = i / 2;
    } else {
      value = round(i / 2 + 1);
    }
    value = value -1;
    if (tiles == i) {
      colorCard = cardColors[value];
    }
    fill(colorCard);
    rect(xPos, yPos, widthCard, heightCard);
  }
}

[Chrisir]

@San

for (int i =0; i<tiles.length; i++) {
for (int j =0; j<tiles[0].length; j++) {
xPos = 100 + i * (widthCard + margeCard);
yPos = 100 + j * (heightCard + margeCard);

In those lines you calculate the positions

You could store them in an array declared before setup () and similar to tiles holding the positions. To be more precise: one array for x values one for y values.

Then you could use these positions in said loop and repeat a similar loop in mousePressed to give you the 2 indexes of the clicked Card.

Chrisir

[San]

Thanks Chrisir
I added the mousePressed with the array.
I also added the void drawBackCard();. That just draws a white rectangle over the colored one when I click on it. But when I click on the colored rectangle, the white rectangle is visible for 0.5 seconds and then the colored rectangle is back. But I want to have it white until I click on it again.

final int RED = #ff0000;
final int LIME = #00ff00;
final int BLUE = #0000ff;
final int YELLOW = #ffff00;
final int FUCHSIA = #ff00ff;
final int AQUA = #00ffff;
final int SILVER = #c0c0c0;
final int NAVY = #000080;
final int TEAL = #008080;
final int GREEN = #008000;
final int MAROON = #800000;
final int BLACK = #000000;

int cardColors[] = {RED, LIME, BLUE, YELLOW, FUCHSIA, AQUA, SILVER, NAVY, TEAL, GREEN, MAROON, BLACK};

final IntList randomRangeList = IntList.fromRange(1, 25);
int[] abc;
int[] randomNumbers() {
  randomRangeList.shuffle(this);
  return expand(randomRangeList.values(), 24);
};

int rows = 4;
int collums = 6;
int[][] Positions = new int[rows][collums];
int widthCard = 60;
int heightCard = 60;
int margeCard = 10;

int gameState = 1;

int xPositie;
int yPositie;
int waardeKantje = 1;
int colorCard;
int aantalKaarten;
int value = 0;
int kaartje;

void setup() {
  abc = randomNumbers();
  size(960, 540);
}

void draw() {
  background(#333333);
  switch(gameState) { 
  case 1:
    drawFrontOfTheCards();
    break;
  }
}

void drawFrontOfTheCards() {
  rectMode(CORNER);
  textAlign(CENTER, CENTER);
  int [][] tiles = new int[rows][collums];
  aantalKaarten = rows * collums;
  int xPos = 0;
  int yPos =0;
  int looploop = 0;
  for (int i =0; i<tiles.length; i++) {
    for (int j =0; j<tiles[0].length; j++) {
      xPos = 100 + i * (widthCard + margeCard);
      yPos = 100 + j * (heightCard + margeCard);
      Positions[i][0] = xPos;
      Positions[0][j] = yPos;
      fill(#00ffff);
      textSize(30);
      looploop++;
      tiles[i][j] = abc[looploop - 1];

      if (tiles[i][j] > 0) {
        drawFrontCard(xPos, yPos, tiles[i][j]);
      }
    }
  }
}

void drawFrontCard(int xPos, int yPos, int tiles) {
  for (int i = 1; i < (aantalKaarten + 1); i++) {
    kaartje = i;
    if (i % 2 == 0) {
      value = i / 2;
    } else {
      value = round(i / 2 + 1);
    }
    value = value -1;
    if (tiles == i) {
      colorCard = cardColors[value];
    }
    fill(colorCard);
    rect(xPos, yPos, widthCard, heightCard);
  }
}

void drawBackCard(int xPos, int yPos) {
  fill(#ffffff);
  rect(xPos, yPos, widthCard, heightCard);
}



void mousePressed() {
  for (int i =0; i<Positions.length; i++) {
    for (int j =0; j<Positions[0].length; j++) {
      xPositie = Positions[i][0];
      yPositie = Positions[0][j];
      if (mouseOnCard()) {
        drawBackCard(xPositie, yPositie);
      }
    }
  }
}

boolean mouseOnCard () {
  return mouseX > xPositie && mouseX < xPositie + widthCard && mouseY > yPositie && mouseY < yPositie + heightCard;
}

[Tiemen]

I think you should take another crack at Chrisir’s suggestion:

@Chrisir

You could store them in an array declared before setup () and similar to tiles holding the positions. To be more precise: one array for x values one for y values.

The location of the cards, similar to the card sizes, stay the same throughout the entire game. This means it’s possible to calculate these values just once before draw() is looping. This way the card locations don’t have to be recalculated each time during the sketch, but you can simply substract them from an array.

@San

the white rectangle is visible for 0.5 seconds and then the colored rectangle is back

There is a valid reason for this, but I think you should try to find the answer yourself. In your void mousePressed() add the following line:

  drawBackCard(xPositie, yPositie);
  println("mouse is pressed"); // add this one

Run your sketch and click any card. Similar to the drawBackCard() it’s only being executed once and not constantly after you’ve clicked it. Why do you think that is? And what could you change to prevent the same behaviour from happening?

[Chrisir]

Well done!

Make a further similar array like tiles :
it stores whether the card
is opened or closed

Then according to this data either show the backside of the Card or its image

MousePressed changes only the data in the new array per Card and does not do display work. It would only flash.