Canvas Games: Part I - HTML5 Canvas - page 734

colDelta

Calculated each time the tank changes nodes. This represents the pixel change on the x-
axis for the moving tank.

tankX tankX

The current Canvas screen x-axis coordinates used to draw the tank on the screen.

tankY

The current Canvas screen y-axis coordinate used to draw the tank on the screen.

angleInRadians angleInRadians

Calculatedeachtimethetankchangesnodes.Thisistheanglethatwemustrotatethetank
so that it is pointing in the right direction as it moves along the node path.

tankStarted tankStarted

This remains false until the tank has moved the first time from the starting node. After the
tank has moved from the starting node, we can use the result array node values.

tankMoving

Whenthis is false ,thetankhasmade ittothecenter ofthenextnode(orthetankhasnot
yet moved from the starting node. The code will calculate new rowDelta , colDelta , and
angleInRadians values at this time.

finishedPath

This is set to true after the tank has moved completely into the final node on the path.

In the drawScreen() function, we are going to add code to test whether or not the tank has
started down the path. First we are going to enclose everything but the actual tank drawing
code inside the following if conditional:

iif ( ! finishedPath ) {
//Logic for updating he tank node and position

}

Logic for updating the tank node and position

Next we will update the node the tank is positioned on. First we must check to see whether
the tank has started moving at all, If not, we will use the result[0] value returned by the A*
function.