step4.html

<html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,user-scalable=no">
        <title>Multiblaster</title>
        <style>
            html, body {
                margin: 0;
                height: 100%;
                background: #999;
            }
            #canvas {
                background: #000;
                object-fit: contain;
                max-width: 100%;
                max-height: 100%;
            }
        </style>
        <script src="https://cdn.jsdelivr.net/npm/@multisynq/client@1.0.2/bundled/multisynq-client.min.js"></script>
    </head>
    <body>
        <canvas id="canvas" width="1000" height="1000"></canvas>
        <script>

class Game extends Multisynq.Model {
    init() {
        this.asteroids = new Set();
        for (let i = 0; i < 3; i++) Asteroid.create({});

        this.ships = new Map();
        this.subscribe(this.sessionId, "view-join", this.viewJoined);
        this.subscribe(this.sessionId, "view-exit", this.viewExited);

        this.blasts = new Set();

        this.mainLoop();
    }

    viewJoined(viewId) {
        const ship = Ship.create({ viewId });
        this.ships.set(viewId, ship);
    }

    viewExited(viewId) {
        const ship = this.ships.get(viewId);
        this.ships.delete(viewId);
        ship.destroy();
    }

    mainLoop() {
        for (const ship of this.ships.values()) ship.move();
        for (const asteroid of this.asteroids) asteroid.move();
        for (const blast of this.blasts) blast.move();
        this.checkCollisions();
        this.future(50).mainLoop(); // move & check every 50 ms
    }

    checkCollisions() {
        for (const asteroid of this.asteroids) {
            const minx = asteroid.x - asteroid.size;
            const maxx = asteroid.x + asteroid.size;
            const miny = asteroid.y - asteroid.size;
            const maxy = asteroid.y + asteroid.size;
            for (const blast of this.blasts) {
                if (blast.x > minx && blast.x < maxx && blast.y > miny && blast.y < maxy) {
                    asteroid.hitBy(blast);
                    break;
                }
            }
        }
    }
}
Game.register("Game");

class Asteroid extends Multisynq.Model {
    get game() { return this.wellKnownModel("modelRoot"); }

    init({ size, x, y, a, dx, dy, da }) {
        super.init();
        this.game.asteroids.add(this);
        if (size) {
            // init second asteroid after spliting
            this.size = size;
            this.x = x;
            this.y = y;
            this.a = a;
            this.dx = dx;
            this.dy = dy;
            this.da = da;
        } else {
            // init new large asteroid
            this.size = 40;
            this.x = Math.random() * 400 - 200;
            this.y = Math.random() * 400 - 200;
            this.a = Math.random() * Math.PI * 2;
            const speed = Math.random() * 4 + 1;
            this.dx = Math.cos(this.a) * speed;
            this.dy = Math.sin(this.a) * speed;
            this.da = (0.02 + Math.random() * 0.03) * (Math.random() < 0.5 ? 1 : -1);
        }
    }

    move() {
        this.x = (this.x + this.dx + 1000) % 1000;
        this.y = (this.y + this.dy + 1000) % 1000;
        this.a = (this.a + this.da + Math.PI) % Math.PI;
    }

    hitBy(blast) {
        if (this.size > 20) {
            // split into two smaller faster asteroids
            this.size *= 0.7;
            this.da *= 1.5;
            this.dx = -blast.dy * 10 / this.size;
            this.dy = blast.dx * 10 / this.size;
            Asteroid.create({ size: this.size, x: this.x, y: this.y, a: this.a, dx: -this.dx, dy: -this.dy, da: this.da });
        } else {
            this.destroy();
        }
        blast.destroy();
    }

    destroy() {
        this.game.asteroids.delete(this);
        super.destroy();
        // spawn more asteroids if needed
        if (this.game.asteroids.size < 3) Asteroid.create({});
    }
}
Asteroid.register("Asteroid");

class Ship extends Multisynq.Model {
    init({ viewId }) {
        super.init();
        this.viewId = viewId;
        this.x = 480 + 40 * Math.random();
        this.y = 480 + 40 * Math.random();
        this.a = -Math.PI / 2;
        this.dx = 0;
        this.dy = 0;
        this.left = false;
        this.right = false;
        this.forward = false;
        this.subscribe(viewId, "left-thruster", this.leftThruster);
        this.subscribe(viewId, "right-thruster", this.rightThruster);
        this.subscribe(viewId, "forward-thruster", this.forwardThruster);
        this.subscribe(viewId, "fire-blaster", this.fireBlaster);
    }

    leftThruster(active) {
        this.left = active;
    }

