Interactive Light up Grid Game

Processing Coding Questions
1

Hi everyone,

The outline of the project is we create a simple 3 x 3 grid of boxes. Then what I want to achieve is a random box will light up and you have to put the mouse in that box. Then another box will light up and so on.

After this I would like to add in time limits and scores but keep it relatively simple first. I have only been using Processing for a few weeks so I am fairly new but any help would be great.

I have found a grid of boxes which I understand and can manipulate. The code is below. Can anyone point me in the right direction?

Box [] boxes = new Box[26]; 
 
void setup() { 
  size(600, 600); 
  // smooth();
 
 
  int x = 10; // dist left  
  int y = 10;  // dist top
  int k=0;
  for (int i = 0; i < 3; i += 1) { 
    for (int j = 0; j < 3; j += 1) { 
 
      boxes[k] = new Box(x+i*153, y+j*153, 50, 50, 50);
      k++;
    } 
  } 
} 
 
 
void draw() { 
  background(255);
 
  for (int i = 0; i < 9; i++) { 
    //boxes[i].update(); 
    boxes[i].display();
    print (i);
    print ("  ");
  } 
} 
 
class Box {
 
  float x;
  float y; 
 
  float w=50;
  float h=50; 
 
  int col;
 
  Box ( float x, float y, float w, float h, int col ) {
    this.x=x;
    this.y=y;
  } 
 
  void display() {
    stroke(0);
    rect (x, y, w, h);
    println (x);
  } 
}
2

here…




// to do: over() in the class : checks if mouse is over this box using if(......

Box [] boxes = new Box[9];

int timer=0; 
int timeSpan=333; 

int currentBoxIndex=-1;
int  score=0; 

void setup() {
  size(600, 600);
  // smooth();

  int x = 80; // dist left
  int y = 80; // dist top
  int k=0;
  for (int i = 0; i < 3; i += 1) {
    for (int j = 0; j < 3; j += 1) {
      boxes[k] = new Box(x+i*153, y+j*153, 
        50, 50, 
        color(111));
      k++;
    }
  }
  timer=millis();
}

void draw() {
  background(255);

  if (millis()-timer>timeSpan) {
    // reset
    for (int i = 0; i < 9; i++) {
      boxes[i].col=color(111);
    }
    currentBoxIndex=int(random(9));
    boxes[currentBoxIndex].col=color(255, 0, 0); //RED

    timer=millis();
    timeSpan=int(random(222, 999));
  }

  for (int i = 0; i < 9; i++) {
    //boxes[i].update();
    boxes[i].display();
    //  print (i);
    //  print (" ");
  }
}

void mousePressed() {
  if (currentBoxIndex==-1)
    return; // leave here 

  if (boxes[currentBoxIndex].over()) {
    score++;
    println(score); 
    return;
  }
}

// ===========================================================

class Box {

  float x;
  float y;

  float w=0;
  float h=0;

  int col;

  Box ( float x, float y, 
    float w, float h, 
    int col ) {
    this.x=x;
    this.y=y;
    this.w=w;
    this.h=h;
    this.col=col;
  }

  void display() {
    stroke(0);
    fill(col); 
    rect (x, y, w, h);
    //println (x);
  }

  boolean over() {
    //to do
    return true;
  }//method
  //
}//class
//
3

Thank you very much for getting back with a reply so quickly. This is great but when I use the code you have put here the red square just keep randomly appearing in different boxes. What I am trying to do is not have the red square change location until the mouse is hovered over it, if that makes sense? Are you suggesting that in boolean over() I write an if statement ?

Apologies if I am not getting my point across clearly.

4

Replace this by if(newRect) {

make newRect a global boolean var and set it to false initially

In mousePressed when the condition therein is met, set it to true

(No timer needed then)

To the content of over()

yes: if(mouseX>x&&mouseY>…

5

At the moment the check is performed in mousePressed, so only when the mouse is clicked

Otherwise move the content to draw

Reason why I used a timer is that the user can fail to click and then he doesn’t get a point

Your approach is also okay, you measure how fast he moves the mouse. You need to measure the time