Keyboard plugin for litecanvas

Plugin to handle keyboard events in litecanvas games.

Install

NPM: npm i @litecanvas/plugin-keyboard

CDN: https://unpkg.com/@litecanvas/plugin-keyboard/dist/dist.js

Usage

import litecanvas from "litecanvas"
import pluginKeyboard from "@litecanvas/plugin-keyboard"

let color, holding

litecanvas({
  loop: { init, draw },
})

// load the plugin
use(pluginKeyboard, {
  listeners: { keyup, keydown, keypress },
})

function init() {
  color = 0
  holding = false
}

function draw() {
  cls(color)
  text(10, 10, "HOLDING: " + (holding ? "YES" : "NO"), color + 3)
}

function keydown(key) {
  if ("space" === key) {
    holding = true
  }
}

function keyup(key) {
  if ("space" === key) {
    holding = false
  }
}

function keypress(key) {
  switch (key) {
    // press enter to change the background color
    case "enter":
      color++
      break

    // press ESC to display a message
    case "escape":
      alert("Escape pressed")
      break
  }
}

See in playground.

Methods

There is also a method iskeydown(key: string): boolean that returns true when a key is down.

import litecanvas from "litecanvas"
import pluginKeyboard from "@litecanvas/plugin-keyboard"

let x = 0

litecanvas({
  loop: { init, draw },
})

// just load the plugin
// without listeners
use(pluginKeyboard)

function update(dt) {
  // move to right when arrow right is down
  if (iskeydown("right")) {
    x += 100 * dt // move at 100px/s
  }
}

function draw() {
  cls(0)
  rect(x, 0, 20, 20, 3)
}

Configuration

use(pluginKeyboard, {
  // If `true` automatically calls the Event#preventDefault
  // see: https://developer.mozilla.org/en-US/docs/Web/API/Event/preventDefault
  preventDefault: boolean, // default: `true`

  // The keyboard event listeners
  listeners: {
    keyup: (key: string, ev: KeyboardEvent): void, // default: window.keyup (if exists)
    keydown: (key: string, ev: KeyboardEvent): void,  // default: window.keydown (if exists)
    keypress: (key: string, ev: KeyboardEvent): void,  // default: window.keypress (if exists)
  }
})