Learning Goal #5
Students will be able to draw a variety of lines and two-dimensional shapes with JavaScript and Canvas.
PART 1: THE SET UP
Read More
STEP 1:
Go into your “LG6_canvasjs” folder and create a new subfolder called “lesson8”. 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 lesson8.html, style8.css, and review2.js. All of these documents will be saved to your new “lesson8” folder.
STEP 4:
Open this image file and save it to your “lesson8” folder.
STEP 5:
Copy this HTML code and paste it into your “lesson8.html” file.
STEP 6:
Copy this CSS code and paste it into your “style8.css” file.
STEP 7:
Copy this JavaScript code and paste it into your “review2.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 waterworld background.
STEP 10:
Create a split screen between your Notepad++ and your browser display.
REVIEW CHALLENGE:
This challenge is almost identical to the last one. But instead of 30 minutes, you only get 15. Your challenge is to change the position of each rectangle, line, and loop so that the final design looks like this.
Once 15 minutes has passed and you have tried to complete the Review Challenge, we will begin our final official review for the Quarter Quiz, which will be next Monday, March 4.
PART 2: APPLIED CANVAS GAME #2
Read More
Learning to manipulate game variables on a game isn’t always easy. We’ve spent some time looking closely at the Canvas Element and we’ve learned how to copy/paste a few shapes on a game board, but haven’t spent a lot of time learning how all the pieces of a Canvas Game work. The following steps will teach you how to set up the Sprite & Fire game, 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. This process will take the rest of our class period, so be patient and don’t rush through the steps.
Take a minute or so to play Sprite and Fire before getting started.
STEP 1:
Go into your “lesson8” canvas folder and create a new subfolder called “sf” (which stands for “Sprite and Fire”). This is where you will put all your files for this game.
STEP 2:
Now go into your “sf” folder and create three new subfolders: img, js, and css. When you finish, you should have an “sf” folder that looks a lot like this.
STEP 3:
Open both of these images (sprites and terrain) and save them to your “img” folder so that it looks like this.
STEP 4:
Open Notepad++ and close any file that you might still have saved.
STEP 5:
Create four NEW documents with Notepad++ called app.js, input.js, resources.js, and sprite.js. All of these documents will be saved to your “js” folder.
STEP 6:
Create one NEW document with Notepad++ called app.css and save it to your “css” folder.
STEP 7:
Create one NEW document with Notepad++ called spriteandfire.html and save it to the outside of your css, img, and js folders (basically, in your “sf” folder, but not inside any of the other ones) like this.
STEP 8:
Copy this JavaScript code and paste it into your “app.js” file.
STEP 9:
Copy this JavaScript code and paste it into your “input.js” file.
STEP 10:
Copy this JavaScript code and paste it into your “resources.js” file.
STEP 11:
Copy this JavaScript code and paste it into your “sprite.js” file.
STEP 12:
Copy this CSS code and paste it into your “app.css” file.
STEP 13:
Copy this HTML code and paste it into your “spriteandfire.html” file.
STEP 14:
After pasting all six codes into all six files, click the SAVE ALL button at the top of Notepad++.
STEP 15:
Open your HTML file with Chrome or Firefox, then create a split screen between your Notepad++ and your browser display.