index.html

<!DOCTYPE html>
<meta charset="utf8" />
<meta name="viewport" content="width=912, user-scalable=no" />
<title>Oh No!</title>
<link rel="stylesheet" href="play/game.css" />
<style>
    #debug {
        display: flex;
        flex-flow: column nowrap;
        align-items: flex-end;
        position: absolute;
        top: 0;
        right: 0;
        color: #fff;
        font-family: monospace;
    }
    #debug button {
        cursor: pointer;
        padding: 0;
        background: none;
        border: none;
        font: inherit;
        color: inherit;
    }
    #debug div {
        width: max-content;
        background: #000;
        color: #fff;
    }
</style>
<body>
    <img src="../textures/krates.gif" id="krates" />
    <img src="../textures/grass.gif" id="grass" />
    <img src="../textures/shadow.gif" id="shadow" />
    <img src="../textures/palm.gif" id="palm" />
    <img src="../textures/water.gif" id="water" />
    <img src="../textures/lava.gif" id="lava" />
    <img src="../textures/404.gif" id="404" />
    <img src="../textures/stone.gif" id="stone" />
    <img src="../textures/fence.gif" id="fence" />
    <img src="../textures/bush.gif" id="bush" />
    <img src="../textures/sand.gif" id="sand" />
    <img src="../textures/plain.gif" id="plain" />
    <img src="../textures/shell.gif" id="shell" />

    <div
        style="
            position: relative;
            width: 912px;
            height: 788px;
            background: #222;
            border-radius: 5px;
            transform: rotateX(5deg);
        "
    >
        <div
            style="
                position: absolute;
                top: 600px;
                left: 25px;
                width: 150px;
                height: 30px;
                background: #000;
            "
        ></div>
        <div
            style="
                position: absolute;
                top: 600px;
                left: 25px;
                width: 150px;
                height: 30px;
                background: #000;
                transform: rotate(90deg);
            "
        ></div>
        <main>
            <canvas width="512" height="788"></canvas>
            <div id="ui"></div>
            <div id="overlay"></div>
            <div id="hinge"></div>
        </main>
        <div
            style="
                position: absolute;
                top: 525px;
                right: 75px;
                width: 50px;
                height: 50px;
                border-radius: 40px;
                background: #000;
                color: #fff;
                font: 24px Arial;
            "
        >
            <span style="position: relative; top: 11px; left: 17px;">Y</span>
        </div>
        <div
            style="
                position: absolute;
                top: 575px;
                right: 125px;
                width: 50px;
                height: 50px;
                border-radius: 40px;
                background: #000;
                color: #fff;
                font: 24px Arial;
            "
        >
            <span style="position: relative; top: 11px; left: 17px;">X</span>
        </div>
        <div
            style="
                position: absolute;
                top: 625px;
                right: 75px;
                width: 50px;
                height: 50px;
                border-radius: 40px;
                background: #000;
                color: #fff;
                font: 24px Arial;
            "
        >
            <span style="position: relative; top: 11px; left: 17px;">B</span>
        </div>
        <div
            style="
                position: absolute;
                top: 575px;
                right: 25px;
                width: 50px;
                height: 50px;
                border-radius: 40px;
                background: #000;
                color: #fff;
                font: 24px Arial;
            "
        >
            <span style="position: relative; top: 11px; left: 17px;">A</span>
        </div>
    </div>
    <div id="debug">
        <div>update: <span id="update"></span></div>
        <div>delta: <span id="delta"></span></div>
        <div>fps: <span id="fps"></span></div>
        <div><button onclick="toggle(this)">pause</button></div>
    </div>
    <script type="module">
        import {loop_start, loop_stop} from "./src/core.js";
        import "./src/index.js";

        let running = true;
        window.toggle = function toggle(button) {
            if (running) {
                running = false;
                loop_stop();
                button.textContent = "resume";
            } else {
                running = true;
                loop_start(game);
                button.textContent = "pause";
            }
        };
    </script>
</body>