Complete Game Blocks Dictionary

Find a function, see exactly what it does, whether it needs HTML elements, which library it belongs to, and a worked example you can copy.

POWER BLOCKS BUILDING BLOCKS ARRAYS + MANY OBJECTS PLATFORMER GAMEPAD AUDIO

POWER BLOCKS

moveWithKeys(...)

Move an object with the keyboard.

GAME LIBRARY

CallmoveWithKeys(object, speed, gameArea);

Needs HTML? YES: object + game area IDs.

<div id="game">
    <div id="player">🚀</div>
</div>

<script>
moveWithKeys(
    "player",
    10,
    "game"
);
</script>

collect(...)

Touch an item, add points and move the item somewhere new.

GAME LIBRARY

Callcollect(player, item, scoreDisplay, points, gameArea);

Needs HTML? YES: player, item, score display and game area.

<div id="scoreText">0</div>
<div id="game">
    <div id="player">😀</div>
    <div id="coin">🪙</div>
</div>

<script>
collect(
    "player",
    "coin",
    "scoreText",
    1,
    "game"
);
</script>

winAtScore(...)

End the game when a score display reaches a target.

GAME LIBRARY

CallwinAtScore(scoreDisplay, target, message);

Needs HTML? YES: score display + message.

<div id="scoreText">0</div>
<h2 id="message">GO!</h2>

<script>
winAtScore(
    "scoreText",
    10,
    "message"
);
</script>

chase(...)

Make one object continuously follow another.

GAME LIBRARY

Callchase(chaser, target, speed);

Needs HTML? YES: chaser + target.

<div id="player">😀</div>
<div id="monster">👾</div>

<script>
chase(
    "monster",
    "player",
    1.5
);
</script>

loseOnTouch(...)

Lose when two objects touch.

GAME LIBRARY

CallloseOnTouch(player, danger, message);

Needs HTML? YES: two objects + message.

<div id="player">😀</div>
<div id="enemy">👾</div>
<h2 id="message">GO!</h2>

<script>
loseOnTouch(
    "player",
    "enemy",
    "message"
);
</script>

patrol(...)

Move an object automatically and bounce at the game edges.

GAME LIBRARY

Callpatrol(object, xSpeed, ySpeed, gameArea);

Needs HTML? YES: object + game area.

patrol(
    "enemy",
    4,
    0,
    "game"
);

keyOpensDoor(...)

Collect a key, unlock a door, then win by reaching it.

GAME LIBRARY

CallkeyOpensDoor(player, key, door, message);

Needs HTML? YES: player, key, door, message.

keyOpensDoor(
    "player",
    "key",
    "door",
    "message"
);

winOnTouch(...)

Win when the player touches a goal.

GAME LIBRARY

CallwinOnTouch(player, goal, message);

Needs HTML? YES: player, goal, message.

winOnTouch(
    "player",
    "flag",
    "message"
);

countdown(...)

Count down once per second and end when time reaches zero.

GAME LIBRARY

Callcountdown(seconds, timeDisplay, message);

Needs HTML? YES: time display + message.

countdown(
    20,
    "timeText",
    "message"
);

survive(...)

Win if the player stays alive until the timer ends.

GAME LIBRARY

Callsurvive(seconds, timeDisplay, message, player);

Needs HTML? YES: time display, message, player.

survive(
    15,
    "timeText",
    "message",
    "player"
);

BUILDING BLOCKS

get(...)

Find an HTML element by ID, or accept an element you already have.

GAME LIBRARY

Callget(itemOrId);

Needs HTML? YES only if you pass an ID string.

let player =
    get("player");

getAll(...)

Get every matching HTML element and turn them into an array.

GAME LIBRARY

CallgetAll(cssSelector);

Needs HTML? YES: matching HTML elements.

let platforms =
    getAll(".platform");

move(...)

Move an element by x/y pixels.

GAME LIBRARY

Callmove(item, xChange, yChange);

Needs HTML? YES: the object.

move(
    player,
    5,
    0
);

place(...)

Put an element at an exact x/y position.

GAME LIBRARY

Callplace(item, x, y);

Needs HTML? YES: the object.

place(
    player,
    40,
    150
);

touching(...)

Return true when two elements overlap.

GAME LIBRARY

Calltouching(item1, item2);

Needs HTML? YES: both objects.

if (
    touching(
        player,
        coin
    )
) {
    alert("GOT IT!");
}

keepInside(...)

Stop an element leaving its game area.

GAME LIBRARY

