Student Work

Challenge 4: Adding a Hit Test to the Cat/Dog Project

After completing lessons 1 to 23, you are ready for your fourth challenge! Start with the completed project files from lesson 6.

Modify the code so that every time the Move button is pressed, a message is displayed under the gameWindow that says 'HIT' if the images are hitting, and says 'NO HIT' if the images are not hitting. Here is an example.

HINTS:

Place a copy of the JavaScript file that has the hittest() function in the same folder with the project files

In the HTML

Add a link to the JavaScript file that has the hittest() function.

Add a div with an id of output underneath the gameWindow.

Change onload="move()" of the body to onload="init()".

In the JavaScript

Declare cat, dog, and output as global variables

Create the init() function and give cat, dog, and output a value using document.getElementById().

Assign a width and height to cat and dog in the init() function.

At the end of the init() function, call the move() function.

In move(), simplify the lines of code that set the position of cat and dog by using the global variables instead of document.getElementById().

At the end of move(), add a conditional statement that checks if cat and dog hit each other and prints out the appropriate message in the outputdiv.

In the CSS

Remove the width property and value from #cat and #dog.

Once you have completed the challege, find a friend and play some Cube Slam.