# How to make a card matching game in p5.js (memory)

**URL:** <https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592>\
**Category:** Coding Questions\
**Created:** [November 6, 2022, 6:57am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592 "2022-11-06T06:57:10Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [November 6, 2022, 6:57am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/1 "2022-11-06T06:57:10Z")

</div>

I am trying to make a card matching game. But I don’t know how I can matching than when they are correct. Maybe I can let the first card and second card . But I don’t really know how to do it.  
Link: [p5.js Web Editor](https://editor.p5js.org/fishball/sketches/4yVW9ZwTX)

```auto
 let images = [];
let visibleImages = new Array(16);
let x = 0;
function preload() {
  for (let j = 0; j < 8; j++) {
    let img = loadImage(j + 1 + ".jpg");
    images.push(img);
    images.push(img);
  }
}
function mouseClicked() {
  let cx = floor(mouseX / (width / 4));
  let cy = floor(mouseY / (height / 4));
  let imgIndex = cy * 4 + cx;
  visibleImages[imgIndex] = true;
}
function setup() {
  createCanvas(400, 400);
  visibleImages.fill(false);
  shuffle(images, true);
}
function draw() {
  background(255);
  for (let j = 0; j < 4; j++) {
    for (let i = 0; i < 4; i++) {
      square((i * 400) / 4, (j * 400) / 4, 400 / 4);
      let imgIndex = j * 4 + i;
      if (visibleImages[imgIndex] == true) {
        image(images[imgIndex], (i * 400) / 4, (j * 400) / 4, 400 / 4, 400 / 4);
      }
    }
  }
}

```

---

<div class="post-metadata">

**Author:** ![mnse](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/mnse/32/16520_2.png) [@mnse](https://discourse.processing.org/u/mnse)\
**Post date:** [November 6, 2022, 7:54am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/2 "2022-11-06T07:54:05Z")

</div>

Hi @yoyo,

Would you please follow the instructions and [format your code…](https://discourse.processing.org/faq#format-your-code)

![ezgif.com-gif-maker (1)](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/3X/3/4/34521338de6902479873291389bf53a11d12237d.gif)

For a starting point you can put your images to an object with an id. Afterwards you can compare if the id is the same.

> **[JavaScript Classes](https://www.w3schools.com/js/js_classes.asp)**
>
> W3Schools offers free online tutorials, references and exercises in all the major languages of the web. Covering popular subjects like HTML, CSS, JavaScript, Python, SQL, Java, and many, many more.

Cheers  
— mnse

---

<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 6, 2022, 10:46am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/3 "2022-11-06T10:46:38Z")

</div>

Yeah!

Instead of using a class:  
You also could load the image names into a String grid first.

Shuffle the string grid.

Load then the images into a second image grid (the one you already have)

Now you have the string names and can compare the names easily (numbers at start of String) to find out whether the 2 images match

**next step**

Have a counter for the mouse clicks. When it’s ==2 then compare the 2 open images, then reset. Thus you can distinguish between first and second mouse click.

**remark**

Also draw an image for images that are not open (the backside of each card), the same image for every card.

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [November 6, 2022, 2:09pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/4 "2022-11-06T14:09:29Z")

</div>

how can I load the image names into a String grid?

---

<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 6, 2022, 2:34pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/5 "2022-11-06T14:34:40Z")

</div>

> [@yoyo](#):
>
> ```auto
> images.push(img);
> images.push(img);
> 
> ```

Replace this by

```auto
imageNames.push (j + 1 + ".jpg");
imageNames.push (j + 1 + ".jpg");

```

`imageNames` : declare this as a new array

---

<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 6, 2022, 8:33pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/7 "2022-11-06T20:33:44Z")

</div>

> [@yoyo](#):
>
> ```auto
> let img = loadImage(imagesName[j]);
> images.push(img);
> images.push(img);
> 
> ```

This part doesn’t belong there

After loading the names (after the for loop), first shuffle them.

Then load the images using the names (in a new for loop in setup()). Since the names are with duplicates you don’t load each image twice but just once

Thus we make sure that the two grids are parallel in the sense that the image name and its image are in the same cell of the grid. Only then can we do a comparison using the String name

- Remember when comparing Strings later you can’t use == ; use s1.equals(s2) instead

---

<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 7, 2022, 9:35am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/9 "2022-11-07T09:35:11Z")

</div>

> [@yoyo](#):
>
> `let imgIndex = cy * 4 + cx;`

Where you have this in mouseClicked (better use mousePressed()) introduce a counter as explained above.

```auto
counter ++;

if(counter==1) {
  let imgIndex1 = imgIndex;
}
else if(counter==2) {
  counter=0; // reset
  let imgIndex2 = imgIndex;
  If(imagesName[imgIndex1].equals (imagesName[imgIndex2] )) {
      // ok
      println ("good");
      }else 
      {
       // wrong 
       // close both cards again !!!
       visibleImages[imgIndex1] =false;
       visibleImages[imgIndex2] =false;
       println ("No.");
      }
}

```

- counter :: make it a global variable, imgIndex1 and  
imgIndex2 as well

Good progress here!

---

<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 7, 2022, 9:53am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/10 "2022-11-07T09:53:44Z")

</div>

> [@yoyo](#):
>
> `shuffle(imagesName, true);`

This should be after the for loop, not inside of it

So it’s between the two for loops

---

<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 7, 2022, 10:08am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/12 "2022-11-07T10:08:14Z")

</div>

> [@yoyo](#):
>
> should I let the imgIndex1 and imgIndex2 be 0 at global first?

That’s okay, just say 0

We define them in `mousePressed()`

---

<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 7, 2022, 10:12am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/14 "2022-11-07T10:12:12Z")

</div>

> [@yoyo](#):
>
> ```auto
> if (imagesName[imgIndex1].equals(imagesName[imgIndex2])) {
> // ok
> 
> ```

I don’t know.

Maybe I was wrong about `.equals()...` (probably true in processing but not in p5.js)

Just try

```auto
if (imagesName[imgIndex1] == imagesName[imgIndex2]) {
      // ok

```

---

<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 7, 2022, 3:21pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/15 "2022-11-07T15:21:15Z")

</div>

You also need to count  
correct pairs.

When `== 8` you won

---

<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 7, 2022, 5:46pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/19 "2022-11-07T17:46:45Z")

</div>

> [@yoyo](#):
>
> `let imgIndex1`

```auto
let imgIndex1;
let imgIndex2;

```

define both before setup ()

Remove the `let` in the old position in the code

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [November 7, 2022, 6:08pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/20 "2022-11-07T18:08:56Z")

</div>

OMG, I did it!!! Thank you guys

---

<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 7, 2022, 8:33pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/21 "2022-11-07T20:33:59Z")

</div>

Do you have a You Won message?

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [November 8, 2022, 7:20am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/22 "2022-11-08T07:20:16Z")

</div>

Yes! I add a counter to counter the no. of pairs that match. If it is \>=8 it will win and show the You Won message!

---

<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 8, 2022, 10:16am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/23 "2022-11-08T10:16:33Z")

</div>

Well done! Congratulations!

---

<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 8, 2022, 11:08am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/25 "2022-11-08T11:08:49Z")

