使用JavaScript在HTML5中重繪畫布

我正在創建一個點擊並清除遊戲。一旦用戶點擊某塊磚塊，就會檢查其相鄰磚塊的顏色是否相同，並且所有這些磚塊都會一次清除。使用JavaScript在HTML5中重繪畫布

這些都是使用clearRect（）函數清除的。

現在，在上面的磚塊和下面的磚塊之間留下一塊白色的磚塊，將上面的磚塊懸掛下來。

現在我想把這些磚塊向下。我該怎麼做呢..？ Plz help

2012-08-02 Ganesh Somani

請註明烏爾問題更加清晰。如果可能的話發佈示例代碼 – 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

這個問題很模糊，但是基於標題，您需要清除畫布，然後才能重繪。否則，繪製的元素將簡單地堆疊在彼此之上。

要做到這一點，調用函數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，你可以從源代碼中學習。

來源

2012-08-02 08:50:51 MarcoK

我想我明白你在問什麼。如果是這樣，那麼你想知道當下面的塊被移除時如何移動塊。

這只是增加x位置（記住畫布從0,0開始）與您的遊戲循環的每次迭代的問題。

要增加多少？那麼這將是最高的「固體塔」在哪裏。即假設你有10個令牌的列並刪除下面的7 3需要全部落入到其餘6的高度 - 所以這將是board height - (6*token height)

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

來源

2012-08-02 23:31:21 Jarrod

使用JavaScript在HTML5中重繪畫布

回答

相關問題