example.html

<canvas style="outline: black 3px solid;" id="canvas" width="500" height="500"></canvas>

<script src="script.js"></script>
<script>
    class Obstacle extends Entity {
    }

    const canvas = document.getElementById("canvas");
    const scene = new Scene(canvas);
    const player = new Entity(
        new EntityData()
            .setX(0)
            .setY(0)
            .setModel(new SquareModel(20, 20))
    );
    const text = new Entity(
        new EntityData()
            .setX(canvas.width - 50)
            .setY(30)
            .setModel(
                new TextModel(10, 10)
                    .setText("")
                    .setFont("Impact")
                    .setColor("rgba(0, 255, 0, 0.5)")
                    .setPixels(16)
                    .setMaxWidth(100)
            )
    );
    scene.addEntity(player, 1);
    scene.addEntity(new Obstacle(
        new EntityData()
            .setX(50)
            .setY(50)
            .setModel(new SquareModel(20, 20))
    ));
    scene.addEntity(text);
    setInterval(() => text.model.setText(scene.fps + " FPS"), 100);
    let heldKeys = {};
    addEventListener("keydown", key => {
        heldKeys[key.key] = true;
        if(key.key === " " && player.clientX) {
            player.lookAt(new Vector2(player.clientX, player.clientY));
            player.addMotion(player.getDirection().multiply(150, 150));
            player.angle = 0;
        }
    });
    addEventListener("keyup", key => {
        delete heldKeys[key.key];
    });
    addEventListener("mousemove", ev => {
        const {clientX, clientY} = ev;
        player.clientX = clientX;
        player.clientY = clientY;
    });
    addEventListener("blur", () => heldKeys = {});
    player.on("onMove", ev => {
        ev.entity.x = ev.to.x;
        if (ev.entity.getCollidingEntities(scene, [Obstacle]).length > 0) ev.to.x = ev.from.x;
        ev.entity.y = ev.to.y;
        if (ev.entity.getCollidingEntities(scene, [Obstacle]).length > 0) ev.to.y = ev.from.y;
    })
    setInterval(() => {
        let dx = 0;
        let dy = 0;
        if (heldKeys["w"]) dy--;
        if (heldKeys["a"]) dx--;
        if (heldKeys["s"]) dy++;
        if (heldKeys["d"]) dx++;
        player.move(dx, dy);
        player.preventBorder(scene);
    });
</script>