It's time to explore space! But first, we've got to work together and build a spaceship that will get us there!
We've provided a shipyard.js
file that we're going to use to build our spaceship, our rockets, our crew, and blast off.
We need a launchpad from which we can launch our spaceship!
Create a function called launchpad
.
Inside of the function write a short message announcing the initiation of preflight procedures - any string of text that you want!
This message should be outputted to the browser's developer tools console.
Then call launchpad
at the end of the file.
We can run the code by going to the terminal and typing node shipyard.js
.
You should see your preflight message!
After each step, we should run node shipyard.js
to make sure our code works, and is printing what we expect.
Let's start building our space vessel!
Create a JavaScript file called Spaceship.js
. Using class syntax, define a Spaceship
class that takes a name
argument and assigns it to a name
property. Don't forget to export your module! Import the file to your shipyard.js and assign it to the variable Spaceship.
What is an appropriate name for this spaceship? Create a new Spaceship object with the name of your choice, and assign it the variable ourShip
.
Let's add another preflight message that announces the name of our spaceship in our launchpad
function.
We'll need to add an argument to the launchpad
function so we can pass in ourShip
.
We're going to work on getting our crew on the spaceship - but first we need to round them up!
In shipyard.js
, first create an array named crewNames
, and fill it with the name of all your friends!
Create a JavaScript file called CrewMember.js
. Make a CrewMember
class that takes a name
argument and assigns it to a name
property. Also make a trained
property that defaults to false. Don't forget to export your new module and import it into shipyard.js
! Assign it to a variable called CrewMember.
Before we can load the crew on the spaceship, we have to first train the crew! In shipyard.js
, we're going to create a function called trainCrew
that takes in an array of strings (the names of each crew member) and returns an array of JavaScript objects (a CrewMember object via the CrewMember class).
The trainCrew function should also change their trained
attribute to true.
Return an array of trained crew member objects by using both the crewNames
array and the trainCrew
function.
Time to get our crew onboard the spaceship!
Let's add a crew
property to the Spaceship
class with a default value of an empty array.
Next, let's create a loadCrew
property on the spaceships's class with a function as a value.
This function should take in an array of crew member objects and one by one it should:
- Add them to the spaceship's
crew
array. - Output a message announcing the name of the crew member that has boarded the spaceship.
Let's make loading the crew part of the launchpad
function. We're going to add another argument to launchpad
to accept the crewMembers
array (the array of trained crew members from step 3!).
Finally, lets call the spaceship's loadCrew
function with the crewMembers
array in the launchpad
function.
The crew decided to take turns playing the role of captain of the spaceship. Every time we ask the spaceship who is the captain, we're going to get a random crew member!
Start by defining the captain
function on the spaceship
class.
This function will randomly pick a member from the spaceship's crew
array.
But, how do we implement randomness in JavaScript? Take a look at the following code for some inspiration!
let number = 3;
let randomNumber = Math.floor(Math.random() * number);
console.log(randomNumber);
// Outputs either 0, 1, or 2 to the browser's console.
Once the captain
function has been implemented, let's add another preflight message to the the launchpad, so that we can announce the captain of this particular launch.
Be sure to check how the code looks by running node shipyard.js
, then give our first captain a high-five.
Earth's gravity well is no small task to overcome. We're going to need some sturdy rockets to take us to the stars. Make a file called Rocket.js
where we will export a module containing an object literal representing the rocket we will use to propel our spaceship!
Create a rocket
object (which we will later mount to our spaceship for propulsion) via an object literal, and assign it two properties:
fuel
which will default to0
.addFuel
which will be a function that accepts an integer as an argument, adds it to the rocket's fuel, and prints out the new fuel amount.
Now, we're going to write some code to fire the engines! We want to make sure there is fuel in the tank, and if there is, we want to print that the rockets fired and remove some fuel.
Our fire
function needs to:
- Check and see if there is fuel in the
fuel
property. - If there is, subtract 1 from the
fuel
property, print that the engines have been fired, print the rocket's current fuel count, and return true. - If there is not, print that the engines failed to fire and return false.
We're almost there!
To start off, let's add a property to the Spaceship
class called propulsion
which is set initially to null
.
We're going to write some cool functions on the Spaceship
class to attach our rocket.
Add another property to the Spaceship
class called mountPropulsion
, this is going to be a function that takes in an object and assigns it to the spaceship's propulsion
property.
It should also print out that the propulsion mounted!
Finish by passing in our rocket
to the launchpad
function by importing Rocket.js
and assigning it to a rocket variable. In the launchpad
function, mount the rocket to ourShip!
We've got all of our pieces together. Now we've got to blastoff!
Let's add a takeoff
function on the spaceship
class that:
fire
s the propulsion drives.- If the engines successfully fire, print a really convincing takeoff noise.
- If the engines fail to fire, print that takeoff was unsuccessful.
Once you are done, call the takeoff
function in the launchpad function and take off!!
Oh snap, did you forget to fuel up your rocket??? If you need to add fuel to your rocket, add that to your launchpad function!
Congrats! Our ship works. But...I feel like it's missing something...
...Of course! We need a countdown!
Let's create a countdown
function whose first argument is an integer from which we will start the countdown.
- If the function receives
0
as an argument, it should print out that we're blasting off. - If the number is not
0
, then the function should print out the number and recursively call itself with the next number in the countdown.
Now, just call the function in launchpad
, and give it a run with node shipyard.js
!
The countdown is working, but it's going too fast. It would be great if there was a second delay between each number being printed out.
There's a special function in JavaScript, setTimeout() that executes code snippet after a specified delay.
Update your countdown
function to use setTimeout()
in order to have a one second delay between printing out the numbers.
Congrats, everyone! It looks like a successful... wait, why did the rockets fire before the countdown was finished?
JavaScript executes its code in a very particular way. It goes line by line, scheduling the execution of each line of code.
However, some functions - like setTimeout
- are asynchronous, and JavaScript schedules them for the future.
This means that takeoff()
is firing before the countdown finishes.
How do we fix this? Well, we could use a popular pattern in JavaScript called the callback
pattern to register a callback
for the asynchronous code to call at the appropriate time.
Callbacks are usually functions, but one could also pass an object and call a function on that object. Here's an example of a callback function:
let hello = () => {
console.log("Outputted last");
}
let asynchronous_code = (fn) =>{
setTimeout(() => {
console.log("Outputted first");
fn();
}, 1000);
}
asynchronous_code(hello);
Let's edit the countdown function to accept something we can run as a callback, and then update the launchpad accordingly.
Run node shipyard.js
, and get ready for takeoff, Launchers!