grid Grid-based Movement?

[Splashsky]

Hey guys! I'm new to Phaser development, to JavaScript as a whole, and to any graphical game development whatsoever. Physics and such elude me still.

I've set up a simple tilemap and lil character that you can move around. The collisions and boundaries work fantastically. Buuuut, I need grid-based movement! Think Pokemon, and other JRPGs that move you along a grid and never diagonally. I can more or less snap to the grid right now. The grid is 32x32 (sprite is as well) and I currently work movement like this...

function update(time, delta)
{
    const speed = 175;
    const preVelocity = player.body.velocity.clone();
    
    // stop all velocity from previous frame
    player.body.setVelocity(0);

    snapToGrid(player);

    // horizontal movement
    if (controls.left.isDown) {
        player.x -= 32;
    } else if (controls.right.isDown) {
        player.x += 32;
    }

    // vertical movement
    if (controls.up.isDown) {
        player.y -= 32;
    } else if (controls.down.isDown) {
        player.y += 32;
    }

    // ensure that a player doesn't move faster diagonally
    player.body.velocity.normalize().scale(speed);

    if (controls.left.isDown) {
        player.anims.play("walk-left", true);
    } else if (controls.right.isDown) {
        player.anims.play("walk-right", true);
    } else if (controls.up.isDown) {
        player.anims.play("walk-up", true);
    } else if (controls.down.isDown) {
        player.anims.play("walk-down", true);
    } else {
        player.anims.stop();

        // if we were moving, pick and idle frame to use
        if (preVelocity.x < 0) player.setTexture("cAtlas", "left1");
        else if (preVelocity.x > 0) player.setTexture("cAtlas", "right1");
        else if (preVelocity.y < 0) player.setTexture("cAtlas", "up1");
        else if (preVelocity.y > 0) player.setTexture("cAtlas", "down1");
    }
}

But the character zooms around like a caffeine-loaded kid on crack. It also ignores collision with boundaries, though it was working before when I didn't implement incrementing x and y by 32. How would you go about implementing grid-based movement into a game, while honoring collisions?

[jest]

There's a plugin :

 

And get familiar with using delta time: