scenes.js

// @ts-check

// Extend our game with multiple scenes

// Start game
kaplay();

// Load assets
loadSprite("bean", "/sprites/bean.png");
loadSprite("coin", "/sprites/coin.png");
loadSprite("spike", "/sprites/spike.png");
loadSprite("grass", "/sprites/grass.png");
loadSprite("ghosty", "/sprites/ghosty.png");
loadSprite("portal", "/sprites/portal.png");
loadSound("score", "/examples/sounds/score.mp3");
loadSound("portal", "/examples/sounds/portal.mp3");

setGravity(2400);

const SPEED = 480;

// Design 2 levels
const LEVELS = [
    [
        "@  ^ $$ >",
        "=========",
    ],
    [
        "@   $   >",
        "=   =   =",
    ],
];

// Define a scene called "game". The callback will be run when we go() to the scene
// Scenes can accept argument from go()
scene("game", ({ levelIdx, score }) => {
    // Use the level passed, or first level
    const level = addLevel(LEVELS[levelIdx || 0], {
        tileWidth: 64,
        tileHeight: 64,
        pos: vec2(100, 200),
        tiles: {
            "@": () => [
                sprite("bean"),
                area(),
                body(),
                anchor("bot"),
                "player",
            ],
            "=": () => [
                sprite("grass"),
                area(),
                body({ isStatic: true }),
                anchor("bot"),
            ],
            "$": () => [
                sprite("coin"),
                area(),
                anchor("bot"),
                "coin",
            ],
            "^": () => [
                sprite("spike"),
                area(),
                anchor("bot"),
                "danger",
            ],
            ">": () => [
                sprite("portal"),
                area(),
                anchor("bot"),
                "portal",
            ],
        },
    });

    // Get the player object from tag
    const player = level.get("player")[0];

    // Movements
    onKeyPress("space", () => {
        if (player.isGrounded()) {
            player.jump();
        }
    });

    onKeyDown("left", () => {
        player.move(-SPEED, 0);
    });

    onKeyDown("right", () => {
        player.move(SPEED, 0);
    });

    player.onCollide("danger", () => {
        player.pos = level.tile2Pos(0, 0);
        // Go to "lose" scene when we hit a "danger"
        go("lose");
    });

    player.onCollide("coin", (coin) => {
        destroy(coin);
        play("score");
        score++;
        scoreLabel.text = score;
    });

    // Fall death
    player.onUpdate(() => {
        if (player.pos.y >= 480) {
            go("lose");
        }
    });

    // Enter the next level on portal
    player.onCollide("portal", () => {
        play("portal");
        if (levelIdx < LEVELS.length - 1) {
            // If there's a next level, go() to the same scene but load the next level
            go("game", {
                levelIdx: levelIdx + 1,
                score: score,
            });
        }
        else {
            // Otherwise we have reached the end of game, go to "win" scene!
            go("win", { score: score });
        }
    });

    // Score counter text
    const scoreLabel = add([
        text(score),
        pos(12),
    ]);
});

scene("lose", () => {
    add([
        text("You Lose"),
        pos(12),
    ]);

    // Press any key to go back
    onKeyPress(start);
});

scene("win", ({ score }) => {
    add([
        text(`You grabbed ${score} coins!!!`, {
            width: width(),
        }),
        pos(12),
    ]);

    onKeyPress(start);
});

function start() {
    // Start with the "game" scene, with initial parameters
    go("game", {
        levelIdx: 0,
        score: 0,
    });
}

start();