joystick
- A React joystick component
- SVG output makes it scalable
- Support click event and tap event
- customerize key event and press interval
How to use
basic
see code in examples/index.js
const kp = (k) => {
console.log(`key ${k} pressed`)
}
const kl = (k) => {
console.log(`key ${k} release`)
}
ReactDOM.render(<Joystick onKeyPress={kp} onKeyRelease={kl}/>, document.getElementById('react'))
advance
keys
keys can be passed to customerize your key event. For example, following code will emit pass x to onKeyPress callback when the Up button clicked.
<Joystick keys={{
Up: 'x',
}}/>
Here are all keys default settings
{
Up: 'w',
Down: 's',
Left: 'a',
Down: 'd',
A: 'A',
B: 'B',
C: 'C',
D: 'D',
Select: 'n',
Start: 'm',
}
interval
interval determines the time interval between two keyPress event when some key is holding. The default value is 200ms, which means if any key is holding, every 200ms will emit a keypress event.
<Joystick interval={250} />
build
development build
npm run build
production build
npm run production
Github
https://github.com/hoyt-tian/joystick
Related Project
2D game engine https://github.com/hoyt-tian/FEngine