# Can someone help me with this game? (image order)

**URL:** <https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147>\
**Category:** Coding Questions\
**Created:** [February 28, 2021, 7:01pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147 "2021-02-28T19:01:32Z")\
**Posts on this page:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [February 28, 2021, 7:01pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/1 "2021-02-28T19:01:32Z")

</div>

So I’m trying to make a game where processing shuffles the 4 images, and the player just has to click the correct image in a certain order to win. Very simple game, nothing fancy or complicated, just trying to practice something small in processing.

I have 4 images set, and they create 1 whole image, but I want processing to shuffle them in any order, and then all you have to do is click the photos in the exact same order, and a “YOU WIN!” sign pops up, or a “YOU LOSE!” pops up if you don’t click the correct image in order.

For example, if the order of the image is 1, 2, 3, 4 and the the shuffled image is 3, 4, 1, 2, then the player just need to use the mouse to click in the same order: 1, 2, 3, 4. super easy but it’s just to help teach me basic game stuff.

I can’t really find anything online that teaches this type of layout. so can someone help me with this please?

The code I have so far is:

---

<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:** [February 28, 2021, 10:24pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/2 "2021-02-28T22:24:42Z")

</div>

> [@cocopuffs](#):
>
> the player just literally needs to click in the same order

you mean with the mouse?

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [February 28, 2021, 10:26pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/3 "2021-02-28T22:26:24Z")

</div>

yes, click the images using the mouse

---

<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:** [February 28, 2021, 10:50pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/4 "2021-02-28T22:50:46Z")

</div>

I suggest you use an array.

You can easily use another array “order” that you (use as as an index for the images and that you) shuffle to have shuffled images.

Now compare the order he clicked with the order of the images in “order” (rough description, this part is a little harder)

```auto
import java.util.*; 

PImage[] images= new PImage[4] ; //Declare an array of the type of PImage
ArrayList<Integer> list = new ArrayList();  

int[] order = new int[4] ; 

int counter = 0; 

void setup() {
  size(800, 800);

  images[0] = loadImage("IMG_2637_01.png");
  images[1] = loadImage("IMG_2637_02.png");
  images[2] = loadImage("IMG_2637_03.png");
  images[3] = loadImage("IMG_2637_04.png");

  for (PImage img : images) { 
    img.resize(400, 400); //image
  }

  list.add(0); 
  list.add(1);
  list.add(2);
  list.add(3);   

  Collections.shuffle(list);

  int i2=0; 
  for (Integer i : list) {
    order[i2] = i;
    println(order[i2], order[i2]+1); 
    i2++;
  }

  println("---------------");
}//func 

void draw() {
  background(255);

  image( images[order[0]], 0, 0);
  image( images[order[1]], 400, 0);
  image( images[order[2]], 0, 400);
  image( images[order[3]], 400, 400);
}

// --------------------------------------------------------------------

```

---

<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:** [March 1, 2021, 10:48am UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/5 "2021-03-01T10:48:08Z")

</div>

I worked further on this.

You need to work with an array because then you have data (the order) to compare the mouse input to.

**What to do**

Basically in mousePressed() register in which of your 4 screen fields the mouse has been clicked.

- The first time it must be clicked in the field where the first image is located. You need to compare it, and when correct, count it
- The 2nd time it must be clicked in the field where the 2nd image is located. And so on

Setting up a variable makes this easy.

When counting gives 4, the player has won.

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 3, 2021, 4:49am UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/6 "2021-03-03T04:49:16Z")

</div>

How do I set set the filed for the player to click on when the images will be shuffled every game? I think I have to have it set for registering the order of clicking img 1, img 2, img 3, and then img 4.

---

<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:** [March 3, 2021, 7:00am UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/8 "2021-03-03T07:00:30Z")

</div>

