Simple HTML Tetris Game - Play Now! - 常规

<!DOCTYPE html>
<html>
<head>
    <title>Tetris</title>
    <style>
        #game {
            border: 1px solid black;
            width: 200px;
            height: 400px;
        }
    </style>
</head>
<body>
    <h1>Tetris</h1>
    <div id='game'></div>
    <script>
        // Create an array of Tetrominos
        const tetrominos = [
            [1, 1, 1, 1],
            [1, 1, 1, 0,
             1],
            [1, 1, 1, 0,
             0, 0, 1],
            [1, 1, 0, 0,
             1, 1],
            [1, 1, 0, 0,
             0, 1, 1],
            [0, 1, 1, 0,
             1, 1],
            [0, 1, 0, 0,
             1, 1, 1]
        ];
<pre><code>    // Generate a random number between 0 and 6
    let random = Math.floor(Math.random()*7);

    // Generate a random tetromino
    let currentPosition = 4;
    let current = tetrominos[random][currentPosition];

    // Create the game grid
    let gameGrid = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
    ];

    // Draw the game
    function draw() {
        let game = document.getElementById('game');
        let output = '';

        for (let i = 0; i &lt; gameGrid.length; i++) {
            output += '&lt;div class='row'&gt;';
            for (let j = 0; j &lt; gameGrid[i].length; j++) {
                if (gameGrid[i][j] == 0) {
                    output += '&lt;div class='empty'&gt;&lt;/div&gt;';
                } else if (gameGrid[i][j] == 1) {
                    output += '&lt;div class='tetromino'&gt;&lt;/div&gt;';
                }
            }
            output += '&lt;/div&gt;';
        }

        game.innerHTML = output;
    }

    // Update the game
    function update() {
        currentPosition++;

        if (currentPosition == current.length) {
            currentPosition = 0;
        }

        current = tetrominos[random][currentPosition];
    }

    // Move the tetromino left
    function moveLeft() {
        currentPosition--;

        if (currentPosition == -1) {
            currentPosition = current.length - 1;
        }

        current = tetrominos[random][currentPosition];
    }

    // Move the tetromino right
    function moveRight() {
        currentPosition++;

        if (currentPosition == current.length) {
            currentPosition = 0;
        }

        current = tetrominos[random][currentPosition];
    }

    // Move the tetromino down
    function moveDown() {
        // Clear the current position on the grid
        for (let i = 0; i &lt; gameGrid.length; i++) {
            for (let j = 0; j &lt; gameGrid[i].length; j++) {
                if (gameGrid[i][j] == 1) {
                    gameGrid[i][j] = 0;
                }
            }
        }

        // Update the grid with the new position
        for (let i = 0; i &lt; current.length; i++) {
            gameGrid[i][currentPosition] = current[i];
        }

        draw();
        update();
    }

    // Start the game
    draw();
    setInterval(moveDown, 1000);
    document.onkeydown = function(e) {
        if (e.keyCode == 37) {
            moveLeft();
        } else if (e.keyCode == 39) {
            moveRight();
        }
    }
&lt;/script&gt;
</code></pre>
</body>
</html>