HTML 5 の機能のいくつかを使用して小さな Tetris クローンを作成していますが、ちょっとしたジレンマに陥っています。
私のテトロミノはブロックで構成されていません。回転に依存するシェーディングとシャドウがあり、それぞれが独自のイメージです。つまり、ゲームの状態が変化するたびに通常の「すべてを再描画」することはできません。これは、すべてのピースのドロップ履歴を追跡し、ラインをクリアしたいときにいつでも「リプレイ」することを意味するためです。
だから私のオプションは次のとおりです。
1) 互いに積み重ねられた 2 つのキャンバス要素を作成します。裏面は「ボード」のイメージです。上の 1 つはピース キャンバスで、簡単にスライスして並べ替えることができます。ただし、すべてを 1 つのキャンバス要素に保持したかったので、これは非常にハックな感じがします。
2) 「描画」コンテキストと「バッファ」コンテキストを作成します。バッファ コンテキストでは、すべてのピースがあり、自由に操作できます。バッファを画面に描画するときは、getImageData を取得し、すべてのピクセルをループして、ボード イメージに合成します。次に、これを putImageData を使用して「描画」コンテキストに書き込みます。この問題は、ImageData 構造を取得して canvas 要素に合成する方法が見つからないために発生します (drawImage を使用して ImageElements でそれを行うことができますが、drawImage は ImageData 構造を取得しません)。
どちらのソリューションも私には非常にエレガントに思えません。
ありがとう