# Game issues for christmas

**URL:** <https://discourse.processing.org/t/game-issues-for-christmas/14780>\
**Category:** Coding Questions\
**Created:** [October 18, 2019, 3:30pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780 "2019-10-18T15:30:40Z")\
**Posts on this page:** 20\
**Page:** 2

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 19, 2019, 2:43am UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/21 "2019-10-19T02:43:03Z")

</div>

if you follow my second example first, it is not about array or class

just use variables and functions  
and a organized writing style

might help.

* * *

after this ( for all buttons )

```auto
  let x1 = 100, y1 = 100, w1 =80, h1 =30, sel1 = false;
  let x2 = x1, y2 = y1+h1+10, w2 =w1, h2 =h1, sel2 = false;

```

you see exactly where you would need what array

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 2:50am UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/22 "2019-10-19T02:50:24Z")

</div>

Sorry i appreciate all the help. Being that this is my 4th day i am still not 100% on how that code you just wrote is for the buttons? im going to maybe watch more videos on the arrays and classes and see if i can figure out starting fresh. your example you sent me already looks better than what i have haha. im not even sure how to get from that example to being able to switch states to get to like a question screen from that grid.I need to do more research.

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 19, 2019, 2:51am UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/23 "2019-10-19T02:51:57Z")

</div>

sorry, from here it looks like you not even look at my ONE BUTTON example i just wrote for you?

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 2:52am UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/24 "2019-10-19T02:52:58Z")

</div>

are you talking about this" if ( over( ) && r ) { }"

---

<div class="post-metadata">

**Author:** ![kll](https://yyz2.discourse-cdn.com/flex036/user_avatar/discourse.processing.org/kll/32/964_2.png) [@kll](https://discourse.processing.org/u/kll)\
**Post date:** [October 19, 2019, 2:53am UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/25 "2019-10-19T02:53:26Z")

</div>

start with a pure ONE BUTTON by function, ( no array / no class … )

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/5hBxVwuAP)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

need 30 lines,  
and in 3 sec have 2 buttons ( remove // )  
now need 33 lines  
so you see already how the function & variables structure pays off

 ![p5js_button_function_for_2](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/d/df552a7c024a6856de5f9b33a22e5e4184f5e97e.png)

* * *

as a next step can use array over this button(s)

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/8013oh02C)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

sorry, again need 58 lines… but have your 30 buttons already

 ![p5js_button_function_array_grid](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/7/7729d40786901d3c0e7a3770259691fb8fc28074.png)

* * *

now i want show you the difference between many arrays  
and one array containing elements of a class  
where the elements not only are the memory of the ( mixed type ) variables ( record structure )  
also can have integrated methods. ( like its own draw / over / …)

to make the understanding easier i not changed the functionality between  
arrays .vs. array of class  
so more easy for you to compare.

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/1rngamTLO)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

sorry need 85 lines.

 ![p5js_button_function_array_grid_class](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/6/6c2c8b098f7a6411df88dc3db6806e687c1335b5.png)

* * *

later in the discussion we talked about your game need a state structure  
( from where you can call above developed screens with the buttons… )  
it is a little bit more complicated as you know already  
as to states add have

- questions and
- answers…( WIN / LOSE /TYPO )

so i put that into a extra little framework  
( as it not contains all button and array code it is primitive but easy to read. )

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/ZIb8cH91C)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

* * *

while in your code all texts for questions and answers  
or "hard coded "  
and you have understood it might be better to have it in arrays,  
actually a total different way would be much better,  
separate the game code from the data!  
so question and answers texts / also the right answer info …  
can be stored in a file  
( i choose a .csv file you can even work in spreadsheet / excel and upload )  
and that can load to a table object what works different but even better as a array.

this combines already the the state system with the

> assets/qa.csv

file  
and is a playable game already besides not have the good buttons

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/0J_kaqmYy)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

* * *

the reason for using a extra code file should be re usability.  
so you have a function /  
or a class ( for what it is the the pure reason they exist: to be re used )  
you want use from several projects you could  
download and upload that as a extra file.js.  
But to get that running need to declare it in the index.html  
( or your browser would not know that he must download it )

