HTML Tetris Game Example Code - Build a Simple Tetris Game - 常规

<html>
<head>
    <title>Tetris</title>
    <style>
        body {
            background-color: #ccc;
            width: 500px;
            margin: 0 auto;
            padding: 20px;
            font-family: sans-serif;
        }
        #board {
            background-color: #ccc;
            width: 400px;
            height: 600px;
            margin: 0 auto;
            padding: 10px;
            border: 1px solid #000;
        }
        .block {
            width: 20px;
            height: 20px;
            background-color: #000;
            border: 1px solid #000;
            float: left;
        }
    </style>
    <script>
        // Create an array of blocks
        var blocks = [
            // I-shape
            [
                [1, 1, 1, 1],
            ],
            // J-shape
            [
                [1, 0, 0],
                [1, 1, 1],
            ],
            // L-shape
            [
                [0, 0, 1],
                [1, 1, 1],
            ],
            // O-shape
            [
                [1, 1],
                [1, 1]
            ],
            // S-shape
            [
                [0, 1, 1],
                [1, 1, 0],
            ],
            // T-shape
            [
                [0, 1, 0],
                [1, 1, 1],
            ],
            // Z-shape
            [
                [1, 1, 0],
                [0, 1, 1],
            ],
        ];
<pre><code>    // Create a new block
    function newBlock() {
        var r = Math.floor(Math.random() * blocks.length);
        return blocks[r];
    }

    // Draw the board
    function draw() {
        var board = document.getElementById('board');
        board.innerHTML = '';

        // Iterate through the grid
        for (var row = 0; row &lt; 20; row++) {
            for (var col = 0; col &lt; 10; col++) {
                // Create a new block
                var block = document.createElement('div');
                block.className = 'block';
                board.appendChild(block);
            }
        }
    }

    window.onload = draw;
&lt;/script&gt;
</code></pre>
</head>
<body>
    <h1>Tetris</h1>
    <div id='board'></div>
</body>
</html>