Animating the Tank Movement

To calculate the distance that the tanks needed to move, I added the following at the end of the code inside the first if statement on the player1tank symbol:

 // Calculate distance tank should move  deltaXsq = Math.pow(Math.abs(deltaX), 2);  deltaYsq = Math.pow(Math.abs(deltaY), 2);  distance = Math.sqrt(deltaXsq+deltaYsq);  // Calculate the distance to move per frame  perframe = distance/frames;  // Activate the rotation below  rotation = true; 

To calculate the distance that the tanks needed to travel, I used the Pythagorean Theorem. First I squared the absolute values of the x and y distances (deltaX and deltaY) that were calculated previously and assigned those values to the new variables deltaXsq and deltaYsq. I added these two variables and used the built-in Math.sqrt() function to assign the direct distance between the tank's current location and the mouse click to the new variable distance.

I decided to make the tank move during a set number of frames. I divided the distance variable, which had just been calculated, by the frames variable, which was initialized in the onClipEvent(load) event, and assigned this value to the new perframe variable. Finally, the rotation variable was set to true to activate the rotation animation in the next event.

To actually effect the rotation animation, I added the following code to the player1tank movie clip:

 onClipEvent (enterFrame) {     // mouseDown event (above) triggers rotation      if (rotation) {         // Rotate the body of the tank          rotdiff = Math.abs(_root.fixAngle(this.body._rotation)-degrees)          // Move 5 or the diff, whichever is lower          if (rotdiff >= 5) {             rotval=direction*5;          }          else {             rotval=direction*rotdiff;          }          this.body._rotation = this.body._rotation+rotval;          if (Math.abs(_root.fixAngle(this.body._rotation)-degrees)<=0) {             // Close enough, stop rotating, activate motion below              rotation = false;              motion = true;          }      }  } 

As soon as the rotation variable is set to true by the onClipEvent(mouseDown) mentioned previously, the rotation animation begins. The rotval variable is added to the _rotation property of the tank body. If rotval equals “5, this will cause the tank to rotate 5 ° to the left. If it equals 5, the tank will rotate 5 ° to the right. An if statement checks to see if the tank body is within 5 ° of the destination angle by evaluating the absolute value of the difference between tank body's _rotation property and the degrees variable to see if it is less than 5. If it returns true, the rotation variable is set to false so that this code will stop executing, and the motion variable is set to true to activate the motion animation. This code was accomplished by adding the following at the end of the code in the same onClipEvent(enterFrame) event on the player1tank symbol:

 // When rotation is finished, motion is triggered:  else if (motion) {     if (currentframe<frames) {         // Move the tank one frame          this._x += deltaX/frames;          this._y += deltaY/frames;          ++currentframe;      } else {         // Reset current frame counter for next time          currentframe = 0;          // Stop movement          motion = false;      }  } 

The currentframe and frame variables were initialized in the previous onClipEvent(load) event. The currentframe variable is used as a counter to pace the movement, and the frames variable is used to set the number of frames that the animation will take. The if statement compares the currentframe and frames variables to determine whether the animation is finished. If it isn't, the tank's X and Y positions are changed by the total X and Y distances divided by the number of frames of the animation, and the current-frame counter variable is incremented. If it is, the currentframe counter is reset and the motion variable is set to false so that this code will stop executing.