STEP 1:
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson7”. This is where you will keep all of your files for this lesson.

STEP 2:
Open Notepad++ and close any file that you might still have saved.

STEP 3:
Create three new documents with Notepad++ called lesson7.html, style7.css, and review1.js. All of these documents will be saved to your new “lesson7” folder.

STEP 4:
Open this image file and save it to your “lesson7” folder.

STEP 5:
Copy this HTML code and paste it into your “lesson7.html” file.

STEP 6:
Copy this CSS code and paste it into your “style7.css” file.

STEP 7:
Copy this JavaScript code and paste it into your “review1.js” file.

STEP 8:
After pasting all three codes into all three files, click the SAVE ALL button at the top of Notepad++.

STEP 9:
Open your HTML file with Chrome and make sure you see the canvas with a sunset background.

STEP 10:
Create a split screen between your Notepad++ and your browser display.

REVIEW CHALLENGE:
Look over all the Rectangle examples and make sure you know how to create rectangles of all sizes, all widths, all colors, and all positions. Look over all the Line examples and make sure you know how to create lines of all sizes, all widths, all colors, and all positions. Then look over both of the Loop examples and make sure you know how to create loops with applied variables. If you feel completely comfortable with Rectangles, Lines, and Loops, then go ahead and start manipulating this JavaScript to make it look like the image below.

Once everyone has had about 15 minutes to get set up and practice with rectangles, lines, and loops, we will begin an official review for the Quarter Quiz.

We’ve spent a few weeks looking closely at the the Canvas Element. We’ve learned how to make rectangles, lines, and loops. And we’ve even learned how to get really comfortable working with complex variables in a complex code. Now it’s time to learn about a really simple canvas game and apply a few of the things we know about canvas and JavaScript. With your partner, you will set up the Heroes & Monsters game using the steps below, but then it will be your job to figure out how to manipulate the game, change the sprites, or come up with another way to reinvent the game.

Take a minute or so to play Heroes & Monsters before getting started.

STEP 1:
Go into your “lesson7” canvas folder and create a new subfolder called “ham” (which stands for “Heroes And Monsters”). This is where you will put all your files for this game.

STEP 2:
Now go into your “ham” folder and create one new subfolder called “images”, then save these images to your new “images” subfolder: background.png, grass.png, monster.png, hero.png.

STEP 3:
Open Notepad++ and close any file that you might still have saved.

STEP 4:
Create TWO new documents with Notepad++ called ham.html and game.js. Both of these documents should be saved to your “ham” folder.

STEP 5:
Copy this HTML code and paste it into your “ham.html” file.

STEP 6:
Copy this JavaScript code and paste it into your “game.js” file.

STEP 7:
After pasting both codes into both files, click the SAVE ALL button at the top of Notepad++.

STEP 8:
Open your HTML file with Chrome, then create a split screen between your Notepad++ and your browser display.

STEP 9:
If you can see and play the game when you open your HTML file, then you’re ready to start manipulating the HTML, the JavaScript, and even the images. Have fun!