Game issues for christmas

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 )

  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

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.

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

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

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

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

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

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

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.
sorry need 85 lines.

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. )

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


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

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

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

1 Like

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

1 Like

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

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


1 Like

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?


Then use functions to keep draw() lean like so

if(state==0) {
else if (state==1) {
else {
text("BIG ERROR",39,39);

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

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


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:

if(state==0) {
else if (state==1) {
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

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


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

No. (Or I don’t get it)

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.

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


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

just add the state variable where you check the mouse

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

1 Like

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

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