# 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:** 1\
**Showing post:** 25

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

---

_[View the full topic](https://discourse.processing.org/t/game-issues-for-christmas/14780)._