Make turn-based movement on a grid-like map with Arcade Physics and Animations

[Xupim]

Hello, I'm new on the forums, so nice to meet you, and thank for reading this! Also, sorry for my english, it is not my mother language.

So here is the problem. I'm starting doing a game, like a worms. 2D, you can move right or left and do a jump and shoot a fireball that does damage. The game is based on turns, and during each turns players alternate usgin their character to move around and shoot some fireballs at other players. When he is the last man statdind he wins. Each character have a Action Points pool, from what he uses to move or shoot, also the fireball does not destroy the enviroment, she whiffs at any player or obstruction. My problem is with the movement.

 

Lets say a Character want to move 3 times to the right and then shoot a fireball. (Each square on the game is 24x24 pixels, and each character is a 2x1 sprite, with a spritesheet for animations) What he needs to do is use his walking animations to move 72 pixels right. Then stop and wait for another command (Also, each command [Move, Shoot] is triggered by a release of the left button of the mouse, in a HUD bellow the character. One button is MOVE, another is SHOOT, on the left there is a Health Bar and then a String with how much Action points he have.).

 

What I'm struggling to do is the 72 pixels with the movement animation. When I used the Move to Pointer, or Move to XY, he just didnt stop. And the animations was not triggered. Then I started using direct input on the Player Object x and y. But this way he just flicker around, 24 pixel, with no animations. I'm kinda lost at now, and wanted a direction, of what I should be studying or what should I try.

 

Also, the calculus I'm using to see what movements he is doing is based on this algorithm:

movement: function () {
    var moveX = game.input.x - this.player.body.x;
    var moveY = game.input.y - this.player.body.y;
    if(Math.abs(moveX) > Math.abs(moveY))
    {

        if(moveX > 0)
        {
            this.player.x = this.player.x + 24;
        }
        else {
            this.player.x = this.player.x - 24;
        }
    }
    else {
        this.player.y = this.player.y - 24;
    }

},

This is waht I need to trade:

this.player.x = this.player.x + 24; <- This line should be removed for a full movement with animations.

I know this is not the right way to do, but was the best way I could with my knowledge right now. Thanks for at least trying to understand, and thanks for everything.

 

Att,

Xupim