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

<!DOCTYPE html>
<html>
<head>
    <title>Simple Tetris Game</title>
    <style>
        #container {
            width: 500px;
            height: 500px;
            border: 1px solid black;
            position: relative;
        }
        #tetromino {
            width: 20px;
            height: 20px;
            background-color: #ccc;
            position: absolute;
        }
    </style>
</head>
<body>
    <div id='container'></div>
    <script>
        // Set up the game board
        // Create the tetromino
        var tetromino = document.createElement('div');
        tetromino.id = 'tetromino';
        // Initialize the tetromino's position
        var xPosition = 0;
        var yPosition = 0;
        tetromino.style.left = xPosition + 'px';
        tetromino.style.top = yPosition + 'px';
        // Add the tetromino to the game board
        document.getElementById('container').appendChild(tetromino);
        // Move the tetromino
        document.onkeydown = function(e) {
            switch (e.keyCode) {
                case 37: // left arrow
                    if (xPosition > 0) {
                        xPosition-=20;
                        tetromino.style.left = xPosition + 'px';
                    }
                    break;
                case 38: // up arrow
                    if (yPosition > 0) {
                        yPosition-=20;
                        tetromino.style.top = yPosition + 'px';
                    }
                    break;
                case 39: // right arrow
                    if (xPosition < 480) {
                        xPosition+=20;
                        tetromino.style.left = xPosition + 'px';
                    }
                    break;
                case 40: // down arrow
                    if (yPosition < 480) {
                        yPosition+=20;
                        tetromino.style.top = yPosition + 'px';
                    }
                    break;
            }
        }
    </script>
</body>
</html>