1

非常に経験の浅いプログラマーとして、プレイヤーがキャンバス上の特定の色と衝突したことを検出するゲームをコーディングしようとしています。座標が「player.x」と「player.y」で​​、寸法が 50x50 の黒い正方形があり、矢印キーを押すと移動します。また、キャンバスの別の場所に静止した赤い (255,0,0) 正方形があります。

以下の関数は、「プレーヤー」の四角形の周りに少し大きな四角形を取得し、その中に赤があるかどうかを調べることになっています。存在する場合は、アラートを送信します。問題は、これが機能していないように見えることです。

function collideTest(){
    var canvas = document.getElementById("canvas");
    var c = canvas.getContext("2d");

    var whatColor = c.getImageData(player.x - 5, player.y - 5,60,60);

    for (var i = 0; i < 3600; i++) {
        if (whatColor.data[i] == 255) {
            alert("red");
        }
    }
}

これが赤いピクセルを検出する最も効率的な方法ではないことはある程度認識していますが、ここに投稿する前にコードを簡素化したかったのです。機能に明らかに問題がありますか？

問題は、関数の呼び出し方法にある可能性があります。ユーザー入力を検出し、「プレーヤー」の正方形の座標を変更する別の関数の最後に呼び出されます。その関数は、すべてがキャンバスに描画される直前に呼び出されます。

助けてくれてありがとう！

4

2 に答える 2

0

キャンバス上の単一のピクセルごとに、whatColor.data 配列は、赤、緑、青、アルファ (不透明度) の 4 つの連続した色情報を保持します。したがって、各ピクセルの whatColor.data は次のようになります。

whatColor.data[i] は色の赤のコンポーネントです。

whatColor.data[i+1] は、色の緑のコンポーネントです。

whatColor.data[i+2] は、色の青のコンポーネントです。

whatColor.data[i+3] は、色のアルファ (不透明度) コンポーネントです。

したがって、反復は次のようになります (ピクセルごとに 4 つのインデックス)。

 for(var i = 0, n = whatColor.data.length; i < n; i += 4) {
      var red = whatColor.data[i];
      var green = whatColor.data[i + 1];
      var blue = whatColor.data[i + 2];
      var alpha = whatColor.data[i + 3];
      if(red==255){ ... it's a hit, do your thing! ... }
 }

imageData.data 配列のミニチュートリアルについては、こちらを参照してください: http://www.html5canvastutorials.com/advanced/html5-canvas-get-image-data-tutorial/

ところで、canvas を使ったゲーム作成を簡素化する canvas ライブラリの 1 つを見ることができます。ここに挙げるのはほんの一部です: easyelJs、KineticJs、FabricJs など!

于 2013-02-09T20:43:29.027 に答える