Velocity

Phaser 3
1

How can I make snake movement smoother with respect to velocity?

2

By chance, are you able to share your code, or a demo of the issue you are looking to fix?

3

when the snake moves, it looks like it ‘jumps’ rather than moving smoothly. How can I fix this?

Below are some functions I’ve implemented for my Phaser snake game: update, move, setBodyPartTexture, and grow

update(time) {
    if (time >= this.moveTime && this.gameStarted) {
        this.keyLock = false;
        if (this.moveEvents.length > 0) {
            this.direction = this.moveEvents.shift();
        }
        this.move();
        this.moveTime = time + this.speed;
        return true;
    }
    return false;
}

move() {
    let oldHeadPosition = { x: this.snakeHead.x, y: this.snakeHead.y };
    this.directions.unshift(this.direction.clone());
    this.snakeHead.x += this.direction.x * this.bodyPartLength;
    this.snakeHead.y += this.direction.y * this.bodyPartLength;

    if (this.snakeHead.x > this.scene.game.config.width || this.snakeHead.x < 0 || this.snakeHead.y > this.scene.game.config.height || this.snakeHead.y < 0) {
        return;
    }

    for (let i = 1; i < this.body.length; i++) {
        let oldBodyPosition = { x: this.body[i].x, y: this.body[i].y };
        let oldBodyDirection = this.directions[i];
        this.body[i].x = oldHeadPosition.x;
        this.body[i].y = oldHeadPosition.y;
        oldHeadPosition = oldBodyPosition;
        this.setBodyPartTexture(i, oldBodyDirection);
    }
    this.setTailTexture();
    if (this.positions.length > this.body.length * this.bodyPartLength) {
        this.positions.pop();
        this.directions.pop();
    }
    this.moveTime = this.scene.time.now + this.speed;
}

setBodyPartTexture(i, oldBodyDirection) {
    if (!oldBodyDirection.equals(this.directions[i - 1])) {
        let prevDirection = `${this.directions[i - 1].x},${this.directions[i - 1].y}`;
        let currDirection = `${oldBodyDirection.x},${oldBodyDirection.y}`;
        let textureMap = {
            "1,0,0,-1": "bodyUpRight",
            "0,1,-1,0": "bodyUpRight",
            "-1,0,0,1": "bodyRightUp",
            "0,-1,1,0": "bodyRightUp",
            "0,1,1,0": "bodyRightDown",
            "-1,0,0,-1": "bodyRightDown",
            "0,-1,-1,0": "bodyDownRight",
            "1,0,0,1": "bodyDownRight",
        };
        let directionKey = `${prevDirection},${currDirection}`;
        this.body[i].setTexture(textureMap[directionKey]);
    } else {
        if (oldBodyDirection.y != 0) {
            this.body[i].setTexture("bodyVertical");
        } else {
            this.body[i].setTexture("bodyHorizontal");
        }
    }
}

grow() {
    let newPart = this.scene.physics.add.sprite(-1 * this.bodyPartLength, -1 * this.bodyPartLength, "tailRight");
    this.scene.physics.add.collider(this.snakeHead, newPart, this.endGame, null, this.scene.snake);

    this.bodyParts.push(newPart);
    this.body.push(newPart);

    this.eat.play();
    score++;
    scoreNumber.innerHTML = score;
    if (score > highScore) {
        highScore = score;
        document.querySelector("#high-score p").innerHTML = highScore;
        document.getElementById("highScoreNumber").innerHTML = highScore;
    }
}

This is the video showing issue i am facing
https://www.awesomescreenshot.com/video/33408786?key=90beb12f2ca0ed729a0133a2b7ad36a6

4 
class Snake {
  // …
  update(time, delta) {
    if (this.gameStarted) {
      this.keyLock = false;
      if (this.moveEvents.length > 0) {
        this.direction = this.moveEvents.shift();
      }
      this.move(delta);
      return true;
    }
    return false;
  }

  move(delta) {
    // …
    let distance = 0.16 * delta;
    
    this.snakeHead.x += this.direction.x * distance;
    this.snakeHead.y += this.direction.y * distance;
    // …
  }
}