CallkeepInside(item, gameArea);

Needs HTML? YES: object + game area.

keepInside(
    player,
    game
);

randomPosition(...)

Move an object to a random x/y position inside a game area.

GAME LIBRARY

CallrandomPosition(item, gameArea);

Needs HTML? YES: object + game area.

randomPosition(
    coin,
    game
);

randomX(...)

Choose a random horizontal position.

GAME LIBRARY

CallrandomX(item, gameArea);

Needs HTML? YES: object + game area.

randomX(
    enemy,
    game
);

setText(...)

Change words shown in an element.

GAME LIBRARY

CallsetText(item, text);

Needs HTML? YES: text/message element.

setText(
    message,
    "YOU WIN!"
);

setEmoji(...)

Change an element's text/emoji.

GAME LIBRARY

CallsetEmoji(item, emoji);

Needs HTML? YES: the element.

setEmoji(
    player,
    "💥"
);

hide / show(...)

Hide or show an HTML element.

GAME LIBRARY

Callhide(item); / show(item);

Needs HTML? YES: the element.

hide(key);
show(door);

changeNumber(...)

Add/subtract a number and update a display.

GAME LIBRARY

CallchangeNumber(number, amount, display);

Needs HTML? YES: display element.

score =
    changeNumber(
        score,
        1,
        scoreText
    );

every(...)

Run a function repeatedly using milliseconds.

GAME LIBRARY

Callevery(milliseconds, function);

Needs HTML? NO, unless your function uses HTML.

every(
    1000,
    function() {
        console.log("tick");
    }
);

after(...)

Run a function once after a delay.

GAME LIBRARY

Callafter(milliseconds, function);

Needs HTML? NO, unless your function uses HTML.

after(
    500,
    function() {
        setText(
            message,
            "GO!"
        );
    }
);

ARRAYS + MANY OBJECTS

addSprite(...)

Create a real div, append it to the game and push it into an array.

GAME LIBRARY

CalladdSprite(list, gameArea, picture, x, y, size);

Needs HTML? YES: game area. The new sprite is created for you.

let enemies = [];

addSprite(
    enemies,
    game,
    "👾",
    100,
    0,
    40
);

createSprite(...)

Create one real sprite element and return it.

GAME LIBRARY

CallcreateSprite(gameArea, picture, x, y, size);

Needs HTML? YES: game area. New sprite created automatically.

let enemy =
    createSprite(
        game,
        "👾",
        100,
        0,
        40
    );

moveAll(...)

Move every DOM element stored in an array.

GAME LIBRARY

CallmoveAll(items, xChange, yChange);

Needs HTML? YES: the array must contain elements.

moveAll(
    enemies,
    0,
    4
);

touchingAny(...)

Return the first array item touching another object, or null.

GAME LIBRARY

CalltouchingAny(item, items);

Needs HTML? YES: object + array of elements.

let hit =
    touchingAny(
        player,
        enemies
    );

if (hit) {
    gameOver(message);
}

removeAt(...)

Delete one sprite from BOTH the DOM and its array.

GAME LIBRARY

CallremoveAt(list, index);

Needs HTML? NO extra HTML; the array already contains elements.

removeAt(
    bullets,
    2
);

removeSprite(...)

Delete a sprite and optionally remove it from its array.

GAME LIBRARY

CallremoveSprite(sprite, list);

Needs HTML? NO extra HTML.

removeSprite(
    enemy,
    enemies
);

clearSprites(...)

Delete every DOM sprite in an array and empty the array.

GAME LIBRARY

CallclearSprites(list);

Needs HTML? NO extra HTML.

clearSprites(
    enemies
);

removeOffscreen(...)

Remove sprites that leave the game from BOTH DOM + array.

GAME LIBRARY

CallremoveOffscreen(items, gameArea);

Needs HTML? YES: game area; array contains sprites.

removeOffscreen(
    bullets,
    game
);

makeBullet(...)

Create a bullet at a shooter and push it into a bullets array.

GAME LIBRARY

CallmakeBullet(shooter, gameArea, bullets, picture, size);

Needs HTML? YES: shooter + game area.

let bullets = [];

makeBullet(
    player,
    game,
    bullets,
    "🔥",
    18
);

removeCollisions(...)

Remove colliding pairs from two arrays and return number of hits.

GAME LIBRARY

CallremoveCollisions(listA, listB);

Needs HTML? NO extra HTML; arrays contain sprites.

score +=
    removeCollisions(
        bullets,
        enemies
    );