    rightThruster(active) {
        this.right = active;
    }

    forwardThruster(active) {
        this.forward = active;
    }

    fireBlaster() {
        // create blast moving at speed 20 in direction of ship
        const dx = Math.cos(this.a) * 20;
        const dy = Math.sin(this.a) * 20;
        const x = this.x + dx;
        const y = this.y + dy;
        Blast.create({ x, y, dx, dy });
    }

    move() {
        // process thruster controls
        if (this.forward) this.accelerate(0.5);
        if (this.left) this.a -= 0.2;
        if (this.right) this.a += 0.2;
        // float through space
        this.x = (this.x + this.dx + 1000) % 1000;
        this.y = (this.y + this.dy + 1000) % 1000;
    }

    accelerate(force) {
        this.dx += Math.cos(this.a) * force;
        this.dy += Math.sin(this.a) * force;
        if (this.dx > 10) this.dx = 10;
        if (this.dx < -10) this.dx = -10;
        if (this.dy > 10) this.dy = 10;
        if (this.dy < -10) this.dy = -10;
    }
}
Ship.register("Ship");

class Blast extends Multisynq.Model {
    get game() { return this.wellKnownModel("modelRoot"); }

    init({x, y, dx, dy}) {
        super.init();
        this.x = x;
        this.y = y;
        this.dx = dx;
        this.dy = dy;
        this.t = 0;
        this.game.blasts.add(this);
    }

    move() {
        // move for 1.5 second before disappearing
        this.t++;
        if (this.t > 30) {
            this.destroy();
            return;
        }
        this.x = (this.x + this.dx + 1000) % 1000;
        this.y = (this.y + this.dy + 1000) % 1000;
    }

    destroy() {
        this.game.blasts.delete(this);
        super.destroy();
    }
}
Blast.register("Blast");


////////////////////////// VIEW //////////////////////////

class Display extends Multisynq.View {
    constructor(model) {
        super(model);
        this.model = model;
        this.context = canvas.getContext("2d");

        document.onkeydown = (e) => {
            if (e.repeat) return;
            switch (e.key) {
                case "ArrowLeft":  this.publish(this.viewId, "left-thruster", true); break;
                case "ArrowRight": this.publish(this.viewId, "right-thruster", true); break;
                case "ArrowUp":    this.publish(this.viewId, "forward-thruster", true); break;
                case " ":          this.publish(this.viewId, "fire-blaster"); break;
            }
        };
        document.onkeyup = (e) => {
            if (e.repeat) return;
            switch (e.key) {
                case "ArrowLeft":  this.publish(this.viewId, "left-thruster", false); break;
                case "ArrowRight": this.publish(this.viewId, "right-thruster", false); break;
                case "ArrowUp":    this.publish(this.viewId, "forward-thruster", false); break;
            }
        };
    }

    // update is called once per render frame
    update() {
        this.context.clearRect(0, 0, 1000, 1000);
        this.context.lineWidth = 3;
        this.context.strokeStyle = "white";
        for (const asteroid of this.model.asteroids) {
            const { x, y, a, size } = asteroid;
            this.context.save();
            this.context.translate(x, y);
            this.context.rotate(a);
            this.context.beginPath();
            this.context.moveTo(+size,  0);
            this.context.lineTo( 0, +size);
            this.context.lineTo(-size,  0);
            this.context.lineTo( 0, -size);
            this.context.closePath();
            this.context.stroke();
            this.context.restore();
        }
        for (const ship of this.model.ships.values()) {
            const { x, y, a } = ship;
            this.context.save();
            this.context.translate(x, y);
            this.context.rotate(a);
            this.context.beginPath();
            this.context.moveTo(+20,   0);
            this.context.lineTo(-20, +10);
            this.context.lineTo(-20, -10);
            this.context.closePath();
            this.context.stroke();
            this.context.restore();
        }
        for (const blast of this.model.blasts) {
            const { x, y } = blast;
            this.context.save();
            this.context.translate(x, y);
            this.context.beginPath();
            this.context.arc(0, 0, 2, 0, 2 * Math.PI);
            this.context.closePath();
            this.context.stroke();
            this.context.restore();
            this.context.beginPath();
        }
    }
}

Multisynq.App.makeWidgetDock(); // show QR code

Multisynq.Session.join({
    apiKey: '234567_Paste_Your_Own_API_Key_Here_7654321', // get your own from multisynq.io/coder
    appId: 'io.multisynq.multiblaster-tutorial',
    model: Game,
    view: Display,
});
        </script>
    </body>
</html>