-
Session 1 Introduction and Setup
Get started!
Lab 1 Install and setup
Introduction Video
Make sure to install or have your school’s computer administrator all the required software from Lab 1. Complete all Lab and Activity assignments to complete module 1 which is due before Session 2.
Introduction and Setup
Lab
Part 1 – Setting up your development environment
1. Open your computer’s File Manager (or Finder on Mac) and create an empty folder on your desktop and name it “PGSLevel1”.
|
<html>
|
2. Under your Connexus student account, open the course dashboard.
|
<html>
|
3. Locate Session 1 Lab and download it’s ‘zipped’ or compressed code file.
|
<html>
|
Note: whitespace is ignored and is used only for readability of the code. This is true for tabs, spaces, and line breaks.
Activity
Introduction to JavaScript:
JavaScript is a cross platform scripting computer language that is used to create Web centered applications including video games. The JavaScript engine platform can run within hosted environments like Web Browsers and Servers. It is a very fast, dynamic scripting language that has helped build the Internet it is today. JavaScript is an in-demand programming language.
In this course you will be using JavaScript to build and modify your own video game that is playable on a web browser.
Part 2 – Downloading and Installing Course Files
4. In File Manager locate and select your downloaded zip file.
 |
<title>Myawesomegame</title>
|
5. Select ‘extract’ from File Manager to unzip the files.
 |
<h1>Myawesomegame</h1>
|
6. Change the location to point to the desktop folder “PGSLevel1” you created earlier, then click Extract to unzip files.
 |
<h2>By[YOURNAMEHERE]</h2>
|
Refreshing the window should now look something like this:
 |
Activity
Learn JavaScript language function ‘Alert’:
Read definition & example sections: http://www.w3schools.com/jsref/met_win_alert.asp
The alert() method displays an alert box with a specified message and an OK button.
An alert box is often used if you want to make sure information comes through to the user.
Part 3 – Installing and running your web server
8. Click or paste the link below into your chrome web browser for the Web Server for Chrome app:
| http://tinyurl.com/hrz8uqd/ |
<http://tinyurl.com/hrz8uqd/>
|
Note: if tags don’t have any child tags or text, you can shorten them using the form <tagname/>, instead of <tagname></tagname>.
9. Click the button “Launch App” or “Add to Chrome” to install it first.
 |
<canvas style=”background:black”/>
|
NOTE: if prompted, sign in with your Google account.
10. Open new Chrome tab, click on Google Apps button (top left corner), find “200 Ok!” application.
|
<canvas style=”background:black”/>
|
11. Double-click the “200 Ok!” application to open and start running your web server for Chrome.
 |
<canvas style=”background:black”/>
|
 |
Activity
Learn JavaScript Variables:
Read page and do examples: http://www.w3schools.com/js/js_variables.asp
Part 4 – Configuring your web server
12. With the Web Server panel open, click “Choose Folder” button.
 |
<script language=”Javascript”>
|
13. Locate your ‘PGSLevel1’ folder you created on your desktop, then navigate down to: /Session1_LabFiles/ Start_Lab folder then click ‘OK’.
 |
const appWidth = 640; //definethewidthinpixels
|
14. Select the check-box: “Automatically show index.html”
 |
console.log(appWidth);
|
15. Then finally click on the link: http://127.0.0.1:8887 found under “Web Server URL(s)” section.
| http://127.0.0.1:8887 |
Note: Did you get a blank web page? If yes, that is what is expected. Currently the index.html web page file contains no visible content. If you want to see what the code currently look like, right-mouse click on the empty browser window, select “View Page Source” from the sub menu.
Activity
Learn about Internet Protocol (IP):
What is IP or Internet Protocol?
Do you know your Public IP address?
If you type in “what is my IP address” into Google Search what do you get?
If you go to http://whatismyipaddress.com/, what information can be gathered about your IP?
Part 5 – Editing web page content
16. Find and run the application Notepad++ on your computer.
 |
17. Open and find the ‘index.html’ file under the Start_Lab folder.
18. Put a blank line under: add the following content:
 |
<canvas id=”game” style=”background:black”/>
|
19. Save file.
 |
20. Find the comment line: add a blank line underneath, add the following:
Hello World!
 |
Hello World!
|
21. Save file, switch over to your browser to your ‘blank’ server page, click Reload.
Refresh your browser window to see your larger canvas.
 |
Congratulations you have a “Hello World” website!
Now let’s move on to running our first web/mobile video game from our server called Adventureman.
Activity
Learn about the Internet and the Web:
Search these questions using a search application like Google search or Bing.
What is the Internet and who created the Internet?
What is the Web and who created it?
What was created first, the Internet or the Web?
Part 5 – Running Adventureman
Just like we did before let’s open up our Web Server control panel and re-select the default folder.
|
22. Click on “CHOOSE FOLDER” button.
23. This time, select the “Adventureman” folder underneath the Start_Lab folder. Click OK.
|
<canvas id=”game” style=”background:black”/>
|
24. Reload the “Hello World!” page.
|
var theCanvas = document.getElementById(“game”);
|
25. Click on the “Start game” button at the of the screen, or tap your computer’s space bar.
Use your arrow keys on your computer to navigate the ball around the screen picking up ‘keys’ and using them to unlock doors.
|
theCanvas.width = appWidth;
|
26. Play through game levels, think about ways the game can be improved.
● Did you come up with some great ideas how you would design the levels?
● How would you change the graphics?
● Add sound? How about music, what type of music would you add?
|
Activity
Learn about the first video game created:
Take a look at this site: http://www.bnl.gov/about/history/firstvideo.php
Part 6 – Turn in your Hello World! file.
27. Open File Manager (or Finder for Mac), locate the index.html file you added Hello World!
|
28. Compress index.html into a zip file
|
<canvas id=”game” style=”background:black”/>
|
29. Upload the compressed ‘zip’ file to the Session 1 turn-in assignment.
|
Congratulations, you have completed Session 1!