Question

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

使用clearRect（）函数清除它们。

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

现在我想将这些砖块向下拉。我该怎么做呢..？ Plz帮助

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是尺寸。现在你将有一个空白的画布，你可以重新绘制所有内容。

我曾经创建过a simple HTML5 canvas game，您可以从源代码中学习。

Answer 2

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

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

增加多远？那就是最高的“固体塔”所在的地方。 I.E.，假设你有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");

使用Javascript在HTML5中重绘画布

3 个答案: