wanpan11 / joystick

๐ŸŽฎ Virtual joystick | ่™šๆ‹Ÿๆ‘‡ๆ† ๆธธๆˆๆ‰‹ๆŸ„

Home Page:https://code.juejin.cn/pen/7168395041117831208

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

joystick

๐ŸŽฎ Virtual joystick ่™šๆ‹Ÿๆ‘‡ๆ†


install

pnpm add joystick-kit

dome

import Joystick from "joystick-kit";

/*  create instance */
const joystick = new Joystick();

/*  create joystick */
joystick.create({ zone: "joystick" });

/* event */
joystick.on("start", () => {
  console.log("start ===> ");
});

API

create

interface CreateConfig {
  mode: string; // ๆŒ‚่ฝฝๆจกๅผ static | dynamic
  zone: string; // ๆŒ‚่ฝฝ่Š‚็‚น
  size?: number; // ๆ‘‡ๆ†ๅคงๅฐ
  position: { top: string; left: string; right: string; bottom: string }; //็ป„ไปถๅฎšไฝ dynamic ๆจกๅผไธ‹ๆ— ๆ•ˆ
  color?: { back: string; front: string }; // ๆ‘‡ๆ†้ขœ่‰ฒ
  backImg?: { back: string; front: string }; // ๆ‘‡ๆ†่ƒŒๆ™ฏๅ›พ
}

backImg ไผ˜ๅ…ˆไบŽ color


on

// event keys
interface EventType {
  start: string;
  move: string;
  end: string;
}

//  event params
interface MoveInfo {
  direction: string;
  ang: number;
}
interface EventObj {
  start: null | ((Event, Joystick) => void);
  move: null | ((Event, { direction, ang }: MoveInfo) => void);
  end: null | ((Event, Joystick) => void);
}

็ฑปๅž‹ๅ‚่€ƒ

About

๐ŸŽฎ Virtual joystick | ่™šๆ‹Ÿๆ‘‡ๆ† ๆธธๆˆๆ‰‹ๆŸ„

https://code.juejin.cn/pen/7168395041117831208


Languages

Language:TypeScript 74.5%Language:JavaScript 19.7%Language:HTML 5.8%