Simple HTML Tetris Game - Build Your Own! - 常规

<html>
    <head>
        <title>Simple Tetris Game</title>
        <style>
            body {
                background-color: black;
            }
            .tetris-block {
                width: 100px;
                height: 100px;
                background-color: #00FFFF;
            }
            #tetris-game {
                width: 400px;
                height: 600px;
                border: 1px solid #00FFFF;
                position: relative;
            }
        </style>
    </head>
    <body>
        <div id="tetris-game"></div>
        <script>
            let tetrisGame = document.getElementById("tetris-game");
            let xpos = 0;
            let ypos = 0;
            let block = document.createElement("div");
            block.className = "tetris-block";
            tetrisGame.appendChild(block);
            block.style.top = ypos + 'px';
            block.style.left = xpos + 'px';
            document.onkeydown = function(e) {
                switch (e.keyCode) {
                    case 37:
                        // left arrow
                        xpos -= 100;
                        break;
                    case 38:
                        // up arrow
                        ypos -= 100;
                        break;
                    case 39:
                        // right arrow
                        xpos += 100;
                        break;
                    case 40:
                        // down arrow
                        ypos += 100;
                        break;
                    default:
                        break;
                }
                block.style.top = ypos + 'px';
                block.style.left = xpos + 'px';
            }
        </script>
    </body>
</html>