Due Tuesday, April 29
50 Points
This assignment gives you a chance to work with time and animation concepts.
Since you will be writing separate programs for each part described below, each requiring its own XHTML page and CSS, start by writing a simple XHTML page which will eventually provide links to each program’s XHTML page. Make it clear from each link’s label and/or context to which program it leads. Eventually, when the assignment is complete, publish this page (along with all the files comprising your solutions) to the wcit server and add a link to it to your home page.
To get started working with time in JavaScript you’re going to design an implement a rather frivolous application that will pull together most of the fundamental timing concepts we have covered.
As soon as the page is done loading, you should prompt the user for their name. When you have the user’s name, begin a 10-step countdown with a step occurring once every 2 seconds. At each step in the countdown, display the number of the step (10, 9, 8, etc.) and the user’s name in an alert. After the tenth step in the countdown, display a final alert announcing blastoff and incorporating the user’s name. Once this final announcement is displayed, there should be no more alerts generated by the program.
Add a button to the XHTML page that the user can click to abort the countdown. When the user clicks this button, your JavaScript code should immediately abort the countdown and display an alert announcing this fact. Once this announcement is displayed, there should be no more alerts generated by the program.
Depending upon how you choose to implement your solution, the time the user takes to clear the alert announcing each step may come out of the 2 second gap between the steps. This is fine, but you will need to clear the alerts quickly enough to keep them from piling up. This is why we are working with a 2 second gap, rather than the more traditional 1 second countdown.
Sprites are common features of games. In essence, a sprite is a moveable animation. The book gives a solid grounding in the basic concepts common to virtually all sprites — animation and path-based motion. However, it stops short of combining the two.
In this part of the assignment, you’re going to take the book’s code to the next level by combining the animation of the robot_animation example with the two-dimensional path-based motion of the path-based_motion2 example.
As with previous exercises, the key to success here will be to be sure you fully understand the XHTML, CSS and JavaScript of both of these examples before you dive into merging them. When you are done, the robot animation should repeat endlessly as it moves along the path the soccer ball followed in the original example, with one added twist. When it reaches the end of the path, it should reverse direction and follow the path back to its origin. Upon reaching its origin, it should again return to its target, and so on. In effect, your animated robot should bounce endlessly between the upper left and lower right of its enclosing div along the defined path.