Touch gesture navigation

Phaser 3
1

I have a basic snake game written in Phaser 3 and I would like to add touch navigation to it. Current navigation looks like this (in update method) and its for keyboard arrows:

 if (this.cursors.left.isDown ) {
  this.snake.faceLeft();
} else if (this.cursors.right.isDown |) {
  this.snake.faceRight();
} else if (this.cursors.up.isDown ) {
  this.snake.faceUp();
} else if (this.cursors.down.isDown) {
  this.snake.faceDown();
}

I want to do it either with swipes or with touches (i.e. the snake is going up, user click on the left from the head, it turns left, user clicks on the right from the head, it goes to the right). I tried to do it with callback methods, like in this thread: link1, but I cannot use these values outside of callback methods. I tried to add touch navigation with pointer like this:

this.pointer = this.input.activePointer;
    if (
  this.cursors.left.isDown ||
  (this.pointer.isDown && this.snake.head.x - this.pointer.x > 0)
) {
  this.snake.faceLeft();
} else if (
  this.cursors.right.isDown ||
  (this.pointer.isDown && this.pointer.x - this.snake.head.x > 0)
) {
  this.snake.faceRight();
} else if (
  this.cursors.up.isDown ||
  (this.pointer.isDown && this.snake.head.y - this.pointer.y > 0)
) {
  this.snake.faceUp();
} else if (
  this.cursors.down.isDown ||
  (this.pointer.isDown && this.pointer.y - this.snake.head.y > 0)
) {
  this.snake.faceDown();
}

But the check is performed so fast that the snake goes crazy. Any help would be appreciated!

2

The first thing I’d try would be to only accept inputs that are a given distance away from the snake’s head, e.g. Math.abs(this.snake.head.x - this.pointer.x) > 16.