to show that better i made a little play code  
[https://editor.p5js.org/kll/sketches/t1gPyCfoR](https://editor.p5js.org/kll/sketches/t1gPyCfoR)

 ![js](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/0/0c6a6ed83b1c08460ccf980bcf612259b9990b25.png)

* * *

finally i want link here to the end of the tutorial:

> **[p5.js Web Editor](https://editor.p5js.org/kll/sketches/IRpKg9xfg)**
>
> A web editor for p5.js, a JavaScript library with the goal of making coding accessible to artists, designers, educators, and beginners.

 ![p5js_qa_game_007bpng](https://canada1.discourse-cdn.com/flex036/uploads/processingfoundation1/original/2X/4/42a680fc209454b40e700ee73cc72e2e154a307c.png)

---

<div class="post-metadata">

**Author:** ![biran4454](https://avatars.discourse-cdn.com/v4/letter/b/9dc877/32.png) [@biran4454](https://discourse.processing.org/u/biran4454)\
**Post date:** [October 19, 2019, 2:39pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/26 "2019-10-19T14:39:01Z")

</div>

When I was just learning coding, I would have just given up and used Scratch `:)`  
Well done for persevering.

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 3:52pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/27 "2019-10-19T15:52:13Z")

</div>

omg sorry i didnt see that last night I didn’t scroll up… Then when it was time to respond to you I was blocked to only sending 12 messages a day because I just signed up for the forum… How does the state function work so I can use the examples you made and incorporate them into mine with different States

---

<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:** [October 19, 2019, 4:25pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/28 "2019-10-19T16:25:45Z")

</div>

> [@Mike](#):
>
> when i click lets say question in category 3 for 800 points its also clicking the show answer button i made on the draw function for showing the answer.

The state thing is not a function but a variable technically.

It’s used to tackle the problem you described in the quote.

You need a global variable int state = 0;

You need to set it to 0 or 1 etc. Depending on whether you are in the screen where you Show the grid or where you show the answer.

Hence the program knows where you are.

When you check the mouse check the state and say && state == 1 or what ever to make the button work only in the correct button

Actually consider rewrite the thing using kll’s example

Chrisir

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 4:54pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/29 "2019-10-19T16:54:01Z")

</div>

Yea that seems like it’s gonna be the smoothest transition to just start fresh. So when I’m in draw() if I choose state 0 or 1 the other state will not display anything at all correct? So in draw have if (state = 0) and then the board coding? And then if( state = 2) draw the questions and so on?

---

<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:** [October 19, 2019, 4:58pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/30 "2019-10-19T16:58:10Z")

</div>

> [@Mike](#):
>
> then if( state = 2) draw…

Yes

Then use functions to keep draw() lean like so

```auto
if(state==0) {
drawForStateGrid();
}
else if (state==1) {
drawForStateAnswer(); 
}
else {
text("BIG ERROR",39,39);
}

```

---

<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:** [October 19, 2019, 4:59pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/31 "2019-10-19T16:59:39Z")

</div>

Main thing is to make a proper data structure: a grid / 2D array to hold the fields so you can for-loop over them

the if else structure should also be in mousePressed so don’t have overlapping buttons but mouse is checked only against the buttons of that screen /state

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 5:08pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/32 "2019-10-19T17:08:43Z")

</div>

The mousepressed functions just need to basically let state = to whatever screen I want and I can use mouse over to make specific buttons to do specific tasks gotcha? Still I’m gonna need either 60+ States for each of the questions and answers in round 1 that’s slot of States

---

<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:** [October 19, 2019, 5:32pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/33 "2019-10-19T17:32:58Z")

</div>

??

I mean it would be better to store the buttons in a list / array!

It’s an array of class Button

Then you can for loop over the array.

There is one mousepressed function

inside it:

```auto
if(state==0) {
checkmouseForStateGrid();
}
else if (state==1) {
checkmouseForStateAnswer(); 
}
else {
text("BIG ERROR #2",39,39);
}

```

You only need 3 states :

- show grid is 0

- show answer 1

- show question 2

The position of the buttons is something else than the state.

See my post or kll’s post

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 5:53pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/34 "2019-10-19T17:53:18Z")

</div>

Not the bottoms but the questions and answers I need separate states for all of those don’t I?? If there is 30 questions in round 1 don’t I need 30 states for that

---

<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:** [October 19, 2019, 5:58pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/35 "2019-10-19T17:58:44Z")

</div>

??

You need one variable state. Since it’s of type integer it can be 0,1,2…

Now 0 just says the entire program is in screen for the grid.

1 for an answer.

The buttons are another thing. I‘d use an array for the buttons of the grid. See my example

> [@Mike](#):
>
> need separate states for all of those don’t I?

No. (Or I don’t get it)

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 6:19pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/36 "2019-10-19T18:19:34Z")

</div>

Yea that makes sense but if I’m putting 30 questions in the round 1 of the game if you click a button on the main board it should go to a screen with the question. And then with another button press reveal the answer on another screen… So if I have 30 questions and answers that will be one state each… That’s alot of States. Or it can reveal the answer on the question screen I don’t care but that’s still 30 + States.

---

<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:** [October 19, 2019, 6:28pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/37 "2019-10-19T18:28:30Z")

</div>

> [@Mike](#):
>
> if I’m putting 30 questions in the round 1 of the game if you click a button on the main board it should go to a screen with the question

when you look at my example:

There is a class Button which contains the cover (800 $ for hidden card) and the answer and the question. We have an array of that class.

Now you need only one state but you display the text that is stored in the current cell of the 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:** [October 19, 2019, 6:35pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/38 "2019-10-19T18:35:20Z")

</div>

Hm.

when you want to stick with your approach: It’s a good program.

just add the state variable where you check the mouse

---

<div class="post-metadata">

**Author:** ![Mike](https://avatars.discourse-cdn.com/v4/letter/m/58f4c7/32.png) [@Mike](https://discourse.processing.org/u/Mike)\
**Post date:** [October 19, 2019, 7:04pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/39 "2019-10-19T19:04:10Z")

</div>

I’ll see tonight if I can clean up mine and I’ll resend it and see if you guys think it’s functional or If you think I need to scrap it

---

<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:** [October 19, 2019, 7:26pm UTC](https://discourse.processing.org/t/game-issues-for-christmas/14780/40 "2019-10-19T19:26:18Z")

</div>

stick with your approach: It’s a good program.

just add the state variable where you check the mouse

set the state variable

- to 0 when you enter the grid

- to 1 when you show an answer

> [@Mike](#):
>
> when i click lets say question in category 3 for 800 points its also clicking the show answer button

So especially in these if clause you want to add

- … && state==0 in the if clause of the question

- and … && state==1 in the if clause of the show answer button

so the program can distinguish between the two situations and the buttons are NOT evaluated both

[Previous page](https://discourse.processing.org/t/game-issues-for-christmas/14780.md?page=1)

[Next page](https://discourse.processing.org/t/game-issues-for-christmas/14780.md?page=3)