# Create a game (point and click)

**URL:** <https://discourse.processing.org/t/create-a-game-point-and-click/27530>\
**Category:** Coding Questions\
**Created:** [February 1, 2021, 5:07pm UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530 "2021-02-01T17:07:42Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Torikusu](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@Torikusu](https://discourse.processing.org/u/Torikusu)\
**Post date:** [February 1, 2021, 5:07pm UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/1 "2021-02-01T17:07:42Z")

</div>

Hello, I am a beginner in processing I would like to create a clicker on processing, to clarify, I would like a square or circle to appear and disappear when we click on it or if we have not clicked after a certain time but I can’t do it. I manage to make squares appear randomly every second but the old ones don’t come off and I can’t press on them, I end up with lots of unnecessary squares.

int x,y, couleur;  
int mx,my;  
boolean cible\_en\_cours;  
long temps, debut;

void setup()  
{  
size(700,700);  
cible\_en\_cours=true;  
}  
void draw()  
{  
temps=millis();  
if(cible\_en\_cours)  
{  
x=round(random(0,700));  
y=round(random(0,700));  
}  
{  
if (cible\_en\_cours)  
{  
x=300;  
y=300;  
fill(0,255,0);  
rect(x,y,30,30);  
cible\_en\_cours=false;  
}  
{  
x=round(random(0,700));  
y=round(random(0,700));

mx = mouseX;  
my= mouseY;

if((mx\>=x)&&(my\>=y)&&(my\<=y+30))  
{  
fill(0,0,0);  
rect(x+5,y+5,20,20);  
cible\_en\_cours=true;  
}  
}  
}  
}

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 1, 2021, 6:09pm UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/2 "2021-02-01T18:09:07Z")

</div>

Hi,

you need to clarify a bit more what you want to do :

- do you want to display squares when you click and make them disapear when you click another time on it ?
- or should they appear randomly and then disapear when you click on it ?

Anyway, I can start helping you with the following points :

- Processing doesn’t store by itself data about what you draw on the canvas. So if you want to interact with the shapes you displayed on the canvas, you need to store at least position data in an array or arrayList
- you have to consider the canvas as a blank sheet on which you draw with a pen on it. Once you draw on it, you can’t erase the drawing, so the best is to replace the sheet with another one by coloring the background (`background(255)` for example)

=\> So the best thing is probably to “redraw” everything at each iteration of the `draw` loop. So the first step would be to create new positions data and store them, and the second one would be to draw them.

Here is an example with an arrayList to store these positions :

```auto
ArrayList<PVector> squaresPos = new ArrayList<PVector>(); // to store square positions
int siz = 30;

void setup(){
  size(400, 400);
  background(255);
}

void draw(){
   if (frameCount % 60 == 0){ // once by second
       // create a random vector in the canvas size
       float x = random(siz, width - siz);
       float y = random(siz, height - siz);
       squaresPos.add(new PVector(x,y)); // add it to squaresPos array
   }
   
   for (PVector p : squaresPos){ // we iterate on the array. P is the current value 
   push();
     fill(0);
     noStroke();
      rect(p.x, p.y, 30, 30); 
    pop();
   }
}

```

You can check the arrayList documentation here : [https://www.processing.org/reference/ArrayList.html](https://www.processing.org/reference/ArrayList.html)

PS: On peut faire ça en français aussi si besoin, mais le sujet peut potentiellement aider d’autres personnes, donc la langue internationale est préférée.  
Penses à formater ton code avec le bouton ` </>` pour faciliter la lecture.

---

<div class="post-metadata">

**Author:** ![Torikusu](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@Torikusu](https://discourse.processing.org/u/Torikusu)\
**Post date:** [February 1, 2021, 6:33pm UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/3 "2021-02-01T18:33:27Z")

</div>

Hi,  
thank you for your answer, to clarify the matter, I would like a single square to appear at a random time and then disappear when you click on it or when it takes too long and then there is another one that appears and so on.  
A bit like the “OSU” game.

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 2, 2021, 9:06am UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/4 "2021-02-02T09:06:21Z")

</div>

Ok. Then no need of an array ; a simple variable `PVector` will be enough. You can the same as previously shown :

```auto
PVector p; // to store square position
int siz = 30;

void setup(){
  size(400, 400);
  background(255);
}

void draw(){
   if (frameCount % 60 == 0){ // once by second
       // create a random vector in the canvas size
       float x = random(siz, width - siz);
       float y = random(siz, height - siz);
       p.set(x,y);
   }
  
   push();
     fill(0);
     noStroke();
      rect(p.x, p.y, 30, 30); 
    pop();

}

```

To set a timeout, you were on the right way with `millis()` :

```auto
long timestamp = 0;
int timeout = 3000; // 3 sec

void draw(){
    if (millis() >= timestamp){
            timestamp = millis() + timeout;
            // do what you want here (eg. reset a new square)
    }
}

```

So to make them appears randomly, you have to change the line `if (frameCount % 60 == 0){ // once by second` with something taking in account some randomness; I would add another condition to it like :

```auto
random(1) > .5

```

To make squares disapear when you click on it, you can reuse the condition you’ve already written adapted to our situation :

```auto
boolean display = true;

void draw(){
if (mouseX > p.x && mouseX < p.x + siz && mouseY > p.y && mouseY < p.y + siz){
    display = !display ; // " ! " == reverse a boolean value
}

if (display){
    rect(p.x, p.y, siz, siz);
}
}
```

---

<div class="post-metadata">

**Author:** ![Torikusu](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@Torikusu](https://discourse.processing.org/u/Torikusu)\
**Post date:** [February 2, 2021, 9:43am UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/5 "2021-02-02T09:43:50Z")

</div>

Hi,  
I don’t understand how to write your order when i try it produces errors

---

<div class="post-metadata">

**Author:** ![Pr0tonX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/pr0tonx/32/2590_2.png) [@Pr0tonX](https://discourse.processing.org/u/Pr0tonX)\
**Post date:** [February 2, 2021, 9:54am UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/6 "2021-02-02T09:54:43Z")

</div>

Please post your code to see what’s wrong

---

<div class="post-metadata">

**Author:** ![CodeMasterX](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/codemasterx/32/2942_2.png) [@CodeMasterX](https://discourse.processing.org/u/CodeMasterX)\
**Post date:** [February 2, 2021, 12:25pm UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/7 "2021-02-02T12:25:38Z")

</div>

here is my code. Feel free to customize it.

> **Code**
>
> ```auto
> int wait = 1000, lastTime = 0, score = 0, size = 50;
> PVector pos = new PVector(random(0,600-size),random(0,600-size));
> void setup() {
> size(600,600);
> }
> void draw() {
> background(0);
> square(pos.x,pos.y,size);
> if(mousePressed && mouseX > pos.x && mouseX < pos.x + size && mouseY > pos.y && mouseY < pos.y + size) {
> score++;
> pos = new PVector(random(width-size),random(height-size));
> lastTime = millis();
> }
> if(lastTime + wait < millis()) {pos = new PVector(random(width-size),random(height-size)); lastTime = millis(); }
> }
> 
> ```

---

<div class="post-metadata">

**Author:** ![Torikusu](https://avatars.discourse-cdn.com/v4/letter/t/9f8e36/32.png) [@Torikusu](https://discourse.processing.org/u/Torikusu)\
**Post date:** [February 2, 2021, 1:20pm UTC](https://discourse.processing.org/t/create-a-game-point-and-click/27530/8 "2021-02-02T13:20:40Z")

</div>

Thanks a lot, now I will try to add a score to display as well as a score multiplier 👌 👍