PLATFORMER

applyGravity(...)

Increase vertical speed and move the player downward.

GAME LIBRARY

CallapplyGravity(item, ySpeed, gravityStrength);

Needs HTML? YES: player/object.

ySpeed =
    applyGravity(
        player,
        ySpeed,
        0.55
    );

standingOnAny(...)

Return true when player feet are on any platform in an array.

GAME LIBRARY

CallstandingOnAny(player, platforms);

Needs HTML? YES: player + platform elements.

if (
    standingOnAny(
        player,
        platforms
    )
) {
    ySpeed = -11;
}

landOnPlatforms(...)

Land on any platform in an array and return corrected vertical speed.

GAME LIBRARY

CalllandOnPlatforms(player, ySpeed, platforms);

Needs HTML? YES: player + platforms.

ySpeed =
    landOnPlatforms(
        player,
        ySpeed,
        platforms
    );

GAMEPAD

moveWithGamepad(...)

Move an object with the left stick. Optional pad index supports multiple controllers.

GAMEPAD LIBRARY

CallmoveWithGamepad(object, speed, gameArea, padIndex);

Needs HTML? YES: object + game area. Needs GAME + GAMEPAD libraries.

moveWithGamepad(
    "player1",
    8,
    "game",
    0
);

moveWithGamepad(
    "player2",
    8,
    "game",
    1
);

driveWithGamepad(...)

Top-down drive: left stick steers, RT forward, LT reverse.

GAMEPAD LIBRARY

CalldriveWithGamepad(vehicle, steeringSpeed, driveSpeed, gameArea, padIndex);

Needs HTML? YES: vehicle + game area. Needs GAME + GAMEPAD libraries.

driveWithGamepad(
    "car",
    5,
    7,
    "game",
    0
);

leftStick(...)

Read left-stick x/y values from -1 to +1.

GAMEPAD LIBRARY

CallleftStick(padIndex);

Needs HTML? NO by itself.

let stick =
    leftStick(0);

move(
    player,
    stick.x * 6,
    stick.y * 6
);

rightStick(...)

Read right-stick x/y values from -1 to +1.

GAMEPAD LIBRARY

CallrightStick(padIndex);

Needs HTML? NO by itself.

let aim =
    rightStick(0);

padButton(...)

Check whether a button is held down.

GAMEPAD LIBRARY

CallpadButton(buttonNumber, padIndex);

Needs HTML? NO by itself.

if (
    padButton(
        PAD.A,
        0
    )
) {
    console.log("A DOWN");
}

padJustPressed(...)

True once when a button changes from up to down.

GAMEPAD LIBRARY

CallpadJustPressed(buttonNumber, padIndex);

Needs HTML? NO by itself. Call updatePadButtons() at end of your own polling loop.

if (
    padJustPressed(
        PAD.A,
        0
    )
) {
    jump();
}

updatePadButtons();

padButtonValue(...)

Read analog button/trigger value, usually 0 to 1.

GAMEPAD LIBRARY

CallpadButtonValue(buttonNumber, padIndex);

Needs HTML? NO by itself.

let gas =
    padButtonValue(
        PAD.RT,
        0
    );

rumble(...)

Vibrate one controller.

GAMEPAD LIBRARY

Callrumble(strong, weak, milliseconds, padIndex);

Needs HTML? NO. Hardware/browser support varies.

rumble(
    1,
    0.4,
    250,
    1
);

rumbleOnTouch(...)

Buzz once when two objects first touch. Optional pad index chooses controller.

GAMEPAD LIBRARY

CallrumbleOnTouch(item1, item2, strong, weak, ms, padIndex);

Needs HTML? YES: two objects. Needs GAME + GAMEPAD libraries.

rumbleOnTouch(
    "player2",
    "enemy",
    1,
    0.4,
    250,
    1
);

moveTwoPlayersWithGamepads(...)

Shortcut: first controller moves player1, second moves player2.

GAMEPAD LIBRARY

CallmoveTwoPlayersWithGamepads(player1, player2, speed, gameArea);

Needs HTML? YES: both players + game area.

moveTwoPlayersWithGamepads(
    "red",
    "blue",
    8,
    "game"
);

AUDIO

makeSound(...)

Load a sound and choose volume/looping.

AUDIO LIBRARY

CallmakeSound(file, volume, loop);

Needs HTML? NO HTML required. Needs AUDIO library.

let coinSound =
    makeSound(
        "sounds/coin.mp3",
        0.7
    );

playSound(...)