javascript - 使用 Javascript 在 HTML5 中重绘 Canvas

Question

我正在创建一个点击清除游戏。一旦用户点击了一些砖块，它的相邻砖块就会被检查为相同的颜色，并且所有这些砖块都会被立即清除。

这些是使用 clearRect() 函数清除的。

现在这会在上面的砖块和下面的砖块之间留下一个白色的补丁，让上面的砖块悬空。

现在我想把这些砖头往下移。我该怎么做呢..？请帮忙

Answer 1

这个问题很模糊，但根据标题，您需要先清除画布，然后才能重绘。否则，绘制的元素将简单地堆叠在一起。

为此，请clearRect在画布本身上调用该函数：

function clear() {
    var canvas = document.getElementById("canvas");
    var ctx = canvas.getContext("2d");
    ctx.clearRect(0, 0, 500, 500);
}

canvas画布的 ID 和500, 500尺寸在哪里。现在您将拥有一个空画布，您可以在其中重新绘制所有内容。

我曾经也做过一个简单的 HTML5 画布游戏，你可以从源代码中学习。

Answer 2

我想我明白你在问什么。如果是这样，那么您想知道在移除下面的块时如何将块向下移动。

这只是在游戏循环的每次迭代中增加 x 位置（记住画布从 0,0 开始）的问题。

增加多少？那将是最高的“实心塔”所在的地方。IE，假设您有一列 10 个标记，然后删除了 7 个。下面的 3 个需要全部下降到剩余 6 个的高度 - 所以这将是board height - (6*token height)

*
*
*
+ <- remove
* <- 6x token height (and less the board height)
*  
*  
*
*
*

Answer 3

我成功地通过 DOM 重绘 HTML Canvas。

    var c = document.getElementsByName("myCanvas")[0];

    if (c != null)
    {
        c.remove();
    }

    var c = document.createElement("canvas");
    c.setAttribute("name", "myCanvas");
    c.setAttribute("width", 900);
    c.setAttribute("height", 600);
    c.setAttribute("style", "border:1px solid #d3d3d3");