html5 canvas animating object following path

Question

I'm using A* algorithm to calculate my path, thus I have an array of nodes that consist of x and y coordinates (x,y). On Mouse click I would want my player to travel along those tiles in the array based on the center point of the tile or the corner point doesnt matter. (allowing diagonal movement). For example I have an array of [(1,1),(2,2),(3,2)] these values are row and column values in my tile based map, based on it I can caculate the tile center point/corner point, so once my player moves to the first given tile then he would proceed to the next one and so on. Couple of things to notice: - player is the same size as the tile - player moves every three units (so it will not align perfectly with the tile's center point and so forth)

  function drawPlayerRunning(result) {

    ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
    drawMapTiles(ctx, 12, 12, tileSize);
    ctx.drawImage(tileSheet, 0, 40 * playerAnimationCounter, 40, 40, player.cornerPoint.x + canvasPadding, player.cornerPoint.y + canvasPadding, 40, 40);
    calculatePlayerPosition(result);

    function calculatePlayerPosition(result) {

        var row = result[nextTilePlayerMovesToCounter].x;
        var col = result[nextTilePlayerMovesToCounter].y;
        map[row][col] = 5;

        var tilePoint = cursor.getTileCornerPoint(row, col);

        var calc1 = tilePoint.x - player.cornerPoint.y;
        var calc2 = player.cornerPoint.y - tilePoint.x;
        var calc3 = player.cornerPoint.x - tilePoint.y;
        var calc4 = tilePoint.y - player.cornerPoint.x;

        playerAnimationCounter++;

        if ((calc1) >= player.pixelDistanceWhileMoving) {
            player.cornerPoint.y += player.pixelDistanceWhileMoving;
            //        $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y);
        } if ((calc2) >= player.pixelDistanceWhileMoving) {
            player.cornerPoint.y -= player.pixelDistanceWhileMoving;
            //        $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y);
        } if ((calc3) >= player.pixelDistanceWhileMoving) {
            player.cornerPoint.x -= player.pixelDistanceWhileMoving;
            //        $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y);
        } if ((calc4) >= player.pixelDistanceWhileMoving) {
            player.cornerPoint.x += player.pixelDistanceWhileMoving;
            //        $("#textDiv4").text("player cornerPoint (x,y): " + player.cornerPoint.x + "," + player.cornerPoint.y);
        }
        else {
            //alert("else - in tile");
            playerAnimationCounter = 0;
            nextTilePlayerMovesToCounter++;
            //alert(nextTilePlayerMovesToCounter + " - nextTilePlayerMovestoCounter");
            if (nextTilePlayerMovesToCounter == result.length) {
                //alert("if result.lenght == counter");
                nextTilePlayerMovesToCounter = 0;
                ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
                drawMapTiles(ctx, 12, 12, tileSize);
                drawPlayer();
                isPlayerRunningInProgress = false;
                clearInterval(playerTimerInterval);
                return false;
            }
            //ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
            //drawMapTiles(ctx, 12, 12, tileSize);
            //drawPlayer();
            //isPlayerRunningInProgress = false;
            //clearInterval(playerTimerInterval);
            //return;

        }

        if (playerAnimationCounter > player.pixelDistanceWhileMoving) {
            playerAnimationCounter = 0;
        }
    }
}

 function movePlayer(result) {

if (isPlayerRunningInProgress)
    return false;
isPlayerRunningInProgress = true;

animate(result);


function animate(result) {
    playerTimerInterval = setInterval(function(){drawPlayerRunning(result)}, 50);
   }
 }

Here are my functions, they are kind of messy and I would like to simplify it as much as can be done, and of course to finally get this working. Lets not worry about some of the variables that I have here such as isPlayerRunningInProgress and the checks associated with it, as I only want help with the basic player movement from tile to tile and checks assiociated with collision (if player reached his destination). I'm guessing i would need some kind of velocity variables, such as x and y to be either 1, 0, or to be negative. Thx for all the help.

for anyone that is interested I rewrote my calculate function as follows and it works more or less for now: — Alan Budzinski

Alan Budzinski Alan Budzinski · Accepted Answer · 2012-11-21T00:01:12

I came up with this calculate function:

 function calculatePlayerPosition(result) {

        var tilePoint = cursor.getTileCornerPoint(row, col);

        var tileYMinusPlayerY = tilePoint.x - player.cornerPoint.y;
        var tileXMinusPlayerX = tilePoint.y - player.cornerPoint.x;

        if (tileYMinusPlayerY > 2)
            velocityY = 1;
        else if (tileYMinusPlayerY < -2)
            velocityY = -1;
        else velocityY = 0

        if (tileXMinusPlayerX > 2)
            velocityX = 1;
        else if (tileXMinusPlayerX < -2)
            velocityX = -1;
        else velocityX = 0;

        playerAnimationCounter++;

        if (Math.abs(tileXMinusPlayerX) >= player.pixelDistanceWhileMoving || Math.abs(tileYMinusPlayerY) >= player.pixelDistanceWhileMoving) {
            //velocity X
            player.cornerPoint.x += player.pixelDistanceWhileMoving * velocityX;
            //velocity Y
            player.cornerPoint.y += player.pixelDistanceWhileMoving * velocityY;

        }
        else {
            playerAnimationCounter = 0;
            nextTilePlayerMovesToCounter++;

            if (nextTilePlayerMovesToCounter == result.length) {
                nextTilePlayerMovesToCounter = 0;
                ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
                drawMapTiles(ctx, 12, 12, tileSize);
                drawPlayer();
                isPlayerRunningInProgress = false;
                clearInterval(playerTimerInterval);
                return false;
            }
             row = result[nextTilePlayerMovesToCounter].x;
             col = result[nextTilePlayerMovesToCounter].y;

            map[row][col] = 5;

            ctx.clearRect(0, 0, mapCanvas.width, mapCanvas.height);
            drawMapTiles(ctx, 12, 12, tileSize);
            drawPlayer();

        }

        if (playerAnimationCounter > player.pixelDistanceWhileMoving) {
            playerAnimationCounter = 0;
        }

    }

html5 canvas animating object following path

1 Answers