Library
Click Here For Video Review
This slide is some quick information to help you understand coding libraries, especially our game library: SimplyJS.
In the last lesson you wrote your first function!
To create a game it can take quite a bit of code.
For this reason, there are libraries. Coding libraries store lots of functions for you to use and reuse for your programs.
The SimplyJS library gives you additional functions that you can use.
Here are some examples (Notice the sjs at the beginning).
See below, Click on the code for an explanation.
sjs.open();
Accesses the sjs library to run the open function! (This function opens a game window).
sjs.Image();
Accesses the sjs library to run the Image function! (This function will load up an image to your page).
sjs.keyDown();
Accesses the sjs library to run the keyDown function! (This function is for tracking keys on the keyboard being pressed).
Between the parenthesis of those functions you can customize the code for your game!
For example, the sjs.open() can be modified to open a window of the size of your choice!
Click on the code below for an explanation!
sjs.open("target",500,400);
sjs - this tells the browser you want to access the sjs library.
. - a period is how you attach properties or function names to the sjs call.
open("target",500,400); - this function, named open, creates a viewing window for the user to see the game you create. open(); is a function in the simply.js library.
"target" finds the <div id="target"> tag in your HTML to open a window at that location (around line 13ish).
500, 400 are the width and height of the window it will open.
Last, every line of JavaScript ends with a semicolon, ;.
Linking Libraries to your Code!
Linking to a JavaScript Library is done inside a <script> tag, see below.
This is the same code in your pong.html file around line 6 in your text editor.
Click on the code below for an explanation!
<script src="https://simplycodingcourses.com/files/simplyjs/simply.js"></script>
A script tag can be linked to a source (another file).
The file it's linked to has JavaScript functions that your code can access!
These functions will help you as you code your game.
Check out line 3 in the editor to the right, same code!
- In the editor to the right, click on Run the code!
- On line 7, edit the size of the window by changing the numbers for width and height!
- Then click on Run the code again!
When you understand this slide, Click the RIGHT ARROW to move on!
Comments
Click Here For Video Review
Sometimes skipping is the only answer.
Comment tags are lines of code, or information, that the browser doesn't loaded as part of your game or program.
When you click 'Run the Code' nothing happens
because the sjs.open line is commented out (line 6)!
Also notice the closing bracket for function run is labeled (line 7)!
Here's where they are useful:
- To label sections of code or syntax.
- To clarify to another programmer what is happening in the game.
- To help debug a section of code.
Starting off you'll frequently be using them to
label the different sections of
code in your games.
This is a very good habit to get into!
Below you'll see the two ways to
comment out a line of code.
//
- double slash starts a comment and will comment out that line only.
/*
...js code ... */ - this will comment out all code it spans.
When you understand this slide, Click the RIGHT ARROW to move on!
Comment Practice
Click Here For Video Review
Read the instructions on the left to edit the code editor on the right!
If you click 'Run the Code' two alerts will pop up.
Follow the instructions on the left to create some comment tags!
- First, click 'Run the Code' and see both alerts pop up!
- Single Line Comment
Comment out one alert method.
In front of line 6 or line 7 put two slashes, //.
Then click 'Run the Code'.
- Multi Line Comment
Comment out both alert methods.
In front of line 6 start the comment tag, with /*.
After line 7 end the comment tag, */.
Then click 'Run the Code'.
When you understand this slide, Click the RIGHT ARROW to move on!
Activity
Click Here For Video Review
This Activity will walk you through:
- Adding a game window.
- Adding a comment tag.
Read the next lines carefully!
- Between the brackets of your start function, locate your alert method and:
Replace (delete) the alert method and add in the sjs.open method passing in "target" along with two numbers to represent a width and a height.
This controls the size of your game screen.
Hint
function start(){
sjs.open("target",500,400);
}
Only add the code in bold.
Don't add in another start function.
-
Directly after the closing bracket for start function, add a comment tag to label it as the closing bracket.
Hint
function start(){
sjs.open("target",500,400);
} //end start
Only add the code in bold.
-
Remember! Save your pong.html file and then load it to browser.
IMPORTANT! If you already have your pong.html file loaded in the browser (from the last lesson) just refresh that tab by clicking on that broswer tab then do CTRL + R!
Here are THREE ways (again) on how to open pong.html in the browser to see your game! Choose One!
- RIGHT CLICK on an open space inside Sublime Text and select Open in Browser.
- DOUBLE CLICK on the file pong.html inside your Game Design > Pong folder.
- RIGHT CLICK on pong.html and select open with > Chrome (or whatever browser you like using).
Checkpoint
Compare your results with the example below.
Make sure it looks the same as the code below.
You should see a gray rectangle in the middle of your page as shown above.
See the code to make this below.
<html>
<head>
<title> Pong </title>
<script src="https://simplycodingcourses.com/files/simply.js"></script>
<script>
function start(){
sjs.open("target",500,400);
} //end start
</script>
</head>
<body onload="start()">
<h1> Pong </h1>
<div id="target" style="margin:auto;background:grey;"></div>
</body>
</html>
Remember, each time you edit your code, save the HTML file and refresh it in the browser to see the changes you have made!
Once you have everything setup correctly Click the Next button to move to the next Lesson!