develop

分支 (2)

管理

管理

develop

master

divtetris
/
index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>div tetris</title>
    <style>
        .box {
            display: none;
            width: 600px;
            height: 750px;
            line-height: 700px;
            text-align: center;
            color: azure;
            font-size: 40px;
            backdrop-filter: blur(5px);
            background: rgba(255, 255, 255, .9);
            background: rgba(0, 0, 0, .1);
            z-index: 1;
        }
    </style>
</head>

<body>
    <script type="module">
        // chrome --allow-file-access-from-files
        // firefox => about:config => security.fileuri.strict_origin_policy=false
        import { Display, RGB } from "./draw.js";
        import { Background } from "./base.js";

        const displayOptions1 = {
            styleElement: document.getElementsByTagName('style')[0],
            bodyElement: document.getElementsByTagName('body')[0],
            divElements: [
                { id: `main1`, top: 100, left: 100 },
                { id: `ready1`, top: 150, left: 450 },
                { id: `score1`, top: 230, left: 440, color: new RGB(140, 162, 162), font_size: 15 },
                { id: `hold1`, classname: `box` },
                { id: `leftTop1`, top: 97, left: 96, bg: 50, dt: [`left`, `top`] },
                { id: `rightTop1`, top: 97, left: 348, bg: 50, dt: [`right`, `top`] },
                { id: `leftBottom1`, top: 648, left: 96, bg: 50, dt: [`left`, `bottom`] },
                { id: `rightBottom1`, top: 648, left: 348, bg: 50, dt: [`right`, `bottom`] },
                { id: `leftTopHid1`, top: 97, left: 96, bg: 10 },
                { id: `rightTopHid1`, top: 97, left: 394, bg: 10 },
                { id: `leftBottomHid1`, top: 694, left: 96, bg: 10 },
                { id: `rightBottomHid1`, top: 694, left: 394, bg: 10 }
            ],
            bodyBgColor: new RGB(40, 40, 40),
            bgBorderColor: new RGB(88, 88, 88),
            tetrominoColors: [new RGB(0, 204, 0, 4), new RGB(204, 0, 0, 4), new RGB(0, 0, 204, 4), new RGB(204, 0, 204, 4)]

        }

        const cycleTimeout = 53, skipCycle = 10;

        /**
         * @param {KeyboardEvent} event
         * @param {boolean} isKeyUp
         * @param {Array<number>} arrow
         */
        function keyUpDownR(event, isKeyUp, arrow) {
            // console.log(`PRESS: <${event.code}> ${isKeyUp ? 'up' : 'down'}`);
            switch (event.code) {
                case "ArrowLeft": arrow[0] = isKeyUp ? 0 : -1; break;
                case "ArrowRight": arrow[0] = isKeyUp ? 0 : 1; break;
                case "ArrowUp": arrow[1] = isKeyUp ? 0 : 1; break;
                case "ArrowDown": arrow[1] = isKeyUp ? 0 : -1; break;
                case "ShiftRight": /* case "ShiftLeft": */ arrow[2] = isKeyUp ? 0 : 1; break;
                case "Space": case "KeyP": arrow[3] = isKeyUp ? 0 : 1; break;
                default: break;
            }

        }

        /**
         * @param {number} timestamp
         */
        function styleStep(timestamp) {
            // frameTime = timestamp - lastTimestamp;
            // console.log(`frameTime: ${frameTime}`);
            // lastTimestamp = timestamp;
            for (; length_mark < history.length; length_mark++) {
                let [oldBg, newBg, exBg, ready, status] = history[length_mark];
                show1.modifyStyle(oldBg, newBg, exBg, ready, status);
            }

            window.requestAnimationFrame(styleStep);

        }

        /** key_board_codes_r = [-x+, -y+, exchangeTetromino, pause/game_over]  按键按下状态。 */
        const key_board_codes_r = [0, 0, 0, 0, 0];
        window.addEventListener("keyup", (event) => keyUpDownR(event, true, key_board_codes_r), true);
        document.addEventListener("keydown", (event) => keyUpDownR(event, false, key_board_codes_r), true);

        let length_mark = 0, frameTime = 0, lastTimestamp = 0;

        /** @type {Array<Array<Array<number>>>} */
        const history = new Array();

        const show1 = new Display(displayOptions1);
        const bg1 = new Background(displayOptions1.tetrominoColors.length, skipCycle);

        setInterval(() => { history.push(bg1.run1Step(key_board_codes_r)); }, cycleTimeout);
        window.requestAnimationFrame(styleStep);

    </script>

</body>

</html>