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

Processing Coding Questions
1

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:

2

you mean with the mouse?

3

yes, click the images using the mouse

4

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)

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

// --------------------------------------------------------------------
5

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.

6

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.

8

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(…

9

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

12

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)

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:

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

13

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

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

14

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

15

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

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

  orderByMouse_i++;
16

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

1 Like
17

also, what is “orderByMouse_i”? it says this variable does not exist

18

Yes

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)

counter must be 4 when the user has won

19

I declared the value before void setup().

int orderByMouse_i = 0;

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

20

Does it work?

This should be sufficient, no?

21

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

22

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

23

That’s not an example but real code