Rescue the Lunar Lander: A CoderDojo Tutorial

This tutorial is written for the Northfield chapter of CoderDojo It is aimed at students ages 8 and up.

Remember that whole moon landing thing?

I’m talking about this guy right here.

Well apparently everyone got too caught up in the hype, and we forgot to bring back the Apollo 11 ship! Since we can’t send anyone to go grab it off the moon, we need it to somehow come back to earth by itself.

The only way we can do that is by writing code!

In this tutorial, we’re going to learn how to use PlayCanvas to construct our spaceship simulator, to prove to NASA that our code works before they let us run it on the real rocket, and bring back a piece of history!

Part One: Setting Up PlayCanvas

1. Go to https://playcanvas.com
2. Press login on the top right. (Make a new account if you don’t already have one)

You can also login using your Gmail account.

3. Go to the NASA Project: https://playcanvas.com/project/413485/overview/nasa-lunar-rescue-mission

4. Click on the fork button to make a copy of it on your own account:

(Tip: you can copy and edit any project you see on this website!)

5. Now give your new project a name:

You can give it any name you like!

6. Press the FORK button on the bottom right to finish.

7. Click on the Editor button

Click to go into your workspace!

8. This is your workspace now! To launch the simulation, click on the top right play button button:

This is the “Launch” simulation button.

You should see the famous Apollo 11 ship on your screen!

Part Two: Adding Gravity

1. Click on the “Main” scene settings at the top:

This is world’s settings

2. Go to the settings tab on the right and click on physics to get the gravity. Set the Y to -9.8:

It’s negative so that it pulls things down

3. Hit the launch button again!

Did you see it? It falls pretty fast! 9.8 is the earth’s gravity. Can you find out what the moon’s gravity is?

Part Three: Adding Ground

1. Click on the + button at the top left:

We can add lots of objects this way

2. Then add a plane:

A plane is just a thin solid surface

3. Hit the launch button!

Uh oh! We have to fix that!

4. Add collision by selecting the plane on your scene (click on it) and then go to the properties on the right:

Click “Add Component” then “Collision”

5. Make sure the blue collision area is the right size (change the Half Extents in the properties) :

This is roughly how it should look

6. Add a rigid body:

This makes it interact with the physics world

7. Hit launch again!

Now it stands!

Part Four: Make It Fly With Code!

Now that you’re familiar with the editor, we’re going to write some code! PlayCanvas uses Javascript.

1. Right click in the folder area and create a new script:

Right click anywhere in this area to bring up this menu

2. Call your script something like fly and press enter.

3. Select the script and press edit in the properties menu:

This will pop up the editor!

4. Put these two lines of code inside the update function:

//When space is pressed
if (this.app.keyboard.isPressed(pc.KEY_SPACE)) {
 //Apply a force on the Y axis
 this.entity.rigidbody.applyForce(0, 2, 0);
}

5. Hit save on the top right

6. Attach the script by selecting the ship in your editor, and adding a new script component in the properties menu on the right:

Note how you can add your code to any object!

7. Scroll down in the menu and click on “Add Script” and select the script you created:

Click on “Add Script” to bring up a dropdown

8. Hit launch! Press space to fly!

NASA approved physics simulation

That’s it for the tutorial, but there’s a lot more to PlayCanvas, be sure to check out the developer documentation!

Challenges!

• Make the ship fly faster!
• Make the ship fly to the right when the D key is pressed and left when A is pressed.
• Create a script to move the camera around.
• Make the ship rotate when you press space (helpful tutorial)
• Add more ships!
• Create an elaborate maze for the ship to go through.
• Help me create more challenges?