Skip to main content

controller

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://unpkg.com/xnew@5.0.x/dist/xnew.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/@tailwindcss/browser@4"></script>
</head>

<body class="relative m-0 p-0 w-full h-screen overflow-hidden">
  <div id="main" class="relative w-full h-full"></div>
  <script>
    xnew('#main', (self) => {
      xnew(Box);
      xnew(Controller);
    });

    function Controller(self) {
      // prevent default event
      xnew.listener(window).on('keydown', (event) => event.preventDefault());
      self.on('touchstart contextmenu wheel', (event) => event.preventDefault());

      // virtual joyscick
      const stick = xnew('<div class="absolute left-4 bottom-4">', xnew.VirtualStick, { size: 130 });
      stick.on('-down -move -up', ({ vector }) => self.emit('+move', { vector }));

      // virtual D-pad
      const dpad = xnew('<div class="absolute left-4 bottom-40">', xnew.VirtualDPad, { size: 130 });
      dpad.on('-down -move -up', ({ vector }) => self.emit('+move', { vector }));

      // virtual button
      const button = xnew('<div class="absolute right-8 bottom-8">', xnew.VirtualButton);
      button.on('-down', () => self.emit('+action'));

      // keyboard
      const user = xnew(xnew.UserEvent);
      user.on('-arrowkeydown -arrowkeyup', ({ vector }) => self.emit('+move', { vector }));
      user.on('-keydown', ({ code }) => {
        if (code === 'Space') {
          self.emit('+action')
        }
      });

      // xnew(Gamepad);
    }

    function Box(self) {
      const box = xnew.nest('<div class="absolute w-48 h-48 inset-0 m-auto bg-blue-500">');
      let current = { x: 0, y: 0, r: 0 };
      let move = { x: 0, y: 0 };
      let direction = +1;
      self.on('+move', ({ vector }) => move = vector);
      self.on('+action', () => direction *= -1);

      self.on('update', () => {
        current.x += move.x * 10;
        current.y += move.y * 10;
        current.r += direction;
        box.style.left = current.x + 'px';
        box.style.top = current.y + 'px';
        box.style.transform = `rotate(${current.r}deg)`;
      });
    }
  </script>
</body>

</html>