I am wanting to create a browser based Game which will have multiple buttons. I am also beginning to learn encapsulation by to creating a class which when called with the method show() will create 3 different elements(maybe with a loop?). I come with experience in React.js and I'm not sure if my example is correct but:

class Button {
   constructor() {
     this.text = "a button";
     this.colour = "blue";
   }
   show() {
     // some logic to show the button
   }
}

and I am thinking of using it in another class such as Game maybe which is initialised on load.

class Game {
    constructor() {
      const button = new Button();
      showButtons();
    }

    showButtons() {
       // I want 3 different button elements here which can be different colours/text 
       button.show();
    }

}

I am also doing this for extensibility, so that when someone needs a fourth button, they can just re-use the button class and change the text, or colour?

<div class="buttons"></div>

the first step in building this game is just to render 3 button elements in the above div. This is my question. How can I achieve this and is it the correct way? and I want to do this in vanilla JS

Please help and thanks in advance :-)

0 Answers