jQuery - 打砖 block 游戏 - 创建方 block

Question

我正在通过 Uni 的突破游戏学习 jQuery。我无法在游戏中显示多个砖 block 。这不是家庭作业，只是我在类练习中的领先。

我正在尝试使用以下循环来显示 block 。

for (var row = 0; row < 5; row++)
{
    for (var col = 0; col < 7; col++)
    {
        $("#game").append('<div class="brick" id="brick' + num + '"></div>');

        var brick = {x: col * 140, y: row * 60, id:"#brick" + num, alive:true};
        bricks.push(brick);

        num++;
    }
}   

JSFiddle完整代码。

Answer 1

您还需要为砖 block 指定其在页面上的 x 和 y 位置，现在它们位于 DOM 中，但它们都在同一个位置。尝试:

num = (row * 7) + col;
$brick = $('<div class="brick" id="brick' + num + '"></div>');
$brick.css({left: col * 140, right: row * 60});
$("#game").append($brick);

请注意，我也添加了代码来增加 num 值。

您需要确保您也有这个 css:

.brick{
    position: absolute;
}

此外，您需要在开始添加数组之前定义数组，将其放在第一个循环之前:

bricks = [];