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() 调用移动到两个矩形创建之间：

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

input()

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

获取图像数据将获得整个画布的快照，因此，如果您每次都在红色之上绘制紫色，那么它始终是您正在检测的坐标处的紫色。

我可以建议使用console.log() 而不是alert() 来吐出你的结果吗？;)

于 2013-02-10T00:45:02.880 回答