My first thought was to go find a joystick library, there are several that I’ve used before.  I made some small, weak attempts of slapping a joystick library in the code base and I found it not that easy to integrate Peasy-UI with some off the shelf lib.  I didn’t think I could craft up my own Peasy-UI joystick that easily, but turns out I was wrong, I just hadn’t tried hard enough.

So, I opened a new project with the intent of just mocking up a joystick touch control.   It turned out to be less than 100 lines of code.  The joystick’s behaviors are bound to the Peasy-UI model, and the results of the joystick are bound as well.  So, I’ll be able to just copy and paste this into my game project.  This should drop right into my game and be highly configurable in the settings menu, including color, size, and responsiveness….

Next, we are on to the ‘fire’ button, which I don’t think is going to be that difficult.  So, for the button I’ve decided to stick with a div with a background image and assign pointer events to it.  that way I can track button press status, like pressed, held, and released.

  

So, the final section is the keyboard bindings.  I will be trying the library Peasy-input for the first time to use this.  The key bindings are relatively simple, and you get the hold logic automatically.

I’ve imported Peasy-input into the prototype project above. The input mapping is very straightforward.  You map the entry key value to an action object.  There are two ways of doing this currently, to be polled or to use a callback.  I'm using the callback:

I was able to output the fire key status and the direction buttons to the output div in the prototype project.  This was a lot easier than I expected to get implemented.  My only open issue is mapping to the left Shift key, which I’m working with the library author on, either I’m doing something bonehead, or there’s a gap in the library to be patched up.

Once I did some basic testing on this import, I essentially copy/pasted the entire module back into my Asteroids Plus project and wired it up.  Easy peasy… 

This currently hosted game site: https://asteroids-revisited.vercel.app/

Twitter: @jyoung424242

SlideShare: https://www.slideshare.net/JustinYoung3/next-gen-asteroids

GitHub: https://t.co/utxHxXKdOz