Simple HTML Tetris Game: Play Now! - Instructions Included - 常规

<html>
<head>
<style>
.block {
    width: 25px;
    height: 25px;
    background-color: red;
    margin: 0px;
    padding: 0px;
    float: left;
}
#tetris-board {
    border: 1px solid black;
    width: 200px;
    height: 400px;
    position: relative;
}
</style>
</head>
<body>
<h1>Tetris</h1>
<div id="tetris-board"></div>
<script>
// Game variables
var board = document.getElementById('tetris-board');
var boardWidth = 10;
var boardHeight = 20;
var blockSize = 25;

// Create the board
for (var y = 0; y < boardHeight; y++) {
    for (var x = 0; x < boardWidth; x++) {
        var block = document.createElement('div');
        block.className = 'block empty';
        block.id = 'block-' + x + '-' + y;
        board.appendChild(block);
    }
}

// Generate a random block
function generateBlock() {
    var randomBlock = Math.floor(Math.random() * 7);
    var block;
    switch (randomBlock) {
        case 0:
            block = [
                [1, 1],
                [1, 1]
            ];
            break;
        case 1:
            block = [
                [2, 0, 0],
                [2, 2, 2]
            ];
            break;
        case 2:
            block = [
                [0, 0, 3],
                [3, 3, 3]
            ];
            break;
        case 3:
            block = [
                [4, 4, 0],
                [0, 4, 4]
            ];
            break;
        case 4:
            block = [
                [5, 5, 5],
                [5, 0, 0]
            ];
            break;
        case 5:
            block = [
                [6, 6, 6],
                [0, 0, 6]
            ];
            break;
        case 6:
            block = [
                [7, 7],
                [7, 7]
            ];
            break;
    }
    return block;
}

// Draw the block on the board
function drawBlock(x, y, block) {
    for (var row = 0; row < block.length; row++) {
        for (var col = 0; col < block[row].length; col++) {
            if (block[row][col] !== 0) {
                var blockId = 'block-' + (x + col) + '-' + (y + row);
                document.getElementById(blockId).classList.add('filled');
                document.getElementById(blockId).style.backgroundColor = colors[block[row][col]];
            }
        }
    }
}

// Generate a random color
var colors = ['cyan', 'blue', 'orange', 'yellow', 'green', 'purple', 'red'];

// Start the game
function startGame() {
    var block = generateBlock();
    drawBlock(4, 0, block);
}

startGame();

</script>
</body>
</html>
<p>Instructions:</p>
<ol>
<li>Use the left and right arrow keys to move the blocks left and right.</li>
<li>Use the up arrow key to rotate the blocks.</li>
<li>Use the down arrow key to make the blocks fall faster.</li>
<li>Try to fit the blocks together to make complete rows.</li>
<li>When a row is complete, it will be cleared from the board.</li>
<li>The game ends when the blocks stack up to the top of the board.</li>
</ol>