HTML5 Canvas游戏碰撞检测问题

我正在研究一个HTML5 Runner Game，该对象连续运行，并在鼠标事件“单击”时跳跃。然后我给游戏添加一个障碍并检测碰撞，但是它不能正常工作。问题是，当障碍与跑步物体碰撞一次并检测到碰撞时，清除所有物体，然后在画布上重新绘制障碍物，但障碍物一次又一次与对象障碍物的速度变得快速和快速碰撞.... :( 问题是如何克服它下面是代码：？HTML5 Canvas游戏碰撞检测问题

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

来源

2013-07-27 Hammad Hassan

我相信这是因为'clearHurdle'函数中的setInterval。它第一次运行良好，但是因为setTimeout调用函数'hurdle'（然后调用'clearHurdle'回到一个无止境的循环中），因此增加了第二个setInterval。为了解决这个问题，你需要为setInterval声明一个变量名，并使用'clearInterval（varName）'来每次重置它 –

谢谢@Zeaklous它的工作。 :)感谢您的帮助巴迪。 –

从我可以告诉，随着速度增加随着游戏的问题是由于您的clearHurdle函数中创建重复一个定时器，你有它它的方式第一次运行，但由于setTimeout调用函数hurdle（然后调用clearHurdle无限循环），它会添加第二，第三，第四等setTimeout以便运行。

如果这确实是你的问题，你可以通过为clearHurdle函数内的setTimeout声明一个变量名称，使用的格式var varName = setTimeout(function(){ ...Code Here... });和使用clearTimeout("varName")每次重置的setTimeout（除非你只是重组方案，不解决它需要相互调用的函数）

来源

2013-07-27 23:52:25

HTML5 Canvas游戏碰撞检测问题

回答

相关问题