index.html

<!doctype html>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<meta name="viewport" content="width=device-width, initial-scale=1">

<style>
    html,
    body {
        padding: 0;
        padding-bottom: 32px;
        margin: 0;
        width: 100%;
        height: 100%;
        box-sizing: border-box;
    }

    body {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background: rgb(234, 231, 220);
        background: linear-gradient(222deg, rgba(234, 231, 220, 1) 0%, rgba(205, 196, 163, 1) 100%);
    }

    #board {
        display: grid;
        grid-template-rows: repeat(18, 30px);
        grid-template-columns: repeat(10, 30px);
        grid-auto-rows: 30px;
        grid-gap: 4px;
        width: 340px;
        height: 612px;
        border: solid 8px #E98074;
        padding-left: 4px;
    }

    #board>*.filled {
        background-color: #E98074;
    }

    #score-container {
        color: #E98074;
        font-size: 48px;
        font-family: monospace;
        font-weight: bold;
        margin-bottom: 10px;
    }
</style>

<body>
    <div id="score-container">Score: <span id="score"></span></div>
    <div id="board"></div>
    <script lang="javascript">
        const board = document.getElementById("board");
        const score = document.getElementById("score");
        for (let i = 0; i < 200; i++) {
            const elem = document.createElement("div");
            if (i < 20) {
                elem.style.display = "none";
            }
            board.appendChild(elem);
        }
        WebAssembly
            .instantiateStreaming(fetch('tetris.wasm'), { js: { debug: (x) => console.log("debug:", x) } })
            .then(wasm => {
                const tetris = wasm.instance.exports;
                const memory = new Int32Array(tetris.memory.buffer);
                tetris.init();
                tetris.resetFigure();
                let tickCount = 0;
                let tickDivider = 6;
                const render = () => {
                    let i = 9;
                    for (const node of board.childNodes) {
                        node.setAttribute("class", memory[i++] ? "filled" : "")
                    }
                    for (let i = 0; i < 9; i++) {
                        const y = Math.floor(i / 3);
                        const x = i % 3;
                        if (memory[i]) {
                            board.childNodes[
                                (tetris.cursorRow.value + y) * 10 +
                                (tetris.cursorColumn.value + x)
                            ].setAttribute("class", "filled");
                        }
                    }
                    score.innerText = tetris.score.value;
                }
                setInterval(() => {
                    if (!tetris.isGameOver.value) {
                        render();
                    }
                    if (tickCount++ % tickDivider === 0) {
                        tetris.rng.value = Math.floor(Math.random() * 7);
                        tetris.tick();
                    }
                }, 50);
                document.addEventListener("keydown", (e) => {
                    switch (e.key) {
                        case "Enter":
                        case " ": {
                            tetris.rotateFigure();
                            break;
                        }
                        case "d":
                        case "ArrowRight": {
                            tetris.moveRight();
                            break;
                        }
                        case "a":
                        case "ArrowLeft": {
                            tetris.moveLeft();
                            break;
                        }
                        case "s":
                        case "ArrowDown": {
                            tickDivider = 2;
                            break;
                        }
                    }
                });
                document.addEventListener("keyup", (e) => {
                    if (e.key === "ArrowDown" || e.key === "s") {
                        tickDivider = 6;
                    }
                })
            });
    </script>
</body>