使用JavaScript在HTML5中重绘画布
问题描述:
我正在创建一个点击并清除游戏。一旦用户点击某块砖块,就会检查其相邻砖块的颜色是否相同,并且所有这些砖块都会一次清除。使用JavaScript在HTML5中重绘画布
这些都是使用clearRect()函数清除的。
现在,在上面的砖块和下面的砖块之间留下一块白色的砖块,将上面的砖块悬挂下来。
现在我想把这些砖块向下。我该怎么做呢..? Plz help
答
这个问题很模糊,但是基于标题,您需要清除画布,然后才能重绘。否则,绘制的元素将简单地堆叠在彼此之上。
要做到这一点,调用函数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,你可以从源代码中学习。
答
我想我明白你在问什么。如果是这样,那么你想知道当下面的块被移除时如何移动块。
这只是增加x位置(记住画布从0,0开始)与您的游戏循环的每次迭代的问题。
要增加多少?那么这将是最高的“固体塔”在哪里。即假设你有10个令牌的列并删除下面的7 3需要全部落入到其余6的高度 - 所以这将是board height - (6*token height)
*
*
*
+ <- remove
* <- 6x token height (and less the board height)
*
*
*
*
*
请注明乌尔问题更加清晰。如果可能的话发布示例代码 – 2012-08-02 08:39:57
我想创建一个类似[this]的游戏(http://flashcanvas.net/examples/grenlibre.fr/demo/same/),但点击我的砖块后仍然存在。我想将它们向下移动病房 – 2012-08-02 08:48:10
MarcoK完美地为您解答如何重新绘制画布的问题。我建议用更多的细节开始另一个问题,并提供关于让你的“砖块”下降的当前代码示例。 – Sphvn 2012-08-02 09:00:08