When I change the position of a sprite, it continues moving on its own

Question

I'm trying to create a Snake-game using Phaser.js but I get stuck when it comes to moving the head around.

To make it easier on myself, I've opted to not use any velocity and handle movement by manually setting the coordinates of the sprite, my theory being that this will make it easier to handle movement once the snake grows and every segment needs to move to the same position the segment in front of it used to occupy. I basically plan to treat my game-world as a grid, and that's not going to be very easy if everything has a velocity.

I have an update function that should move my sprite every 50th time it's called.

function update() {
    snake.body.velocity.x = 0;
    snake.body.velocity.y = 0;

    if (cursors.up.isDown && direction !== 'down') {
        direction = 'up';
    } else if (cursors.down.isDown && direction !== 'up') {
        direction = 'down';
    } else if (cursors.left.isDown && direction !== 'right') {
        direction = 'left';
    } else if (cursors.right.isDown && direction !== 'left') {
        direction = 'right';
    }

    if (updateCount % 50 === 0) {
        moveSnake();
    }
    updateCount += 1;
}

function moveSnake() {
    switch(direction) {
        case 'up': snake.y -= 2; break;
        case 'down': snake.y += 2; break;
        case 'left': snake.x -= 2; break;
        case 'right': snake.x += 2; break;
    }
}

But this seems to trigger som kind of velocity even though I'm explicitly setting it to 0. The snake (let's pretend it looks like one) will keep moving 2 pixels at a time until the next time moveSnake gets called, at which point it will pick up the pace and move 4 pixels at the time untill it hits the edge of the gaming area.

I've created the sprite in the create function and enabled the arcade physics engine like this:

game.physics.startSystem(Phaser.Physics.ARCADE);
game.world.setBounds(0, 0, 800, 600);

snake = game.add.sprite(400, 300, 'snake-body');
game.physics.enable(snake, Phaser.Physics.ARCADE);
snake.body.collideWorldBounds = true;

I've verified that the throttling in update works and that moveSnake does not get called on every game-loop.

Full source at github (but there's honestly not much more there than what I've just pasted here)

EDIT

To clear up a bit of confusion, in my code moveSnake only gets invoked 3 times (try adding a breakpoint) and I expected the sprite to have moved only 6 pixels over these 3 invocations, but instead it moves 400 pixels. My question was why the x-coordinate of the sprite changes on its own and not only when I explicitly set it.

Answer 1

Don't set the x and y yourself, let the physics handle it, by giving body, the according velocity.

function moveSnake() {
    snake.body.velocity.x = 0;
    snake.body.velocity.y = 0;

    switch(direction) {
        case 'up': snake.body.velocity.y = -2; break;
        case 'down': snake.body.velocity.y = 2; break;
        case 'left': snake.body.velocity.x = -2; break;
        case 'right': snake.body.velocity.x = 2; break;
    }
}

Also you can ask your questions on Phaser forums .