NippleJS — Virtual Joystick

import nipplejs from 'nipplejs';

// Left stick — movement
const moveStick = nipplejs.create({
  zone: document.getElementById('left-zone'),
  mode: 'static',
  position: { left: '20%', bottom: '20%' },
  // Layer an icon over a gradient background
  color: {
    front: 'url("move.svg") center/75% no-repeat, ' +
      'linear-gradient(135deg, #818cf8, #38bdf8)',
    back: 'rgba(99, 102, 241, 0.12)',
  },
});

// Right stick — aim & shoot
const aimStick = nipplejs.create({
  zone: document.getElementById('right-zone'),
  mode: 'static',
  position: { left: '80%', bottom: '20%' },
  color: {
    front: 'url("shoot.svg") center/75% no-repeat, ' +
      'linear-gradient(135deg, #e879f9, #ec4899)',
    back: 'rgba(236, 72, 153, 0.12)',
  },
});

moveStick.on('move', (evt) => {
  player.x += evt.data.vector.x * speed;
  player.y -= evt.data.vector.y * speed;
});

aimStick.on('move', (evt) => {
  aimAngle = evt.data.angle.radian;
  fireProjectile(aimAngle);
});