It's been weeks since headquarters has received communication from SK182, a new colony in the outer worlds.
Commander Jenkins suspects a clever hack employing a quantum biogenic virus, but she can't be certain. Cyber troopers have been dispatched to investigate.
As they enter the station from the south, special agents Skyla and Nero find no signs of life. Your mission is to guide them along the path. Reverse the hacks and take back control of the station!
Use the forward()
command to reach the portal.
Each time you use this function, the player moves one block forward.
How many forward()
commands do you need to reach the goal? Press run when
you're ready to try out your solution. Don't worry if you don't reach the goal on the
first try, just try again!
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
Follow any command by an open (
and close )
parentheses.
End the command with a semicolon character ;
So far, you've been writing code for a computer to run. But humans need to read code too! Add a description to your code using comments. This makes reading code a lot easier.
Programmers often work together on teams, editing a single base of code, and use comments to describe their code to one another. If you're writing code together with others, or want feedback from your teachers, you'll want to use comments too, so they can understand what you are trying to do.
Use comments whenever you're writing your own original JavaScript code. They're also handy to remind yourself of what you were writing!
In JavaScript, type two forward slash characters //
to start a new comment.
Any text that you write after that will be documentation for your code. In
other words, it won't affect how your program runs.
Here's an example:
Notice how //
can appear after working code. All the text that appears
after the //
won't affect the commands for the forward, turn right, forward
sequence.
The comment symbol can also be used to make lines of code not run. Programmers call this commenting out their code. You can experiment with your code without deleting it in this way. Both lines of the code below are comments, so they won't run.
Sometimes you'll want more than one line of text to describe a section of code.
A multi-line comment starts with /*
and ends with */
. Any text between the
start and end marker will be ignored by JavaScript.
Multi-line comments are useful for writing more detailed documentation.
Try adding and removing //
to see what happens. Which lines run? Try adding
your own code and comments, too.
Here's how it works:
Command | Description |
---|---|
console.log(value) |
The console.log method will print the passed value in the play area, ending with a new line character. This means that multiple console.log calls will print their value parameters on a new line. |
Great job! Some code has been written already to solve this next puzzle.
Just one problem, the solution has way too many forward()
commands. Comment
out the extra commands and get Nero to the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
To comment out a line of code, type //
at the beginning of the line.
When counting the number of forward()
commands you need, ignore the stairs
and just count the path tiles.
Navigate the corner using the turnRight()
command and get to the portal.
Command | Description |
---|---|
forward(); | Moves the character one step forward. |
turnRight(); | Turns the character to the right. |
Navigate the corner using the turnLeft()
command and get to the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
All commands end with an open (
and close )
parentheses, followed by a semicolon ;
The turnLeft()
command will turn the character to the left.
Straying off the path tiles will cause you to instantly fail.
Navigate Nero to the portal using the commands. Remember, Nero will climb the
stairs automatically without any additional forward()
commands.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
All commands end with an open (
and close )
parentheses, followed by a semicolon ;
Use the stairs to move up to the next level.
When counting the number of forward()
commands you need, ignore the stairs and only count the path tiles.
Move in a zig-zag pattern and get to the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
turnRight() |
Turns the character to the right. |
(
and close )
parentheses, followed by a semicolon ;
Sometimes you need to give the same commands over and over again. How many
forward()
commands do you need to get Nero to the portal?
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
All commands end with an open (
and close )
parentheses, followed by a semicolon ;
Use the stairs to move up to the next level.
In the last puzzle, you had to write the forward()
command over and over again. That was kind of annoying wasn't it? There's an easier way to repeat code!
We'll use something called loops to run the same code many times. To start things off, let's learn about a kind of loop called the for loop.
For loops execute the same code a certain number of times. They are useful when you need to count (for example, count from 0 to 100) or whenever you know exactly how many times you want your code to run.
Here's what a for loop looks like In JavaScript:
We don't actually use the words setup
, condition
and increment
. We'll need to replace those with real JavaScript code.
So let's take a look at what each of these do.
The setup part of the loop usually defines a variable to keep track of how many times the loop has run. You might set starting value at 0. For example, i = 0
says to start counting at 0. If you put i = 10
, that means to start counting from 10.
The condition is how the loop will finish, you can think of it as the end condition. You need to tell JavaScript when to stop counting. An example condition is i < 10
. JavaScript will run the for loop while the value of i
is less than 10.
The increment tells the loop how to count. You count up by 1 or any other number, or even count down (for example, from 10 down to 0). To count up by 1 at a time, you can use i = i+1 as the increment. Since this add-by-1 case is so common, we typically use i++
as a shortcut for i = i+1
. Similarly, to count down instead of up, you can use i--
as a shortcut for i = i-1
.
The whole point of using for loops is to repeat code again and again. Any code that's in between the curly brackets, {
and }
will repeat for the specified number of times.
We'll indent those commands (add four spaces to the front) so that it's clear which commands repeat, and which don't.
Let's revisit the programming puzzle from the last page. You needed to go forward 6 blocks, which means using the forward()
command six times.
Here's how we'd write it with a for loop:
Let's use a for loop to count from 0 to 9. Press run to see the output.
Try changing the values in the loop to see how the output changes.
Now let's count down from 9 to 0. Notice that our setup has i start at 9, our condition is i >= 0
.
Click run to see the output.
Print numbers from 0 to 20 on your own.
Did you notice that you used spaces in your for loops, for the commands you wanted to repeat? Programmers call this use of "white space" indentation.
To better understand how your code works or to make it easier to debug your code, it helps to indent properly.
Programmers use indentation to show the structure of their code and make the code more readable.
You'll want to use 4 spaces to indent your code. Here's an example:
Notice how the code inside the loop is indented by 4 spaces. The final }
brace
is not indented; this shows the end of the loop. This makes the code much easier
to read and debug.
Let's look at another countdown loop. When the for loop is complete, this code will print "Liftoff!" to the screen.
The code outside of the loop, console.log("LIFTOFF!");
isn't within the { }
braces. This is not indented either! It only runs once, once the loop is
complete.
Indentation makes it easy to see which part of your code is in a loop and which part isn't.
Try indenting the following for loop to make the code easier to read and debug. Make sure the indentation is 4 spaces.
There is a much easier way to do the same thing over and over again! Use a for loop to help Skyla reach the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
Use the commands to navigate Nero to the portal. New obstacles are ahead! Use two new jump commands provided below to traverse the path safely.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
longJump() |
Moves the character forward over a one-block gap. |
highJump() |
Moves the character up and forward one block. |
The highJump()
command moves your character up and forward by one tile.
The longJump()
command makes your character jump over one tile.
Moving to a lower tile will cause your character to drop down.
Use a for loop to guide Skyla to the portal using as few lines of code as possible. Skyla has caught sight of the virus! Use the fire()
command to remove it from the path.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
fire() |
Launches a laser. |
fire()
command, the character's laser will travel up to 5 tiles.Use a for loop so that Nero can reach the portal. Watch out for gaps in your path! Use the longJump()
command to jump over the them.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
longJump() |
Moves the character forward over a one-block gap. |
fire() |
Launches a laser. |
This one has a slightly different pattern. Do you see it? Help Skyla get to the portal using a for loop.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
longJump() |
Moves the character forward over a one-block gap. |
fire() |
Launches a laser. |
Use multiple longJump()
and forward()
commands to move Nero to the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnRight() |
Turns the character to the right. |
longJump() |
Moves the character forward over a one-block gap. |
highJump() |
Moves the character up and forward one block. |
fire() |
Launches a laser. |
Jump across the pillars to reach the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
turnRight() |
Turns the character to the right. |
longJump() |
Moves the character forward over a one-block gap. |
highJump() |
Moves the character up and forward one block. |
longJump()
command, you do not have to land on a tile of the same height. Your character will drop down to the tile after the jump.Repeat the highJump()
command to help Nero climb any obstacles and the longJump()
command to get across the map.
Earlier, we learned to use the for loop to execute the same code a certain number of times. Now let's learn about another kind of loop called a while loop.
While loops execute the same code repeatedly as long as the specified condition is true. You can use them when you're not exactly sure how many times to run. They'll just keep going and going until the condition is false.
In JavaScript, a while loop has the following syntax:
The condition determines how long the loop will continue to execute.
For example, your condition might be i < 10
. This says keep running the loop while the value of i
is less than 10.
Let's use a while loop to count from 0 to 9. We need to initialize the variable i
to 0 outside the while loop and increment the variable (i++;
) at the bottom of the loop.
The condition in this case is i < 10
. Click on the run button to see how it works.
Now let's count down from 9 to 0. Here, we need to decrement the variable i--;
at the bottom of the loop. Click on the run button to see how it works.
Functions can be used within while statements.
For example, you might write:
This says, as long as there is a path ahead, keep moving forward.
While loops are another powerful tool for controlling your programs!
Write your own while loop that prints all numbers from 1 to 10.
Combine multiple longJump()
and turns to move Skyla to the portal.
Command | Description |
---|---|
turnLeft() |
Turns the character to the left. |
turnRight() |
Turns the character to the right. |
longJump() |
Moves the character forward over a one-block gap. |
reachedGoal() |
Returns true if the character is at the portal. |
The longJump()
command makes your character jump over one tile.
The !
character in JavaScript represents not in a condition. You could think
of the while loop that's been provided as, "Repeat the following code as long
as Skyla has NOT reached the goal."
Use the fire()
command to clear viruses along your path to the goal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
turnRight() |
Turns the character to the right. |
highJump() |
Moves the character up and forward one block. |
fire() |
Fires a laser. |
reachedGoal() |
Returns true if the character is at the portal. |
You can write a program so that it performs different tasks based on a condition. In this way, you can have your program "make decisions" all on its own. Conditionals are used for this purpose.
An if statement executes a segment of code only if a condition is true. Otherwise your program won't execute that code.
The if statement is a very common kind of conditional, so let's take a closer look.
An if statement has the following syntax:
If the condition isn't met (that is, if it is false) your program just skips right over any commands in the if statement.
The condition determines if the code inside the if statement will be executed.
An example is i < 10
.
The code inside the if statement will be executed if the value of i
is less than 10
. Every condition you use in an if statement will need to evaluate to either true or false.
The example below shows how to output the odd numbers from 1 to 20 using an if statement.
How does it work? Recall that the %
operator is modulo, which returns the remainder of division. If you divide by 2, and the remainder is equal 1, then the number must be odd. Notice how the code behaves in response to this condition:
(i % 2) == 1
Even numbers won't be printed in the for
loop.
An else statement is placed after an if statement and executes a segment of code only if the previous condition was false.
An else statement has the following syntax:
condition1
is true then commands1()
operates.condition1
is false then commands2()
operates.An else if statement is placed after an if statement and executes a segment of code only if the previous condition was false and a new condition is true. Otherwise your program won't execute that code.
An else if statement has the following syntax:
condition1
is true then commands1()
operates.condition1
is false and condition2
is true then commands2()
operates.condition1
and condition2
are both false then commands3()
operates.Notice how the order of your conditions is really important!
Use a while()
loop and the reachedGoal()
condition to reach the portal. Fix the syntax errors to solve this puzzle.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the left. |
turnRight() |
Turns the character to the right. |
longJump() |
Moves the character forward over a one-block gap. |
fire() |
Fires a laser. |
hasPathAhead() |
Returns true if there is a path in front. |
jumpableGapAhead() |
Returns true if there is a jumpable gap ahead. |
virusInSight() |
Returns true if a virus is within a distance of 5 directly in front of the character. |
reachedGoal() |
Returns true if the character is at the portal. |
Use a while()
loop and the reachedGoal()
condition to reach the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnRight() |
Turns the character to the right. |
turnLeft() |
Turns the character to the left. |
fire() |
Fires a laser. |
hasPathAhead() |
Returns true if there is a path in front. |
hasPathLeft() |
Returns true if there is a path to the left. |
virusInSight() |
Returns true if a virus is within a distance of 5 directly in front of the character. |
reachedGoal() |
Returns true if the character is at the portal. |
Debug the code to help Skyla climb the mountain, then continue down the path to reach the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnLeft() |
Turns the character to the right. |
longJump() |
Moves the character forward over a one-block gap. |
highJump() |
Moves the character up and forward one block. |
fire() |
Fires a laser. |
hasPathAhead() |
Returns true if there is a path in front. |
jumpableWallAhead() |
Returns true if there is a jumpable wall ahead. |
virusInSight() |
Returns true if a virus is within a distance of 5 directly in front of the character. |
reachedGoal() |
Returns true if the character is at the portal. |
This is it! Your final challenge. The control room is just ahead. Use a while()
loop and the reachedGoal()
condition to reach the portal.
Command | Description |
---|---|
forward() |
Moves the character one step forward. |
turnRight() |
Turns the character to the right. |
highJump() |
Moves the character up and forward one block. |
longJump() |
Moves the character forward across a one-block gap. |
fire() |
Fire a laser. |
hasPathAhead() |
Returns true if there is a path in front. |
hasPathRight() |
Returns true if there is a path to the right. |
jumpableGapAhead() |
Returns true if there is a jumpable gap ahead. |
jumpableWallAhead() |
Returns true if there is a jumpable wall ahead. |
virusInSight() |
Returns true if a virus is within a distance of 5 directly in front of the character. |
reachedGoal() |
Returns true if the character is at the portal. |