Javascript HTML5画布游戏冲突检测问题

我正在做一个HTML5跑步者游戏，这个对象连续运行，在鼠标事件“点击”时，他跳了起来。然后我在游戏中添加了一个障碍物，并检测到碰撞，但它不能正常工作。问题在于，当跨栏与跑步物体碰撞一次并检测到碰撞时，清除所有物体，然后在画布上重新绘制跨栏，但当跨栏一次又一次碰撞，物体跨栏的速度变得越来越快时( 问题是如何克服它？以下是代码：

function clearHurdle(){

    h.clearRect(100,hy,160,250);
    //if(hx==paiX||hy==paiY){
    bl= new Image();
    bl.onload= function(){
        h.drawImage(bl,100,hy-20,160,250);
    };
    bl.src= "blast.png";
    setTimeout(function(){
    h.clearRect(100,hy-20,160,250);
    show_char=0;
    clearAll();
    //drawpai();
    hurdle();   
    },100);

}

function hurdle(){

    if(hx>(paiX-2) && hx<(paiX+2) && hy>(paiY-2) && hy<(paiY+2)){
        console.log(hx +'===='+(paiX-2));
        clearHurdle();
        hx=1360;    
    }

    h.clearRect(hx,hy,170,250);

    var img = new Image();

    img.onload= function(){
        h.drawImage(img,hx,hy,170,250);
    }

    img.src="hurdle.png";
    hx-= 4.5;

    if(hx>-400){
        setTimeout(hurdle,1000/60);
    }

    show_char=1;
}

函数clearsbarge（）{
h、 clearRect（100，hy，160250）；
//if（hx==paiX | | hy==paiY）{
bl=新图像（）；
bl.onload=函数（）{
h、 drawImage（bl，100，hy-20160250）；
};
bl.src=“blast.png”；
setTimeout（函数（）{
h、 clearRect（100，hy-20160250）；
show_char=0；
clearAll（）；
//drawpai（）；
跨栏（）；
},100);
}
函数障碍（）{
如果（hx>（paiX-2）和&hx（PAYY-2）和&hy-400）{
设置超时（跨栏，1000/60）；
}
show_char=1；
}

据我所知，随着游戏的进行，速度增加的问题是由于在

ClearBarge

函数中创建了重复的设置超时。您的设置方式在第一次运行时起作用，但因为设置超时调用函数

Barge

（然后在一个无休止的循环中调用

clearsbarge

），它添加了第二个、第三个、第四个等要运行的setTimeout

---

如果这确实是您的问题，您可以通过在

clearscoller

函数中声明setTimeout的变量名来解决它，使用格式

var varName=setTimeout（function（）{…code Here…}）；

并使用

cleartimout（“varName”）

每次重置setTimeout（除非您简单地重新构造程序，使其不需要函数相互调用）

我相信这是因为

ClearBarle

函数中的setInterval。它第一次工作正常，但因为setTimeout调用函数

Barle

（然后在一个无休止的循环中调用

ClearStaller

），从而添加第二个setInterval。要解决这个问题，您需要为setInterval声明一个变量名，并使用

clearInterval（varName）

每次重置它。谢谢@Zeaklous它正在工作。：）谢谢您的帮助。