Labyrinth Game Session 1 of 2
In this activity, we'll create a labyrinth game where you can tilt your device to move a marble through the maze. Similar to the classic wooden toy.
What You'll Need
Accelerometers measure the movement of a device. Most computers don’t have an accelerometer, so we’ll need access to a tablet. If you haven’t already, you’ll also need to create a Kid.js account. This will allow you to write code on your computer, publish it, then run it on your tablet.
How Accelerometers Work
Take a piece of paper and draw a straight line. Now draw the same line while also moving the paper to the side. You’ll notice that the second line curves. This is known as the Coriolis effect.
Inside your tablet are microscopic parts that vibrate back and forth. When you move the tablet, the path of these vibrating parts curves slightly because of the Coriolis effect. Your tablet measures this and uses the data to calculate how the tablet is moving. It’s pretty cool tech.
Part 1: The Marble 15 Minutes
Functions
We program a computer by giving it a series of commands, also known as functions. To run a command or function in JavaScript, type the name of the function followed by parentheses.
Many functions need parameters. For example, if you were to command someone to walk, you may also need to tell them how many steps or which direction. The parameters go inside of the parentheses.
We'll use the circle() function to create our marble.
The parameters are (in order) the x coordinate, y coordinate, and size. Try different values and see the result.
Variables
Variables are used to keep track of things. Think of a variable as a box with a label you can put things in. There are many things we may need to keep track of in an app, such as high score or health.
Variables are also useful for assigning names to things. Let's give the marble a name. This will allow us to reference it later.
let marble = circle(64, 64, 50)
Events
Events are things that happen while our app is running, like a mouse click, or key press. When you move your device around a “deviceorientation” event triggers. We can write code to run when this event occurs.
let marble = circle(64, 64, 50)
function movin() {
// Yee haw!
}
on('deviceorientation', movin)
When the device is being moved around, the movin() function will
be called. Here we can set the velocity of the marble to match the tilt of
the device. Kid.js provides the global variables tiltX and
tiltY, which contain the tilt of the device in degrees.
let marble = circle(64, 64, 50)
function movin() {
marble.velocity.x = tiltX;
marble.velocity.y = tiltY;
}
on('deviceorientation', movin)
Part 2: Publishing Your App 15 Minutes
Now is a good time to test things out on your tablet. Note that you will need a Kid.js account in order to publish your app. Teachers, make sure you have enabled "Publish Apps" in your classroom settings.
- Open the "Settings" panel and set the size to "Landscape". This will keep the size of your app the same on your computer and tablet.
- Select "Publish" from the menu. Your app can now be accessed by anyone. Don't worry, no one can edit your code unless logged into your account.
- Open the web browser on your tablet and enter the same address that you see in the address bar of your computer.
- If you'd like, from the share menu on your tablet, you can choose "Add to Home Screen". This will create an icon for your app, just like any other app.
Part 3: Adding Walls 30 Minutes
Construct a maze one wall at a time, using the rect() function.
The parameters are (in order) the x coordinate, y coordinate, width and height.
Keep adding rectangles until your maze is complete. Or use different shapes. Who's to say a maze has to be made up of rectangles?
Phew! That was a lot of work. We'll explore making this easier in the next session.
Warp Speed
You may have noticed a little glitch. If you tilt the tablet enough, the marble's velocity becomes so fast it's able to go right through walls!
We can fix this by putting some limits on the speed. We’ll use an if
statement to check if the velocity is bigger than a maximum value, and if it is, set
it to that maximum.
if (marble.velocity.x > 20) marble.velocity.x = 20
Also check if we’ve tilted too far the other way.
if (marble.velocity.x > 20) marble.velocity.x = 20
if (marble.velocity.x < -20) marble.velocity.x = -20
And in the vertical direction as well.
if (marble.velocity.x > 20) marble.velocity.x = 20
if (marble.velocity.x < -20) marble.velocity.x = -20
if (marble.velocity.y > 20) marble.velocity.y = 20
if (marble.velocity.y < -20) marble.velocity.y = -20