RBS CODE · GAME WORKSHOP

10 Games You Can Build

Play them. Read the tiny game blocks. Learn what each block means. Then copy, change and combine them to invent your own game.

1 · PLAYUnderstand the game before the code.
2 · READLook at the few blocks that make it work.
3 · CHANGEChange one number or object and run again.
4 · REMIXCombine blocks from different games.

📘 GAME BLOCKS DICTIONARY

1. Coin Collector2. Treasure Rush3. Key Escape4. Dodge to the Door5. Timed Gem Rush6. Two-Player Tag7. Monster Survival8. Gamepad Treasure Hunt9. Gamepad Racer10. Gamepad Key Mission

🚀 How to Make Your Own Copy

1. Choose a gameCoin Collector is easiest first.
2. Open “MAKE YOUR OWN COPY”Press COPY WHOLE GAME.
3. Paste into index.htmlSave it in a new folder.
4. Keep the library beside itThen open index.html and play.
my-game/ index.html rbs-game-library.js rbs-gamepad-library.js ← only for gamepad games
Important: the library does the complicated engine work. You learn the readable game blocks first. Later you can look inside the library and learn how they are built.
⌨️ KEYBOARD GAME

1. Coin Collector

Move around and collect 10 coins.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("player", 7, "game");
collect("player", "coin", "scoreText", 1, "game");
winAtScore("scoreText", 10, "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
collect(...)
When the player touches an item: add points and move the item somewhere new.
player · item · score display · points to add · game area
TRY: Change 1 to 5 to make the item worth 5 points.
winAtScore(...)
Win when the score reaches a number.
score display · score needed · message box
TRY: Change the target number.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>1. Coin Collector</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>1. Coin Collector</h1>
    <p>Move around and collect 10 coins.</p>

    <div class="hud">
        <span>Coins: <span id="scoreText">0</span></span>
        <span>Goal: 10</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:40px;top:160px">😀</div>
        <div id="coin" class="sprite" style="left:540px;top:90px">🪙</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("player", 7, "game");
collect("player", "coin", "scoreText", 1, "game");
winAtScore("scoreText", 10, "message");
</script>

</body>
</html>
⌨️ KEYBOARD GAME

2. Treasure Rush

Collect treasure, but a monster chases you.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("player", 7, "game");
collect("player", "treasure", "scoreText", 1, "game");
chase("monster", "player", 1.2);
loseOnTouch("player", "monster", "message");
winAtScore("scoreText", 7, "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
collect(...)
When the player touches an item: add points and move the item somewhere new.
player · item · score display · points to add · game area
TRY: Change 1 to 5 to make the item worth 5 points.
chase(...)
Make one object follow another.
chaser · target · speed
TRY: Change the last number to make the enemy slower or faster.
loseOnTouch(...)
Lose when two objects touch.
player · danger · message box
TRY: Change the danger name to make a different object deadly.
winAtScore(...)
Win when the score reaches a number.
score display · score needed · message box
TRY: Change the target number.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>2. Treasure Rush</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>2. Treasure Rush</h1>
    <p>Collect treasure, but a monster chases you.</p>

    <div class="hud">
        <span>Treasure: <span id="scoreText">0</span></span>
        <span>Goal: 7</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:40px;top:160px">🏃</div>
        <div id="treasure" class="sprite" style="left:560px;top:80px">💎</div>
        <div id="monster" class="sprite" style="left:560px;top:300px">👾</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("player", 7, "game");
collect("player", "treasure", "scoreText", 1, "game");
chase("monster", "player", 1.2);
loseOnTouch("player", "monster", "message");
winAtScore("scoreText", 7, "message");
</script>

</body>
</html>
⌨️ KEYBOARD GAME

3. Key Escape

Find the key, avoid the guard, then reach the locked door.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("player", 7, "game");
keyOpensDoor("player", "key", "door", "message");
patrol("guard", 3, 0, "game");
loseOnTouch("player", "guard", "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
keyOpensDoor(...)
Hide the door. When the player gets the key, show the door. Touch the door to win.
player · key · door · message box
TRY: Change the emoji or position of the key and door in the HTML.
patrol(...)
Move an object automatically and bounce it around the game area.
object · X speed · Y speed · game area
TRY: Use 4, 0 for sideways. Use 0, 4 for up/down.
loseOnTouch(...)
Lose when two objects touch.
player · danger · message box
TRY: Change the danger name to make a different object deadly.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>3. Key Escape</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>3. Key Escape</h1>
    <p>Find the key, avoid the guard, then reach the locked door.</p>

    <div class="hud">
        <span>Mission: get 🔑</span>
        <span>Then reach 🚪</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:35px;top:300px">🧑</div>
        <div id="key" class="sprite" style="left:300px;top:70px">🔑</div>
        <div id="door" class="sprite big" style="left:585px;top:20px">🚪</div>
        <div id="guard" class="sprite" style="left:250px;top:245px">🤖</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("player", 7, "game");
keyOpensDoor("player", "key", "door", "message");
patrol("guard", 3, 0, "game");
loseOnTouch("player", "guard", "message");
</script>

</body>
</html>
⌨️ KEYBOARD GAME

4. Dodge to the Door

Reach the exit while two hazards patrol the arena.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("player", 7, "game");
patrol("danger1", 4, 0, "game");
patrol("danger2", 0, 3, "game");
loseOnTouch("player", "danger1", "message");
loseOnTouch("player", "danger2", "message");
winOnTouch("player", "door", "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
patrol(...)
Move an object automatically and bounce it around the game area.
object · X speed · Y speed · game area
TRY: Use 4, 0 for sideways. Use 0, 4 for up/down.
loseOnTouch(...)
Lose when two objects touch.
player · danger · message box
TRY: Change the danger name to make a different object deadly.
winOnTouch(...)
Win when the player reaches an object.
player · goal · message box
TRY: Use a door, flag, rocket or treasure as the goal.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>4. Dodge to the Door</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>4. Dodge to the Door</h1>
    <p>Reach the exit while two hazards patrol the arena.</p>

    <div class="hud">
        <span>Mission: survive</span>
        <span>Goal: 🚪</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:35px;top:300px">🏃</div>
        <div id="danger1" class="sprite" style="left:200px;top:90px">💥</div>
        <div id="danger2" class="sprite" style="left:440px;top:250px">☄️</div>
        <div id="door" class="sprite big" style="left:580px;top:25px">🚪</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("player", 7, "game");
patrol("danger1", 4, 0, "game");
patrol("danger2", 0, 3, "game");
loseOnTouch("player", "danger1", "message");
loseOnTouch("player", "danger2", "message");
winOnTouch("player", "door", "message");
</script>

</body>
</html>
⌨️ KEYBOARD GAME

5. Timed Gem Rush

Collect 8 gems before the countdown reaches zero.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("player", 8, "game");
collect("player", "gem", "scoreText", 1, "game");
winAtScore("scoreText", 8, "message");
countdown(20, "timeText", "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
collect(...)
When the player touches an item: add points and move the item somewhere new.
player · item · score display · points to add · game area
TRY: Change 1 to 5 to make the item worth 5 points.
winAtScore(...)
Win when the score reaches a number.
score display · score needed · message box
TRY: Change the target number.
countdown(...)
Count down once per second. When it reaches 0, time is up.
seconds · time display · message box
TRY: Change 20 to 10 for a harder game.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>5. Timed Gem Rush</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>5. Timed Gem Rush</h1>
    <p>Collect 8 gems before the countdown reaches zero.</p>

    <div class="hud">
        <span>Gems: <span id="scoreText">0</span></span>
        <span>Time: <span id="timeText">20</span></span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:40px;top:160px">🛸</div>
        <div id="gem" class="sprite" style="left:550px;top:100px">💠</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("player", 8, "game");
collect("player", "gem", "scoreText", 1, "game");
winAtScore("scoreText", 8, "message");
countdown(20, "timeText", "message");
</script>

</body>
</html>
⌨️ KEYBOARD GAME

6. Two-Player Tag

Blue uses WASD. Red uses arrows. Blue wins by catching Red.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("blue", 7, "game", "w", "s", "a", "d");
moveWithKeys("red", 7, "game");
winOnTouch("blue", "red", "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
winOnTouch(...)
Win when the player reaches an object.
player · goal · message box
TRY: Use a door, flag, rocket or treasure as the goal.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>6. Two-Player Tag</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>6. Two-Player Tag</h1>
    <p>Blue uses WASD. Red uses arrows. Blue wins by catching Red.</p>

    <div class="hud">
        <span>Blue: W A S D</span>
        <span>Red: arrows</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="blue" class="sprite" style="left:60px;top:170px">🔵</div>
        <div id="red" class="sprite" style="left:560px;top:170px">🔴</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("blue", 7, "game", "w", "s", "a", "d");
moveWithKeys("red", 7, "game");
winOnTouch("blue", "red", "message");
</script>

</body>
</html>
⌨️ KEYBOARD GAME

7. Monster Survival

Stay alive for 15 seconds while two monsters chase you.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithKeys("player", 7, "game");
chase("monster1", "player", 1.0);
chase("monster2", "player", 0.8);
loseOnTouch("player", "monster1", "message");
loseOnTouch("player", "monster2", "message");
survive(15, "timeText", "message", "player");

3 · WHAT DO THE BLOCKS MEAN?

moveWithKeys(...)
Move an object with the keyboard.
object · speed · game area · optional keys
TRY: Change the speed number. Bigger = faster.
chase(...)
Make one object follow another.
chaser · target · speed
TRY: Change the last number to make the enemy slower or faster.
loseOnTouch(...)
Lose when two objects touch.
player · danger · message box
TRY: Change the danger name to make a different object deadly.
survive(...)
Win if the player stays alive until the timer reaches 0.
seconds · time display · message box · player
TRY: Change the number of seconds.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>7. Monster Survival</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <h1>7. Monster Survival</h1>
    <p>Stay alive for 15 seconds while two monsters chase you.</p>

    <div class="hud">
        <span>Survive!</span>
        <span>Time: <span id="timeText">15</span></span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:320px;top:170px">😎</div>
        <div id="monster1" class="sprite" style="left:30px;top:30px">👹</div>
        <div id="monster2" class="sprite" style="left:590px;top:300px">👾</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithKeys("player", 7, "game");
chase("monster1", "player", 1.0);
chase("monster2", "player", 0.8);
loseOnTouch("player", "monster1", "message");
loseOnTouch("player", "monster2", "message");
survive(15, "timeText", "message", "player");
</script>

</body>
</html>
🎮 GAMEPAD GAME

8. Gamepad Treasure Hunt

Use the LEFT STICK to collect 10 gems.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithGamepad("player", 8, "game");
collect("player", "gem", "scoreText", 1, "game");
winAtScore("scoreText", 10, "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithGamepad(...)
Move an object with the LEFT joystick.
object · speed · game area
TRY: Change the speed number.
collect(...)
When the player touches an item: add points and move the item somewhere new.
player · item · score display · points to add · game area
TRY: Change 1 to 5 to make the item worth 5 points.
winAtScore(...)
Win when the score reaches a number.
score display · score needed · message box
TRY: Change the target number.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>8. Gamepad Treasure Hunt</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <div style="background:#fff7ed;border-left:5px solid #f59e0b;padding:10px 12px;border-radius:9px;margin-bottom:12px"><b>🎮 Gamepad:</b> Plug it in, press a button once, then play.</div>
    <h1>8. Gamepad Treasure Hunt</h1>
    <p>Use the LEFT STICK to collect 10 gems.</p>

    <div class="hud">
        <span>Gems: <span id="scoreText">0</span></span>
        <span>LEFT STICK</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:40px;top:160px">🎮</div>
        <div id="gem" class="sprite" style="left:550px;top:90px">💎</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>
<script src="rbs-gamepad-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithGamepad("player", 8, "game");
collect("player", "gem", "scoreText", 1, "game");
winAtScore("scoreText", 10, "message");
</script>

</body>
</html>
🎮 GAMEPAD GAME

9. Gamepad Racer

LEFT STICK steers. RT accelerates. LT reverses/brakes. Reach the flag.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

driveWithGamepad("car", 5, 7, "game");
patrol("block2", 2.5, 0, "game");
loseOnTouch("car", "block1", "message");
loseOnTouch("car", "block2", "message");
winOnTouch("car", "flag", "message");

3 · WHAT DO THE BLOCKS MEAN?

driveWithGamepad(...)
Drive with LEFT STICK steering, RT gas and LT brake/reverse.
vehicle · steering speed · drive speed · game area
TRY: Change steering and drive speeds separately.
patrol(...)
Move an object automatically and bounce it around the game area.
object · X speed · Y speed · game area
TRY: Use 4, 0 for sideways. Use 0, 4 for up/down.
loseOnTouch(...)
Lose when two objects touch.
player · danger · message box
TRY: Change the danger name to make a different object deadly.
winOnTouch(...)
Win when the player reaches an object.
player · goal · message box
TRY: Use a door, flag, rocket or treasure as the goal.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>9. Gamepad Racer</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}

.game{background:linear-gradient(90deg,#4b5563 0 15%,#d1d5db 15% 17%,#374151 17% 83%,#d1d5db 83% 85%,#4b5563 85%);}
    </style>
</head>
<body>

<div class="wrap">
    <div style="background:#fff7ed;border-left:5px solid #f59e0b;padding:10px 12px;border-radius:9px;margin-bottom:12px"><b>🎮 Gamepad:</b> Plug it in, press a button once, then play.</div>
    <h1>9. Gamepad Racer</h1>
    <p>LEFT STICK steers. RT accelerates. LT reverses/brakes. Reach the flag.</p>

    <div class="hud">
        <span>Steer: LEFT STICK</span>
        <span>Gas: RT · Brake: LT</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="car" class="sprite" style="left:310px;top:310px">🏎️</div>
        <div id="block1" class="sprite" style="left:130px;top:150px">🚧</div>
        <div id="block2" class="sprite" style="left:500px;top:210px">🚙</div>
        <div id="flag" class="sprite big" style="left:315px;top:15px">🏁</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>
<script src="rbs-gamepad-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
driveWithGamepad("car", 5, 7, "game");
patrol("block2", 2.5, 0, "game");
loseOnTouch("car", "block1", "message");
loseOnTouch("car", "block2", "message");
winOnTouch("car", "flag", "message");
</script>

</body>
</html>
🎮 GAMEPAD GAME

10. Gamepad Key Mission

LEFT STICK moves. Get the key, avoid the moving drone and escape.

PLAY FULL GAME ↗

1 · PLAY IT

Click inside the game, then use the controls.

2 · READ THE GAME BLOCKS

These few lines are the main rules of this game.

moveWithGamepad("player", 8, "game");
keyOpensDoor("player", "key", "door", "message");
patrol("drone", 3, 0, "game");
rumbleOnTouch("player", "drone", 1, 0.5, 250);
loseOnTouch("player", "drone", "message");

3 · WHAT DO THE BLOCKS MEAN?

moveWithGamepad(...)
Move an object with the LEFT joystick.
object · speed · game area
TRY: Change the speed number.
keyOpensDoor(...)
Hide the door. When the player gets the key, show the door. Touch the door to win.
player · key · door · message box
TRY: Change the emoji or position of the key and door in the HTML.
patrol(...)
Move an object automatically and bounce it around the game area.
object · X speed · Y speed · game area
TRY: Use 4, 0 for sideways. Use 0, 4 for up/down.
rumbleOnTouch(...)
Vibrate the gamepad when two objects touch.
object 1 · object 2 · strong motor · weak motor · milliseconds
TRY: Try 0.2, 0.2, 80 for a tiny buzz; 1, 0.5, 300 for a crash.
loseOnTouch(...)
Lose when two objects touch.
player · danger · message box
TRY: Change the danger name to make a different object deadly.
4 · MAKE YOUR OWN COPY
Easiest method: press COPY WHOLE GAME, make a new file named index.html, paste, and save. Keep the library file(s) in the same folder. 
<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>10. Gamepad Key Mission</title>

    <style>

body {
    margin: 0;
    font-family: Arial, sans-serif;
    background: #eef2f7;
    color: #172033;
}
.wrap {
    width: 700px;
    max-width: calc(100% - 24px);
    margin: 24px auto;
}
h1 {
    margin: 0 0 8px;
}
.hud {
    background: white;
    padding: 12px 16px;
    border-radius: 12px 12px 0 0;
    font-size: 18px;
    font-weight: bold;
    display: flex;
    justify-content: space-between;
}
.message {
    background: #172033;
    color: white;
    padding: 10px 16px;
    font-weight: bold;
    text-align: center;
}
.game {
    position: relative;
    width: 100%;
    height: 390px;
    overflow: hidden;
    border: 4px solid #172033;
    box-sizing: border-box;
    background: linear-gradient(#dff4ff, #c9f1d2);
}
.sprite {
    position: absolute;
    width: 52px;
    height: 52px;
    font-size: 42px;
    line-height: 52px;
    text-align: center;
    user-select: none;
}
.big {
    width: 68px;
    height: 68px;
    font-size: 54px;
    line-height: 68px;
}
button {
    margin-top: 12px;
    padding: 10px 15px;
    border: 0;
    border-radius: 9px;
    font-weight: bold;
    cursor: pointer;
}


    </style>
</head>
<body>

<div class="wrap">
    <div style="background:#fff7ed;border-left:5px solid #f59e0b;padding:10px 12px;border-radius:9px;margin-bottom:12px"><b>🎮 Gamepad:</b> Plug it in, press a button once, then play.</div>
    <h1>10. Gamepad Key Mission</h1>
    <p>LEFT STICK moves. Get the key, avoid the moving drone and escape.</p>

    <div class="hud">
        <span>LEFT STICK</span>
        <span>Mission: 🔑 → 🚪</span>
    </div>

    <div id="message" class="message">GO!</div>

    <div id="game" class="game">
        <div id="player" class="sprite" style="left:35px;top:300px">👨‍🚀</div>
        <div id="key" class="sprite" style="left:300px;top:80px">🔑</div>
        <div id="door" class="sprite big" style="left:580px;top:25px">🚪</div>
        <div id="drone" class="sprite" style="left:220px;top:230px">🛸</div>
    </div>

    <button onclick="restartGame()">RESTART</button>
</div>

<!-- LIBRARIES FIRST -->
<script src="rbs-game-library.js"></script>
<script src="rbs-gamepad-library.js"></script>

<!-- YOUR GAME CODE -->
<script>
moveWithGamepad("player", 8, "game");
keyOpensDoor("player", "key", "door", "message");
patrol("drone", 3, 0, "game");
rumbleOnTouch("player", "drone", 1, 0.5, 250);
loseOnTouch("player", "drone", "message");
</script>

</body>
</html>