HTML5 画布游戏冲突检测问题

Question

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

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;
}

Answer 1

据我所知，随着游戏的进行，速度增加的问题是由于在clearHurdle函数中创建了重复的设置超时。按照您的方式，它在第一次运行中起作用，但由于setTimeout调用函数barrier（然后在一个无休止的循环中调用clearHurdleback），它添加了第二、第三、第四个setTimeout等要运行的函数。

如果这确实是您的问题，您可以通过在清除Hurdle函数中声明设置超时的变量名称来解决它，使用格式varName = setTimeout（function（）{...代码在这里... }）;并使用清除超时（“varName”）每次重置设置超时（除非您只是重新构建程序以不需要函数相互调用）