Javascript 冲突实现

我有一个游戏，检测和实施侧面碰撞。一切都在运行，但由于检测和执行之间的时间间隔，会出现类似于振动的运动。这是伟大的工作，但振动真的激怒了我。提前谢谢你的帮助

这是我的密码：

游戏
html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
#玩家{
背景：#000；
位置：固定；
高度：10px；
宽度：10px；
左：0px；
顶部：0px；
}
#通电{
背景：蓝色；
位置：固定；
高度：10px；
宽度：10px；
}
var player=document.getElementById（“player”）；
var powerup=document.getElementById（“powerup”）；
var object=document.getElementsByClassName（“对象”）；
var计数器=0；
var addcounter=setInterval（createObject，1）；
函数createObject（）{
计数器++；
var newObject=document.createElement（“DIV”）；
setAttribute（“类”、“对象”）；
setAttribute（“id”，“powerup”）；
newObject.style.top=Math.floor（Math.random（）*（window.innerHeight-10））+10+“px”；
newObject.style.left=Math.floor（Math.random（）*（window.innerWidth-10））+10+“px”；
document.body.appendChild（newObject）；
如果（计数器>10）{
清除间隔（添加计数器）；
}
}
设置间隔（碰撞检测，1）；
函数冲突检测（）{
对于（i=0；iobject[i].offsetTop）{
player.style.left=object[i].offsetLeft-player.offsetWidth+“px”；
}
//从左到右
如果（player.offsetLeft>=object[i]。offsetLeft+object[i]。offsetWidth-1&&
player.offsetLeft对象[i].offsetTop）{
player.style.left=object[i]。offsetLeft+object[i]。offsetWidth+“px”；
}
//玩家从下到上
如果（player.offsetLeftobject[i].offsetLeft&&
player.offsetTop+player.offsetHeight>=对象[i]。offsetTop&&
player.offsetTop+player.offsetlight对象[i].offsetLeft&&
player.offsetTop=object[i]。offsetTop+object[i]。offsetHeight-1）{
player.style.top=object[i]。offsetTop+object[i]。offsetHeight+px；
}
}
}
功能移动（事件）{
var key=event.keyCode；
如果（键==40）{
player.style.top=player.offsetTop+1+“px”；
}
如果（键==39）{
player.style.left=player.offsetLeft+1+“px”；
}
如果（键==38）{
player.style.top=player.offsetTop-1+“px”；
}
如果（键==37）{
player.style.left=player.offsetLeft-1+“px”；
}
}

导致抖动移动的原因是，该移动发生在“keydown”回调中，而不是在按住键的每一帧调用该回调。相反，您可以在按键时将按键状态存储在变量中，然后在按键释放时将其标记为未按下。我已经修改了你的例子，使运动更流畅

我还添加了一个更新功能，用于检查按下的键，以便每一帧都会发生角色的移动

通过更多的工作，您可以制作一个管理器，允许您检查按下了哪些键。您还可以在角色移动后将碰撞检测功能移动到，以确保玩家在帧结束前处于正确位置

希望有帮助

游戏
html，正文{
身高：100%；
宽度：100%；
保证金：0；
}
#玩家{
背景：#000；
位置：固定；
高度：10px；
宽度：10px；
左：0px；
顶部：0px；
}
#通电{
背景：蓝色；
位置：固定；
高度：10px；
宽度：10px；
}
var player=document.getElementById（“player”）；
var powerup=document.getElementById（“powerup”）；
var object=document.getElementsByClassName（“对象”）；
var计数器=0；
var addcounter=setInterval（createObject，1）；
函数createObject（）{
计数器++；
var newObject=document.createElement（“DIV”）；
setAttribute（“类”、“对象”）；
setAttribute（“id”，“powerup”）；
newObject.style.top=Math.floor（Math.random（）*（window.innerHeight-10））+10+“px”；
newObject.style.left=Math.floor（Math.random（）*（window.innerWidth-10））+10+“px”；
document.body.appendChild（newObject）；
如果（计数器>10）{
清除间隔（添加计数器）；
}
}
设置间隔（碰撞检测，1）；
函数冲突检测（）{
对于（i=0；iobject[i].offsetTop）{
player.style.left=object[i].offsetLeft-player.offsetWidth+“px”；
}
//从左到右
如果（player.offsetLeft>=object[i]。offsetLeft+object[i]。offsetWidth-1&&
player.offsetLeft对象[i].offsetTop）{
player.style.left=object[i]。offsetLeft+object[i]。offsetWidth+“px”；
}
//玩家从下到上
如果（player.offsetLeftobject[i].offsetLeft&&
player.offsetTop+player.offsetHeight>=对象[i]。offsetTop&&
player.offsetTop+player.offsetlight对象[i].offsetLeft&&
player.offsetTop=object[i]。offsetTop+object[i]。offsetHeight-1）{
player.style.top=object[i]。offsetTop+object[i]。offsetHeight+px；
}
}
}
//注意：将按下的键存储在变量中
var-key=-1；
函数keyup（）{key=-1；}
功能键控（事件）{
key=event.keyCode；
}
//注意：每帧运行更新功能
函数更新（）{
如果（键==40）{
player.style.top=player.offsetTop+1+“px”；
}
如果（键==39）{
player.style.left=player.offsetLeft+1+“px”；
}
如果（键==38）{
player.style.top=player.offsetTop-1+“px”；
}
如果（键==37）{
player.style.left=player.offsetLeft-1+“px”；
}
requestAnimationFrame（更新）；
}
更新（）；