# Memory Game Code

**URL:** <https://discourse.processing.org/t/memory-game-code/15097>\
**Category:** Coding Questions\
**Created:** [November 1, 2019, 12:29am UTC](https://discourse.processing.org/t/memory-game-code/15097 "2019-11-01T00:29:10Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![San](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@San](https://discourse.processing.org/u/San)\
**Post date:** [November 1, 2019, 12:29am UTC](https://discourse.processing.org/t/memory-game-code/15097/1 "2019-11-01T00:29:10Z")

</div>

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. 😕

```auto
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);
        }
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 1, 2019, 4:47am UTC](https://discourse.processing.org/t/memory-game-code/15097/2 "2019-11-01T04:47:11Z")

</div>

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:

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

```

---

<div class="post-metadata">

**Author:** ![San](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@San](https://discourse.processing.org/u/San)\
**Post date:** [November 1, 2019, 8:37am UTC](https://discourse.processing.org/t/memory-game-code/15097/3 "2019-11-01T08:37:53Z")

</div>

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. 😬

```auto
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;
// }
//}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 1, 2019, 9:36am UTC](https://discourse.processing.org/t/memory-game-code/15097/4 "2019-11-01T09:36:14Z")

</div>

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:

```auto
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](https://processing.org/tutorials/2darray/) is an extension of that.

---

<div class="post-metadata">

**Author:** ![San](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@San](https://discourse.processing.org/u/San)\
**Post date:** [November 1, 2019, 11:43am UTC](https://discourse.processing.org/t/memory-game-code/15097/5 "2019-11-01T11:43:49Z")

</div>

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.

```auto
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);
  }
}

```

---

<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:** [November 1, 2019, 11:50am UTC](https://discourse.processing.org/t/memory-game-code/15097/6 "2019-11-01T11:50:54Z")

</div>

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

---

<div class="post-metadata">

**Author:** ![San](https://avatars.discourse-cdn.com/v4/letter/s/ba9def/32.png) [@San](https://discourse.processing.org/u/San)\
**Post date:** [November 1, 2019, 1:11pm UTC](https://discourse.processing.org/t/memory-game-code/15097/7 "2019-11-01T13:11:58Z")

</div>

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.

```auto
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;
}

```

---

<div class="post-metadata">

**Author:** ![Tiemen](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/tiemen/32/5477_2.png) [@Tiemen](https://discourse.processing.org/u/Tiemen)\
**Post date:** [November 1, 2019, 8:02pm UTC](https://discourse.processing.org/t/memory-game-code/15097/8 "2019-11-01T20:02:08Z")

</div>

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:

```auto
  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?

---

<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:** [November 1, 2019, 8:17pm UTC](https://discourse.processing.org/t/memory-game-code/15097/9 "2019-11-01T20:17:52Z")

</div>

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.