Javascript HTML5画布游戏对象在碰撞后卡住

请帮助我，我尝试了几种方法，但每当我将小对象移动到大对象时，在碰撞检测后它就会卡住。这是我的代码，很容易理解。 我还尝试在另一个对象的各个侧面检测碰撞检测

// Setup requestAnimationFrame
requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame  ||  
                    window.webkitRequestAnimationFrame ||  window.msRequestAnimationFrame;

// Create the canvas
var canvas = document.getElementById("canvas");
var ctx = canvas.getContext("2d");


// Game objects
var player = {
width:50,
height:50,
x:50,
y:50,
speed:100,
color:'#3C1BE0'
       };

var wall={
width:50,
height:150,
x:300,
y:100,
color:'#E01B5D'
        };


// Handle keyboard controls
var keysDown = {};

addEventListener("keydown", function (e) {
keysDown[e.keyCode] = true;
},false);

addEventListener("keyup", function (e) {
delete keysDown[e.keyCode];
},false);

//check collisions
var collisions=function(){


}

// Update game objects
var update = function (modifier) { 

//test for collisions 

//player collision with wall(red cube)

if(player.x+player.width>wall.x && 
   player.x<wall.x+wall.width   &&
   player.y<wall.y+wall.height  && 
   player.y+player.height>wall.y 
  )
   {
     player.speed=0;
   } 

//player collission with canvas
if(player.x < 0 )
{
    player.x=0;
}
else if(player.x+player.width> canvas.width)
{
    player.x=canvas.width-player.width;
}
else if(player.y <0 )
{
    player.y=0;
}
else if(player.y+player.width>=canvas.height)
{
    player.y=canvas.height-player.height;
}


if (38 in keysDown) { // Player holding up
player.y -= player.speed*modifier;
}
if (40 in keysDown) { // Player holding down
player.y += player.speed*modifier;
}
if (37 in keysDown) { // Player holding left
player.x -= player.speed*modifier;
}
if (39 in keysDown) { // Player holding right
player.x += player.speed*modifier;
}

};

// Draw everything
var render = function () {
ctx.clearRect(0,0,600,400);

ctx.fillStyle=wall.color;
ctx.fillRect(wall.x,wall.y,wall.width,wall.height);

ctx.fillStyle=player.color;
ctx.fillRect(player.x,player.y,player.width,player.height);
};

// The main game loop
var main = function () {
var now = Date.now();
var delta = now - then;

update(delta / 1000);
render();

then = now;
requestAnimationFrame(main);
};

// Let's play this game!
var then = Date.now();
main();

---

问题可能是，在碰撞时将速度设置为零后，从未将速度设置为高于0的值

if(player.x+player.width>wall.x && 
   player.x<wall.x+wall.width   &&
   player.y<wall.y+wall.height  && 
   player.y+player.height>wall.y) {
     player.speed=0; // this never gets unset
} 

---

您可能需要根据击键来计算玩家想要去哪里，并计算一个增量。如果允许三角形不碰撞，则更新玩家的位置，否则，您将不应用增量。

我已找到解决问题的方法。我已将键盘方向添加到参数中，并创建了一个独立的碰撞检测功能。如果您认为我对碰撞代码进行了任何改进，我将非常感谢您提供任何有用的输入

var collisions=function(sprite1,sprite2){
return sprite1.x < sprite2.x + sprite2.width &&
sprite1.x + sprite1.width > sprite2.x &&
sprite1.y < sprite2.y + sprite2.height &&
sprite1.y + sprite1.height > sprite2.y;

}

if(collisions(player,wall)){
if(player.y+player.height>wall.y &&
    40 in keysDown
  )
{
  player.y=wall.y-player.height;
}

if(player.y<wall.y+wall.height  &&
  38 in keysDown
  )
{
  player.y=wall.y+wall.height;
}
if(player.x+player.width>wall.x && 
    39 in keysDown
   )
{
  player.x=wall.x-player.width;
}
if(player.x<wall.x+wall.width   && 
 37 in keysDown
   )
{
  player.x=wall.x+wall.width;
}

}

---

谢谢你的回复。你能建议我怎么做，或者我应该使用完全不同的碰撞检测系统吗