Course completed! View summary

◀

Exercise 1 of 15

►

Overview

Welcome to the Game Builder

Today we will learn how to create a game. The goal of the game is to move the monkey to get the bananas. Here we will use the onKey function which is called whenever you press a key on your keyboard. The image of the monkey character on the screen is called a sprite. The function step moves the sprite. Write inside the onKey function to move the monkey. Now let's start!

@step 1

This will move the sprite.

Instructions

Use @step 1 inside @onKey. Once you are done, click on the Check button

Click on RUN!

Get the monkey to the banana

Great job!

monkey

1
2
@onKey = (key) =>
    # Add code here
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

onCollideWithWorldBounds

monkey

Duplicate

Delete

banana

Duplicate

Delete

Add new

Game settings

Background:

jungle | Change

Camera target:

World width:

World height:

Gravity:

Physics:

Reference Cards (21)

The += operator adds a value to a variable.

Appears in tab: Operators

Code Example

counter.value

A property of the Counter widget. The property named value holds the value of the Counter.

Appears in tab: WIDGETS

Code Example

Counter widget

The Counter widget is used to keep count and can be displayed in the game.

Appears in tab: WIDGETS

Loop

Repeats a block of code for as long as the game is running.

Appears in tab: Control

Code Example

setX newX

Sets the sprite’s x position based on the argument of the function. The sprite is placed at the new position.

Appears in tab: Movement

Code Example

setY newY

Sets the sprite’s y position based on the argument of the function. The sprite is placed at the new position.

Appears in tab: Movement

Code Example

play()

Plays a sound.

Appears in tab: SOUNDS

Code Example

destroy()

Destroys the sprite, removing it from the game world.

Appears in tab: Display

Code Example

onCollide sprite, () =>

Creates an event handler for two sprites collide. The first argument is the name of the other sprite. The second argument is the function to be called when the two sprites touch.

Appears in tab: Events

Code Example

@ vs. sprite name

Using @ with a property or a function refers to the sprite/widget in which the code is written. To refer to any other sprite/widget, use the sprite's/widget's name followed by a dot.

Code Example

jump [howHigh]

Makes the sprite jump. The sprite will jump to a certain height (based on the gravity of the game). Use this function with an argument to jump to a different than the default height. When used without an argument the parentheses must be included.

Appears in tab: Movement

Code Example

if blocks are used for decision making. If the condition is true (yes), then the code inside the if block is executed.

Appears in tab: Control

Code Example

The operator == compares the values on both of its sides. The result is true (yes) when both values are exactly the same and false (no) otherwise.

Appears in tab: Operators

Code Example

step numberOfSteps

Makes the sprite try to move. The sprite's movement can be blocked if there are tiles or other sprites in the way. The argument defines the number of pixels the sprite will move. Positive values tell the sprite to move to the right, negative values mean move to the left.

Appears in tab: Movement

Code Example

onKey = (key) =>

A property of a Sprite object that acts as an event handler. If onKey is set equal to a function, that function is called each time a keyboard key is pressed. The argument to the function is a code that represents whatever keyboard key that was pressed. This function can be used to control elements of the game using the keyboard.

Appears in tab: Events

Code Example

Sounds

A game object that represents a sound. The sound can be played using the Play block.

Appears in tab: SOUNDS

Sprite

A game object represented as an image on the screen at specific coordinates. Sprites also allow running animation, events and physics motion.

Appears in tab: SPRITES

Widget

A game object that displays information or interacts with the player.

Appears in tab: WIDGETS

x, y coordinates

The world has width (represented by the x coordinates) and height (represented by the y coordinates). Each sprite in the world has x and y coordinates that define its position. The top left corner of the game world has coordinates x = 0, y = 0 As you move to the right, the value of x get bigger; as you move down, the value of y gets bigger. The x and y coordinates are displayed in the top left corner and are changed as the mouse cursor is moved.

Tilemap

A game object made up of individual square tiles. Tiles can be used to "draw" the game world. They take up space and stop sprites from moving through them.

Game

An object representing the game as a whole. Properties of the game object include the width and height of the game world, which sprite the game camera should follow, and the strength of gravity in the game world.

Appears in tab: GAME