RBS CODE · GAME TOOLBOX

Game Functions Lab

No magic. See the function, see how it is used, change it, run it.

Today: start with the blue Core functions. Timers come next. Arrays, loops and platformer tools are later unlocks.

☰ TABLE OF CONTENTS — jump to a function

CORE · likely this week

CORE

move(item, xChange, yChange)

↑ TOP

YOU NEED: JS2 · function + style.left/top

Move any object in any direction. Positive/negative numbers choose the direction.

TRY CHANGING: Change 25 to 5, 50 or -25.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

place(item, x, y)

↑ TOP

YOU NEED: JS2 · parameters + style.left/top

Put an object at an exact position.

TRY CHANGING: Try changing both coordinates.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

hide(item) / show(item)

↑ TOP

YOU NEED: JS2 · style.display

Hide or show keys, treasure, doors and story objects.

TRY CHANGING: Use this later for a locked-door game.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

setText(textBox, text)

↑ TOP

YOU NEED: JS2 · innerText

Change any message box.

TRY CHANGING: Change the message.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

changeNumber(number, amount, display)

↑ TOP

YOU NEED: JS3 · maths + return + innerText

One function for score, health, gold, lives or energy.

TRY CHANGING: Try 1, 5 or -1.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

keepInside(item, gameArea)

↑ TOP

YOU NEED: JS3 · if + comparisons + sizes

Stop a player leaving the game.

TRY CHANGING: Press several times. It should stop at the edge.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

touching(item1, item2)

↑ TOP

YOU NEED: JS3 · rectangles + && + return

The core collision helper: are two rectangles overlapping?

TRY CHANGING: This is worth drawing as two rectangles on the board.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

randomPosition(item, gameArea)

↑ TOP

YOU NEED: JS3 · Math.random() + sizes

Put treasure somewhere random inside the game.

TRY CHANGING: Run it repeatedly.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

randomX(item, gameArea)

↑ TOP

YOU NEED: JS3 · Math.random() + width

Choose a random lane for falling rocks, cars or stars.

TRY CHANGING: Useful before Dodge and Road Racer.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

moveWithKeys(item, speed, up, down, left, right)

↑ TOP

YOU NEED: JS3 · keydown + event.key + parameters

One keyboard helper. You choose the keys.

TRY CHANGING: Change 15 to 30, or use w s a d.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

atEdge(item, gameArea, side)

↑ TOP

YOU NEED: JS3 · comparisons + return

Ask whether an object reached an edge.

TRY CHANGING: Try left, top, bottom.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

CORE

moveToward(enemy, target, speed)

↑ TOP

YOU NEED: JS3 BONUS · subtraction + Math.abs()

Make a simple enemy chase a target.

TRY CHANGING: Bonus only; not needed for Treasure Rush.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

TIMERS

startCountdown(seconds, display, whenFinished)

↑ TOP

YOU NEED: TIMERS · setInterval + clearInterval + callback

Reusable countdown for timed games.

TRY CHANGING: Teach the idea of setInterval() before expecting them to write this helper.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

LATER UNLOCKS · arrays, mazes, Pong, platformers, bullets

ARRAYS + LOOPS

randomItem(items)

↑ TOP

YOU NEED: ARRAY · length + random index

Pick random loot, questions or story events.

TRY CHANGING: A very natural first array function.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

ARRAYS + LOOPS

countItem(items, itemName)

↑ TOP

YOU NEED: ARRAY + LOOP

Count repeated items, such as 3 crystals.

TRY CHANGING: Use before the mystery trader game.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

ARRAYS + LOOPS

removeItems(items, itemName, amount)

↑ TOP

YOU NEED: ARRAY + LOOP + splice()

Trade or spend several copies of an item.

TRY CHANGING: Perfect for shops and NPC trades.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

ARRAYS + LOOPS

hasAllItems(inventory, neededItems)

↑ TOP

YOU NEED: ARRAY + LOOP + includes()

Check a recipe that needs several different items.

TRY CHANGING: Useful for recipe/story quests.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

ARRAYS + LOOPS

findTouching(item, items)

↑ TOP

YOU NEED: ARRAY + LOOP + touching()

Check one object against a whole list.

TRY CHANGING: Great for bullets or many collectibles.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

ARRAYS + LOOPS

moveIfClear(item, dx, dy, walls, gameArea)

↑ TOP

YOU NEED: MAZE · ARRAY + LOOP

Try a move; if any wall is hit, undo it.

TRY CHANGING: This is where arrays become obviously useful.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

PONG / PLATFORMER

trackKeys() / keyDown(keys, key)

↑ TOP

YOU NEED: SMOOTH KEYS · ARRAY + keyup

Know which keys are being HELD, needed for Pong/platformers.

TRY CHANGING: Later unlock: this is different from one key press.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

PONG / PLATFORMER

applyGravity(item, ySpeed, gravity)

↑ TOP

YOU NEED: PLATFORMER · speed variable + return

Gravity makes vertical speed increase every game loop.

TRY CHANGING: This is what “platformer physics” means: a speed number changes, gravity changes it, jump makes it negative.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

PONG / PLATFORMER

standingOnAny() / landOnPlatforms()

↑ TOP

YOU NEED: PLATFORMER · ARRAY + LOOP + rectangles

Check whether the player can jump, and stop falling on platforms.

TRY CHANGING: The full Platform Escape example uses both helpers.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

DOM+ BONUS

createSprite(gameArea, picture, x, y, size)

↑ TOP

YOU NEED: DOM+ · createElement + appendChild

Create bullets, coins or enemies while the game is running.

TRY CHANGING: Later bonus for shooting games.

1 · UNDER THE HOOD

2 · USE THE FUNCTION

RESULT + CONSOLEclick result for keyboard demos

Next: open Complete Game Lab to see these functions inside complete HTML + CSS + JavaScript games.

Game Functions Lab

move(item, xChange, yChange)

place(item, x, y)

hide(item) / show(item)

setText(textBox, text)

Explore the cave...

changeNumber(number, amount, display)

Score: 0

keepInside(item, gameArea)

touching(item1, item2)

randomPosition(item, gameArea)

randomX(item, gameArea)

moveWithKeys(item, speed, up, down, left, right)

atEdge(item, gameArea, side)

moveToward(enemy, target, speed)

startCountdown(seconds, display, whenFinished)

Time: 5

Ready

randomItem(items)

Open the chest...

countItem(items, itemName)

Crystals: ?

removeItems(items, itemName, amount)

hasAllItems(inventory, neededItems)

Checking...

findTouching(item, items)

moveIfClear(item, dx, dy, walls, gameArea)

trackKeys() / keyDown(keys, key)

applyGravity(item, ySpeed, gravity)

standingOnAny() / landOnPlatforms()

createSprite(gameArea, picture, x, y, size)