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
assets/qa.csv
file
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
https://editor.p5js.org/kll/sketches/t1gPyCfoR
finally i want link here to the end of the tutorial:
