俄罗斯方块游戏代码错误：方块重叠问题修复

<!DOCTYPE html>
<html>
<head>
    <title>俄罗斯方块游戏</title>
    <style>
        #game-board {
            width: 250px;
            height: 500px;
            border: 1px solid black;
            position: relative;
            margin: 0 auto;
        }
<pre><code>    .block {
        width: 25px;
        height: 25px;
        background-color: gray;
        border: 1px solid black;
        position: absolute;
    }

    .block.active {
        background-color: red;
    }

    #score {
        margin-top: 10px;
        text-align: center;
    }
&lt;/style&gt;
</code></pre>
</head>
<body>
    <div id="game-board"></div>
    <div id="score">得分：0</div>
<pre><code>&lt;script&gt;
    var board = document.getElementById(&quot;game-board&quot;);
    var scoreDisplay = document.getElementById(&quot;score&quot;);
    var boardWidth = 10;
    var boardHeight = 20;
    var blockWidth = 25;
    var blockHeight = 25;
    var blocks = [];
    var activeBlock = null;
    var intervalId = null;
    var score = 0;

    // 初始化游戏面板
    function initBoard() {
        board.style.width = boardWidth * blockWidth + &quot;px&quot;;
        board.style.height = boardHeight * blockHeight + &quot;px&quot;;
        for (var y = 0; y &lt; boardHeight; y++) {
            blocks[y] = [];
            for (var x = 0; x &lt; boardWidth; x++) {
                var block = document.createElement(&quot;div&quot;);
                block.classList.add(&quot;block&quot;);
                block.style.left = x * blockWidth + &quot;px&quot;;
                block.style.top = y * blockHeight + &quot;px&quot;;
                board.appendChild(block);
                blocks[y][x] = block;
            }
        }
    }

    // 创建一个新的方块
    function createBlock() {
        // 清空原来的方块
        activeBlock = null;
        for (var y = 0; y &lt; boardHeight; y++) {
            for (var x = 0; x &lt; boardWidth; x++) {
                blocks[y][x].classList.remove('active');
            }
        }
        var types = [
            [{x: 0, y: 0}, {x: 1, y: 0}, {x: 0, y: 1}, {x: 1, y: 1}], // 正方形
            [{x: 0, y: 0}, {x: 1, y: 0}, {x: 2, y: 0}, {x: 3, y: 0}], // 一字形
            [{x: 0, y: 0}, {x: 1, y: 0}, {x: 2, y: 0}, {x: 1, y: 1}], // T字形
            [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 2, y: 0}], // L字形
            [{x: 0, y: 1}, {x: 1, y: 1}, {x: 2, y: 1}, {x: 0, y: 0}], // 反L字形
            [{x: 0, y: 1}, {x: 1, y: 1}, {x: 1, y: 0}, {x: 2, y: 0}], // Z字形
            [{x: 1, y: 1}, {x: 2, y: 1}, {x: 0, y: 0}, {x: 1, y: 0}] // 反Z字形
        ];
        var type = types[Math.floor(Math.random() * types.length)];
        var color = &quot;#&quot; + Math.floor(Math.random() * 16777215).toString(16);
        var block = {type: type, color: color, x: 4, y: 0};
        if (canMove(block, 0, 0)) {
            activeBlock = block;
            activeBlock.type.forEach(function(block) {
                var x = activeBlock.x + block.x;
                var y = activeBlock.y + block.y;
                blocks[y][x].classList.add('active');
            });
        } else {
            clearInterval(intervalId);
            alert(&quot;游戏结束！得分：&quot; + score);
        }
    }

    // 绘制游戏面板
    function draw() {
        // 清空画布
        for (var y = 0; y &lt; boardHeight; y++) {
            for (var x = 0; x &lt; boardWidth; x++) {
                blocks[y][x].style.backgroundColor = &quot;&quot;;
            }
        }

        // 绘制方块
        activeBlock.type.forEach(function(block) {
            var x = activeBlock.x + block.x;
            var y = activeBlock.y + block.y;
            blocks[y][x].style.backgroundColor = activeBlock.color;
        });

        // 绘制已完成的行
        for (var y = 0; y &lt; boardHeight; y++) {
            var isRowComplete = true;
            for (var x = 0; x &lt; boardWidth; x++) {
                if (blocks[y][x].style.backgroundColor === &quot;&quot;) {
                    isRowComplete = false;
                    break;
                }
            }
            if (isRowComplete) {
                score++;
                scoreDisplay.innerHTML = &quot;得分：&quot; + score;
                for (var i = y; i &gt; 0; i--) {
                    for (var j = 0; j &lt; boardWidth; j++) {
                        blocks[i][j].style.backgroundColor = blocks[i - 1][j].style.backgroundColor;
                    }
                }
                for (var j = 0; j &lt; boardWidth; j++) {
                    blocks[0][j].style.backgroundColor = &quot;&quot;;
                }
            }
        }
    }

    // 移动方块
    function moveBlock(dx, dy) {
        if (canMove(activeBlock, dx, dy)) {
            activeBlock.x += dx;
            activeBlock.y += dy;
        }
    }

    // 旋转方块
    function rotateBlock() {
        var rotatedType = [];
        activeBlock.type.forEach(function(block) {
            var x = block.x;
            var y = block.y;
            rotatedType.push({x: -y, y: x});
        });
        var rotatedBlock = {type: rotatedType, color: activeBlock.color, x: activeBlock.x, y: activeBlock.y};
        if (canMove(rotatedBlock, 0, 0)) {
            activeBlock.type = rotatedType;
        }
    }

    // 判断方块能否移动
    function canMove(block, dx, dy) {
        for (var i = 0; i &lt; block.type.length; i++) {
            var x = block.x + block.type[i].x + dx;
            var y = block.y + block.type[i].y + dy;
            if (x &lt; 0 || x &gt;= boardWidth || y &lt; 0 || y &gt;= boardHeight || blocks[y][x].style.backgroundColor !== &quot;&quot;) {
                return false;
            }
        }
        return true;
    }

    // 处理键盘事件
    document.addEventListener(&quot;keydown&quot;, function(event) {
        if (event.keyCode === 37) { // 左箭头
            moveBlock(-1, 0);
        } else if (event.keyCode === 38) { // 上箭头
            rotateBlock();
        } else if (event.keyCode === 39) { // 右箭头
            moveBlock(1, 0);
        } else if (event.keyCode === 40) { // 下箭头
            moveBlock(0, 1);
        }
    });

    // 开始游戏
    initBoard();
    createBlock();
    intervalId = setInterval(function() {
        moveBlock(0, 1);
        draw();
    }, 500);
&lt;/script&gt;
</code></pre>
</body>
</html>