Javascript 用于检测颜色冲突的getImageData是'；行不通

我正试图写一个getImageData，所以每当我的车撞上赛道的黑色部分时，就会发出警报。但是，它不工作，因为汽车一直在行驶

有人能帮我找出getImageData数组，并可能修复我的代码吗

//Setting the canvas and context
    var canvas = document.getElementById('gameCanvas');
    var context = canvas.getContext('2d');
    //Uploading car
    var car = new Image();
    car.src = "file:///H:/Desktop/Game/img/car.png";

    //Setting properties of car
    var x = 450;
    var y = 730;
    var speed = 10;
    var angle = 990;
    var mod = 0;

    //Event listeners for keys
    window.addEventListener("keydown", keypress_handler, false);
    window.addEventListener("keyup", keyup_handler, false);

    //Interval for animation
    var moveInterval = setInterval(function () {
        draw();
    }, 30);

    //Drawing the car turning and changing speed
    function draw() {
        context.clearRect(0, 0, canvas.width, canvas.height);

        x += (speed * mod) * Math.cos(Math.PI / 180 * angle);
        y += (speed * mod) * Math.sin(Math.PI / 180 * angle);

        context.save();
        context.translate(x, y);
        context.rotate(Math.PI / 180 * angle);
        context.drawImage(car, -(car.width / 2), -(car.height / 2));
        context.restore();
    }

    //Setting the keys
    function keyup_handler(event) {
        console.log('a');
        if (event.keyCode == 38 || event.keyCode == 40) {

            mod = 0;
        }
    }

    //Setting all of the keys
    function keypress_handler(event) {
        console.log(event.keyCode);
        if (event.keyCode == 38) {
            mod = 1;
        }
        if (event.keyCode == 40) {
            mod = -1;
        }
        if (event.keyCode == 37) {
            angle -= 5;
        }
        if (event.keyCode == 39) {
            angle += 5;
        }
    }

    //INSERT COLOUR DETECTION CODE TEST
    (function () {
        var requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || window.webkitRequestAnimationFrame || window.msRequestAnimationFrame;
        window.requestAnimationFrame = requestAnimationFrame;
    })();

    function collideTest(){
        var stopColour = context.getImageData(x - 5, y - 5,60,60);
        for (var i = 0; i < stopColour.data.length; i += 4) {
            if (stopColour.data[i] == 190707) {
                alert("black");
            }
        }
    }

    function render(){

        var canvas = document.getElementById('gameCanvas');
        var context = canvas.getContext('2d');

        var car = new Image();
        car.src = "file:///H:/Desktop/Game/img/car.png";

        requestAnimationFrame(render);
    }

//设置画布和上下文
var canvas=document.getElementById（'gameCanvas'）；
var context=canvas.getContext（'2d'）；
//上传车
var car=新图像（）；
car.src=”file:///H:/Desktop/Game/img/car.png";
//汽车的设置特性
var x=450；
变量y=730；
无功转速=10；
var角=990；
var mod=0；
//键的事件侦听器
addEventListener（“keydown”，keypress\u处理程序，false）；
addEventListener（“keyup”，keyup\u处理程序，false）；
//动画间隔
var moveInterval=setInterval（函数（）{
draw（）；
}, 30);
//绘制汽车转弯和变速图
函数绘图（）{
clearRect（0，0，canvas.width，canvas.height）；
x+=（速度*模）*数学cos（数学PI/180*角）；
y+=（速度*模）*数学正弦（数学π/180*角）；
context.save（）；
语境。翻译（x，y）；
旋转（Math.PI/180*角度）；
上下文.drawImage（car，-（car.width/2），-（car.height/2））；
restore（）；
}
//设置关键点
函数keyup\u处理程序（事件）{
console.log（'a'）；
if（event.keyCode==38 | | event.keyCode==40）{
mod=0；
}
}
//设置所有键
函数keypress_处理程序（事件）{
console.log（event.keyCode）；
如果（event.keyCode==38）{
mod=1；
}
如果（event.keyCode==40）{
mod=-1；
}
如果（event.keyCode==37）{
角度-=5；
}
如果（event.keyCode==39）{
角度+=5；
}
}
//插入颜色检测代码测试
（功能（）{
var requestAnimationFrame=window.requestAnimationFrame | | window.mozRequestAnimationFrame | | window.webkitRequestAnimationFrame | | window.msRequestAnimationFrame；
window.requestAnimationFrame=requestAnimationFrame；
})();
函数测试（）{
var stopColour=context.getImageData（x-5，y-5,60,60）；
对于（变量i=0；i

imagedata数组是一个数组，其中每个条目的值介于0和255之间（4个数组条目表示一个RGBA像素）。我不知道你到底是如何得出190707这个数字的，但是

stopColour.data[I]==190707

永远不会是

true

，因为你在数组中不会遇到大于255的值

如果要在所有三个颜色通道上检查与特定颜色的匹配，则需要检查三个值

var collision_red = // red-part of your collision color between 0 and 255
var collision_green = // green-part of your collision color between 0 and 255
var collision_blue = // blue-part of your collision color between 0 and 255

// ...

if ( stopColour.data[i + 0] == collision_red &&
     stopColour.data[i + 1] == collision_green &&
     stopColour.data[i + 2] == collision_blue ) {

     // collision
}

顺便说一句：与其依赖颜色键控，检查重叠的不可见几何形状（“边界框”或“边界圆”）通常更稳健、性能更友好。

以下内容与您的问题没有直接关系，但与以使用getImageData（）为中心的问题相关对于碰撞检测，我最近也尝试了一项任务。如果项目的未来更新包括使用转换坐标，那么这将立即变得相关

必须发出关于在HTML5画布上使用getImageData（）和putImageData（）的警告。它以通过translate（）方法使用平移坐标为中心

虽然大多数绘图方法使用生成的转换坐标系，但getImageData（）和putImageData（）不使用该转换坐标系，而是始终使用标准坐标系，且（0，0）位于画布的左上角！我很难发现这一点，尝试使用getImageData（）实现一个简单的碰撞检测算法，并想知道为什么在测试期间，选择已知是画布上渲染图像一部分的坐标时，返回的像素值是[0,0,0,0]，而不是真正的像素值。发生这种情况是因为转换后的坐标系被用来引用所讨论的像素。当将坐标更改为标准坐标系中应用的坐标时，正确检测到所需数据

然而，更令人困惑的是，当使用translate（）设置坐标时，drawImage（）确实使用了转换坐标

如果getImageData（）的返回对象中出现看似奇怪的数据，则在使用translate（）实现转换的坐标系时，这就是原因。这意味着必须保存画布在标准坐标系中的平移原点坐标，并将保存的原始坐标添加到平移坐标系中的坐标值中。下面是一个非常简单的测试，说明了这一点：

//获取我的画布句柄和二维打印上下文。。。
myCanvas=document.getElementById（“myCanvas”）；
myCanvasCtx=myCanvas.getContext（“2d”）；
//以标准坐标获得画布的中心
//（0，0）位于左上角。。。
cx=数学地板（myCanvas.width/2）；
cy=数学地板（我的画布高度/2）；
//将绘图原点转换到此中心位置。。。
myCanvasCtx.translate（cx，cy）；
//使用新的转换坐标在此处进行图像打印。。。举个简单的例子，
//我将使用通常的路径例程简单地绘制一些像素