0

getImageData関数に問題があります。赤に当たったことを検知してアラートボックスをポップアップするプログラムを作ろうとしています。「collideTest」という衝突検出関数を作成しましたが、問題はありませんが動作していません。以下にコード全体を含め、読みやすくするためにセクションに分けています。

(function () {
    var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
    window.requestAnimationFrame = requestAnimationFrame;
})();

//========================= B E G I N =======================================

window.onload = function init() {

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

    canvas.width = 600;
    canvas.height = 600;

    render();
}

//======================== O B J E C T S =====================================

var player = {
    x: 50,
    y: 50,
    xvel: 0,
    yvel: 0,
}

//===================== I N P U T & A D J U S T ============================

var keys = [];

window.addEventListener("keydown",function(e) {
    keys[e.keyCode] = true;
});

window.addEventListener("keyup",function(e) {
    keys[e.keyCode] = false;
});

function input() {

    if (keys[37]) {
        player.xvel -= 5
    }
    if (keys[39]) {
        player.xvel += 5
    }
    if (keys[38]) {
        player.yvel -= 5
    }
    if (keys[40]) {
        player.yvel += 5
    }

    player.x += player.xvel;
    player.y += player.yvel;

    player.xvel = 0;
    player.yvel = 0;

    collideTest();

}

//======================= C O L L I S I O N ================================

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 < whatColor.data.length; i += 4) {
        if (whatColor.data[i] == 255) {
            alert("red");
        }
    }
}

//========================== R E N D E R ===================================

function render(){

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

    canvas.width = 600

    input();

    c.fillStyle = "red"
    c.fillRect(300,300,50,50);

    c.fillStyle = "rgb(106,8,136)"
    c.fillRect(player.x,player.y,50,50)

    requestAnimationFrame(render);
}

collideTest（）の「255」を「0」に置き換えると、アラートが何度もポップアップ表示されるため、/完全に/壊れることはありません。何が起こっているのかよくわかりません。

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

4

1 に答える 1

2

あなたの計算は正しかった。render（）関数内にあるinput（）呼び出しを、2つの長方形の作成の間に移動するだけです。

c.fillStyle = "red"
c.fillRect(300,300,50,50);

input()

c.fillStyle = "rgb(106,8,136)"
c.fillRect(player.x,player.y,50,50)

画像データを取得すると、キャンバス全体のスナップショットが取得されるため、毎回赤の上に紫を描画している場合、検出している座標では常に紫になります。

alert（）の代わりにconsole.log（）を使用して結果を吐き出すことをお勧めしますか？;）

于 2013-02-10T00:45:02.880 に答える