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 output div.
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.