https://github.com/litecanvas/plugin-joystick

🕹️ Add virtual joystick in litecanvas games
https://github.com/litecanvas/plugin-joystick

litecanvas litecanvas-plugin

Last synced: about 2 months ago
JSON representation

🕹️ Add virtual joystick in litecanvas games

• Host: GitHub
• URL: https://github.com/litecanvas/plugin-joystick
• Owner: litecanvas
• License: mit
• Created: 2024-03-01T13:25:55.000Z (10 months ago)
• Default Branch: main
• Last Pushed: 2024-09-12T13:31:09.000Z (4 months ago)
• Last Synced: 2024-10-27T17:04:39.522Z (2 months ago)
• Topics: litecanvas, litecanvas-plugin
• Language: JavaScript
• Homepage:
• Size: 49.8 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

README

        
# Joystick plugin for litecanvas

Adds a virtual joystick to [litecanvas](https://github.com/litecanvas/game-engine) games.

## Install

**NPM**: `npm i @litecanvas/plugin-joystick`

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

## Basic Usage

```js

import litecanvas from "litecanvas"

import pluginJoystick from "@litecanvas/plugin-joystick"

litecanvas({

  loop: { init, update, draw },

})

use(pluginJoystick) // load the plugin

actor = {

  x: CENTERX,

  y: CENTERY,

  speed: 100,

}

function update(dt) {

  if (JOYSTICK.active) {

    const force = min(JOYSTICK.force, 2)

    actor.x += actor.speed * force * cos(JOYSTICK.angle) * dt

    actor.y += actor.speed * force * sin(JOYSTICK.angle) * dt

  }

}

function draw() {

  cls(1)

  circfill(actor.x, actor.y, 32, 6)

}

```

[See this demo in litecanvas playground](https://litecanvas.js.org?c=eJx1UdFOwjAUfd9X3Le1WLeJiQ8kGA0SAxpIhAd5XLoOC6Vb2juEmP27oys6En1pem7PueecVEkUPNX71BIaBHmlOcpCg9QSCYWvAEAVabbgRpZIwg%2FE0g7iuNLldh3xYhc%2FqJ8FcamqtdTXm%2BJoUfJtnEmL7og2NmRAjLAUhvduK0BlBWkVUy%2BgzbxuUgCkHAsDQ888DGA0ni3Hb%2B%2FM4eMZr1psSyGyAfST5ITroO4UqcosRUEybMvIHMjr%2FPFpMnumYARWRvvpdL5aLCejl6jxlntBvTcvtEXIC8NFk2cn9S%2FRDRncUEd0kaMDXA391aWCntf2mk22Y6LXqvHoQYYd9fF%2Fte06X6ovC2cm%2FfQ%2Fx5UlLt0frQHFAUnCEhb6lyiKwhOZS8NzqRTxjdg5HIPbPoM7GtTfQDqpSw%3D%3D)

For more details, check the [demo](demo/index.html).