</div>

That’s true!

Please (after shuffling) use the 2nd for loop (from the preload function) again to load the images again. Then the two arrays will match again.

---

<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 8, 2022, 11:15am UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/26 "2022-11-08T11:15:32Z")

</div>

> [@yoyo](#):
>
> ```auto
> shuffle(imagesName, shuffle)
> restart = false;
> 
> ```

Between these two lines.

From an architectural perspective you could consider writing an function initialize() that you call from preload AND from your reset section.

Because the two parts (in preload and reset) are almost the same.

Unless you load another set of images upon reset.

---

<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 8, 2022, 5:03pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/29 "2022-11-08T17:03:01Z")

</div>

I am not sure about that.

please try this instead:

```auto
function keyPressed() {
  if (key == 'r'||key == 'R') {
    restart = true;
    print("here");
  }
}

```

Do you receive the word “here” in the console?

---

<div class="post-metadata">

**Author:** ![yoyo](https://avatars.discourse-cdn.com/v4/letter/y/41988e/32.png) [@yoyo](https://discourse.processing.org/u/yoyo)\
**Post date:** [November 8, 2022, 5:15pm UTC](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592/30 "2022-11-08T17:15:57Z")

</div>

yes!  
I can receive the word “here”

[Next page](https://discourse.processing.org/t/how-to-make-a-card-matching-game-in-p5-js-memory/39592.md?page=2)