simple-canvas-library
    Preparing search index...

    Class GameInterface

    GameInterface extends GameCanvas functionality with UI components.

    This class provides a complete game interface with a top bar, canvas, and bottom bar. You can use it to add UI controls such as buttons, sliders, and number inputs to your game layout.

    import { GameInterface } from "simple-canvas-library";

    const gi = new GameInterface();
    const topBar = gi.addTopBar();
    topBar.addButton({
      text: "Game Title",
    });

    ### Example: Add a bottom bar with a button
    const bottomBar = gi.addBottomBar();
    bottomBar.addButton({
      text: "Start Game",
      onclick: () => gi.dialog("Game Started!", "Good luck!")
    });

    gi.run();

    See also:

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Methods

    addBottomBar addClickHandler addDrawing addHandler addResizeHandler addTopBar destroy dialog getBottomBar getContainer getGameState getIsRunning getSize getTopBar pause removeBottomBar removeClickHandler removeDrawing removeHandler removeResizeHandler removeTopBar replaceDrawing reset restoreDrawing resume run stop

    Constructors

    Methods

    • Syntactic sugar for addHandler('click',h).

      Parameters

      • h: (params: { event: Event; type: string; x: number; y: number }) => boolean | void

        A function to handle click events

      Returns number

      ID that can be used to remove handler with removeClickHandler

      let xpos = 100;
      let ypos = 100;
      // Register a handler to update our variable each time
      // there is a click.
      game.addClickHandler(
          function ({x,y}) {
            // set variables...
            xpos = x;
            ypos = y;
          }
      )
      // Now create a drawing that uses the variable we set.
      game.addDrawing(
          function ({ctx}) {ctx.fillRect(xpos,ypos,30,30)}
      )

    • Add a drawing to our drawing queue (it will remain until we remove it).

      Parameters

      Returns number

      ID that can be used in removeDrawing callback to remove drawing.

      game.addDrawing(
          function ({ctx,elapsed}) {
              ctx.beginPath();
              ctx.moveTo(200,200);
              ctx.lineTo(100,200+Math.sin(elapsed/10)*200);
              ctx.stroke();
          }
      );

      game.addDrawing(
           { x : 0,
             y : 0,
             w : 100,
             h : 100,
             draw ({ctx,stepTime,width,height}) {
                this.x += stepTime/20;
                this.y += stepTime/20;
                if (this.x > width) { this.x = 0 }
                if (this.y > height) { this.y = 0 }
                ctx.fillRect(this.x,this.y,this.w,this.h)
             },
           }
      );

      game.addDrawing(
          function ({ctx,elapsed,width,remove}) {
              const x = elapsed / 20
              ctx.fillRect(x,20,20,20);
              if (x > width) { remove() }
          }
      );

    • Register a handler h for eventType

      Parameters

      • eventType: "click" | "dblclick" | "mousedown" | "mousemove" | "mouseup"

        type of event to handle

      • h: (params: { event: Event; type: string; x: number; y: number }) => boolean | void

        handler function

      Returns number

      ID that can be used to remove handler with removeHandler

      game.addHandler('mousemove',
          function ({x,y}) {
              console.log("Mouse moved to",x,y);
          }
      );

    • Register a handler h for eventType

      Parameters

      • eventType: "keydown" | "keypress" | "keyup"

        type of event to handle

      • h: (params: { event: KeyboardEvent; type: string }) => boolean | void

        handler function

      Returns number

      ID that can be used to remove handler with removeHandler

      game.addHandler('mousemove',
          function ({x,y}) {
              console.log("Mouse moved to",x,y);
          }
      );

    • Register a handler h for eventType

      Parameters

      • eventType: "resize"

        type of event to handle

      • h: (
            params: {
                canvas: HTMLCanvasElement;
                ctx: CanvasRenderingContext2D;
                height: number;
                setCanvasSize: (w: number, h: number) => void;
                width: number;
            },
        ) => boolean
        | void

        handler function

      Returns number

      ID that can be used to remove handler with removeHandler

      game.addHandler('mousemove',
          function ({x,y}) {
              console.log("Mouse moved to",x,y);
          }
      );

    • Register a handler h for resize

      Parameters

      • h: (
            params: {
                canvas: HTMLCanvasElement;
                ctx: CanvasRenderingContext2D;
                height: number;
                setCanvasSize: (w: number, h: number) => void;
                width: number;
            },
        ) => boolean
        | void

      Returns number

    • Add and return a top bar for UI components. If a top bar already exists, returns the existing one.

      Returns TopBar

    • Destroy the interface and clean up DOM elements

      Returns void

    • Show a simple dialog with a message

      Parameters

      • title: string
      • Optionalmessage: string
      • OptionalonClose: () => void

      Returns HTMLDialogElement

    • Get the main container element

      Returns HTMLElement

    • Get the current game state

      Returns "stopped" | "running" | "paused"

    • Remove a drawing by its ID.

      Parameters

      • idx: number

        drawing ID to remove (return value from addDrawing).

      Returns void

    • Restore a previously removed drawing (start drawing again).

      Parameters

      • idx: number

        drawing ID to restore (start drawing again).

      Returns void

    Settings

    Member Visibility

    On This Page

    Example: Add a top bar with a title
    Constructors
    Methods