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)
*  
*  
*
*
*