> [@cocopuffs](#):
>
> if(mousePressed){

don’t use the Boolean variable here.

Use the function of the same name

void mousePressed () {

}

outside draw ()

Now, use if to see whether the mouse is inside one of the 4 images:

int clicked=-1;  
if (mouseX \>0 &&  
mouseX \< 400 &&  
mouseY \> 0 &&  
mouseY \< 400) { // upper left area!!  
clicked =0;  
println (0);  
}  
else if(…

---

<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:** [March 3, 2021, 7:16am UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/9 "2021-03-03T07:16:05Z")

</div>

clicked is then 0,1,2 or 3 in the example

The Input must match the image number

Then increase a counter after each click so that you compare the 2nd input from the user to the 2nd image number

---

<div class="post-metadata">

**Author:** ![Flolo](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/flolo/32/13874_2.png) [@Flolo](https://discourse.processing.org/u/Flolo)\
**Post date:** [March 3, 2021, 3:58pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/12 "2021-03-03T15:58:20Z")

</div>

Hi, I have a small program here with which you can load a picture.  
(I have one from the Internet: https: [//i.ytimg.com/vi/uFf1j4c70s8/maxresdefault.jpg](https://i.ytimg.com/vi/uFf1j4c70s8/maxresdefault.jpg))

You can set how many columns and how many rows it should have. It is only important that the image can also be divided with this number, otherwise a black border will result because the PImage.get () function only accepts Integers.

Here is the code:

```auto
PImage image;
PImage[][] cuts;
int cols = 5;
int rows = 5;
int w, h;
int selI = 0, selJ = 0;
boolean selected = false;
void setup() {
  size(800, 800);

  image = loadImage("https://i.ytimg.com/vi/uFf1j4c70s8/maxresdefault.jpg");

  surface.setSize(image.width, image.height);

  println(float(width) / cols);

  w = round(float(width) / cols);
  h = round(float(height) / rows);

  setCuts();

  shuffel(cuts);
}
void draw() {
  background(0);
  displayCuts();
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      PVector l = new PVector(i*w, j*h);
      if (mouseX < l.x+w && mouseX > l.x && mouseY < l.y+h && mouseY > l.y) {
        fill(255, 0, 0, 100);
        rect(i*w, j*h, w, h);
      }
    }
  }
  if (selected) {
    fill(0, 255, 0, 122);
    rect(selI*w, selJ*h, w, h);
  }
}
void mousePressed() {
  if (selected == false) {
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
        PVector l = new PVector(i*w, j*h);
        if (mouseX < l.x+w && mouseX > l.x && mouseY < l.y+h && mouseY > l.y) {
          selI = i;
          selJ = j;
          selected = true;
        }
      }
    }
  } else {
    for (int i = 0; i < cols; i++) {
      for (int j = 0; j < rows; j++) {
        PVector l = new PVector(i*w, j*h);
        if (mouseX < l.x+w && mouseX > l.x && mouseY < l.y+h && mouseY > l.y) {
          swap(cuts, i, j, selI, selJ);
          selected = false;
        }
      }
    }
  }
}
void displayCuts() {
  noFill();
  stroke(255, 0, 0);
  strokeWeight(2);
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      image(cuts[i][j], i*w, j*h, w, h);
      rect(i*w, j*h, w, h);
    }
  }
}
void shuffel(PImage[][] imgArr) {
  for (int i = 0; i < imgArr.length; i++) {
    for (int j = 0; j < imgArr[0].length; j++) {
      swap(imgArr, i, j, floor(random(imgArr.length)), floor(random(imgArr[0].length)));
    }
  }
}
void swap(PImage[][] arr, int aI, int aJ, int bI, int bJ) {
  PImage curr = arr[aI][aJ];
  arr[aI][aJ] = arr[bI][bJ];
  arr[bI][bJ] = curr;
}
void setCuts() {
  cuts = new PImage[cols][rows];
  for (int i = 0; i < cols; i++) {
    for (int j = 0; j < rows; j++) {
      cuts[i][j] = image.get(int(i*w), int(j*h), (w), (h));
    }
  }
}

```

I hope I could help you.  
Florian 😄

---

<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:** [March 3, 2021, 5:27pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/13 "2021-03-03T17:27:57Z")

</div>

> [@cocopuffs](#):
>
> clicked =0;

there are 4 fields and clicked should represent which field has been clicked,  
so you want to say clicked =0; in the 1st section, clicked =1; in the 2nd code section and so on (at the moment, you have `clicked =0;` everywhere. Not good.)

So let’s say image #1 is in screen section 3, user needs to click on screen section 3 first:  
`clicked = 3;`

and

```auto
order[0]

```

should be 3 so

if clicked == order[0] and you are good. winCounter ++;

mouseClickedHowOften goes up anyway ++;

at the end (mouseClickedHowOften reached his max value) winCounter must be 4 for a win

Chrisir

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 3, 2021, 7:53pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/14 "2021-03-03T19:53:24Z")

</div>

Ok, I see what you mean now for the sections. I changed the clicked == … according to the sections! now for the order, I’m not sure what you mean and how this is supposed to be set up, or when I incorporate the text that says YOU WIN

---

<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:** [March 3, 2021, 8:02pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/15 "2021-03-03T20:02:36Z")

</div>

remember that `order[0]` gives you a number (e.g. 3)

So where s/he clicks the first time must be the first image located

```auto
if (order[input] == orderByMouse_i) 
    counter++; 

  orderByMouse_i++;

```

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 3, 2021, 8:04pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/16 "2021-03-03T20:04:36Z")

</div>

I see. Do i place this in the void mousePressed() sectoion?

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 3, 2021, 8:06pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/17 "2021-03-03T20:06:05Z")

</div>

also, what is “orderByMouse\_i”? it says this variable does not exist

---

<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:** [March 3, 2021, 8:09pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/18 "2021-03-03T20:09:37Z")

</div>

> [@cocopuffs](#):
>
> I see. Do i place this in the void mousePressed() sectoion?

Yes

> [@cocopuffs](#):
>
> also, what is “orderByMouse\_i”? it says this variable does not exist

You have to declare it before setup()

I have left a few things to do for you

(orderByMouse\_i tells how often the mouse has been pressed. This is important since with the 1st click he must click the 1st image (in the screen section where it is) and with the 2nd click the 2nd image… this is the Game Logic and these things are hard to google, you need to find them by working with your code)

> [@Chrisir](#):
>
> ` counter++;`

counter must be 4 when the user has won

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 3, 2021, 8:57pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/19 "2021-03-03T20:57:51Z")

</div>

I declared the value before void setup().

int orderByMouse\_i = 0;

Then, for the part that goes in the void mousePressed() section, I put:

---

<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:** [March 3, 2021, 9:07pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/20 "2021-03-03T21:07:08Z")

</div>

Does it work?

> [@Chrisir](#):
>
> ```auto
> if (order[input] == orderByMouse_i) 
> counter++; 
> 
> orderByMouse_i++;
> 
> ```

This should be sufficient, no?

---

<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:** [March 3, 2021, 9:09pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/21 "2021-03-03T21:09:37Z")

</div>

I think what you have would increase counter always. Not good.

---

<div class="post-metadata">

**Author:** ![cocopuffs](https://avatars.discourse-cdn.com/v4/letter/c/6a8cbe/32.png) [@cocopuffs](https://discourse.processing.org/u/cocopuffs)\
**Post date:** [March 3, 2021, 10:16pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/22 "2021-03-03T22:16:43Z")

</div>

So this is how my void mousePressed looks now, but when I click on the images, only 0 pops up on the code page every-time i click any image

---

<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:** [March 3, 2021, 10:20pm UTC](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147/23 "2021-03-03T22:20:19Z")

</div>

> [@Chrisir](#):
>
> ```auto
> if (order[input] == orderByMouse_i) 
> counter++; 
> 
> orderByMouse_i++;
> 
> ```

That’s not an example but real code

[Next page](https://discourse.processing.org/t/can-someone-help-me-with-this-game-image-order/28147.md?page=2)