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.
In the HTML
- Add a div with an id of output underneath the gameWindow.
- Change onload="move()" of the body to onload="init()".
- 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.