Joystick plugin for Litecanvas

Adds a virtual joystick to litecanvas games.

Tip

This plugin is automatically loaded on Litecanvas playground.

Install

NPM: npm i @litecanvas/plugin-joystick

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

Basic Usage

import litecanvas from "litecanvas"
import pluginJoystick from "@litecanvas/plugin-joystick"

let actor

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

function init() {
  use(pluginJoystick) // load the plugin

  actor = {
    x: W / 2,
    y: H / 2,
    speed: 200,
  }
}

function update(dt) {
  if (joystick.on) {
    const { angle, force } = joystick
    actor.x += actor.speed * force * cos(angle) * dt
    actor.y += actor.speed * force * sin(angle) * dt
  }
}

function draw() {
  cls(0)
  circfill(actor.x, actor.y, 32, 3)
}

Live Demo

For more advance usage, check the samples code or clone this repository to run them locally:

git clone https://github.com/litecanvas/plugin-joystick
cd plugin-joystick
npm install
npm run dev