1. Start this lesson with these Project Files. After you dowload and unzip the folder, you should see the following files.
2. Open index.html in your favorite browser. A message should appear that says "just testing". After you close the message, you should see a white game window with a monkey in it.
3. Open index.html, styles.css, and engine.js in your favorite text editor. Look over the code to become familiar with it.
5. In the CSS, add a z-index of 10 and a position of absolute to the monkey class.
In this way, if you add additional monkeys, they will all have the same z-index and all have an absolute position (relative to gameWindow). If elements have the same z-index, those that appear higher in the HTML code will be in front of those that appear lower.
The reason to use 10 instead of 1 is because you may want to go back later and add elements to the gameWindow with a smaller z-index so they appear behind the monkeys.
However, this code is written correctly - there is no syntax error.
So, there must be a logic error. This is an error in the instructions that you are giving. An example of a logic error is changing the left property of an element to move it up or down instead of its top property. The code works, just not as you intended.
8. To solve this issue, you need to modify the code so that it does not run until the page has loaded. In the HTML, add an onload event to the body tag to call init().
9. Then, in engine.js, create the init() function and add the code in the function to position the monkey.
You could use a different name for the function (such as pageLoaded) instead of init. I like init because it is where I put all the code to initialize the game, which always happens immediately after the page is loaded.
Naming functions and variables with some meaning is important for the readability of the code. Variables are usually nouns (they are something) such as firstName, score, numLives, monkey_01, etc. Functions are usually verbs (they do something) such as initialize(), alert(), fireLaser(), etc.
10. As always when you modify the code, make sure it still works.