javascript游戏中的碰撞检测

我现在正在做一个小平台游戏。但它与碰撞检测的关系并不太好。我看过很多这方面的教程，但似乎不理解。这是我的密码：

var ctx=document.getElementById（“canvas”）.getContext（“2d”）；
var-rightspressed=false；
var spacePressed=false；
var leftPressed=false；
var重力=1；
//玩家对象
变量播放器={
x:50，
y:370，
dy:0,，
dx:0，
宽度：10，
身高：10，
速度:10,，
跳跃：错
};
//长方体
变量箱={
x:200，
y:350，
宽度：50，
身高：50
};
文件。添加的文件列表（“键控”，键控）；
文件。添加的文件列表（“键控”，键控）；
功能键控（e）{
如果（e.keyCode==39）{
rightspressed=true；
}
如果（e.keyCode==32）{
spacePressed=true；
}
如果（e.keyCode==37）{
leftPressed=true；
}
}
功能键控（e）{
如果（e.keyCode==39）{
右压=假；
}
如果（e.keyCode==32）{
spacePressed=false；
}
如果（e.keyCode==37）{
leftPressed=false；
}
}
//抽签
函数{
ctx.beginPath（）；
弧（player.x，player.y，10,0，Math.PI*2）；
ctx.fillStyle=“红色”；
ctx.fill（）；
}
//画盒子
函数drawBox（）{
ctx.fillRect（box.x，box.y，box.width，box.height）；
}
//调用其他函数并处理逻辑的主函数
函数绘图（）{
clearRect（0,0，canvas.width，canvas.height）；
牵引杆（）；
抽屉（）；
如果（右键按下）{
//球的正确速度
player.x+=5；
}
如果（左按）{
//球的左速度
player.x-=5；
}
如果（按空格键）{
如果（！玩家跳跃）{
//跳高
player.dy=-player.speed*2；
player.jumping=true；
}
}
player.dy+=重力；
player.x+=player.dx；
player.y+=player.dy；
如果（player.y>=390）{
player.y=390；
player.jumping=false；
}
//盒碰撞逻辑
window.requestAnimationFrame（绘制）
}
window.requestAnimationFrame（绘制）
canvas{边框：1px纯黑；}
因此我知道这不会帮助您修复代码，但我强烈建议您查看首页上的演示（单击以喜欢第四个），您将看到它提供了出色的碰撞检测，你可以从网站上下载这个项目，它应该可以让复制变得非常容易，以满足你的需要
 我想这就是你想要的行为。下面的代码发挥了所有的魔力：

（请参阅下面的代码片段以了解工作演示）

canvas{边框：1px纯黑；}
我不太清楚你在问什么，你想检测与盒子的碰撞吗？代码中实际上没有进行任何碰撞检测……是的，我是，我知道没有：D，因为我尝试过的一切都没有意义，所以我删除了它。基本概念很简单，向右移动：
if（player.x）+（player.width/2）>=box.x{console.log（“碰撞！”）；}
谢谢你的回答，但当我尝试时，玩家不仅会与箱子相撞，还会与上面的空气相撞。现在我已经从各个方面尝试过了，但这也不起作用，因为我想让他在从左边或右边击中箱子时停下来，而不是当他站在箱子上时。谢谢你的回答，但这没有帮助请告诉我：（你下载了这个项目并进行了研究吗？是的，这是一个huuuuuge程序。它可以进行碰撞检测，但如果你明白我的意思的话，它不是特定于侧面的。
//CHECK COLLISION
var collisionObjects = [rect.box, rect.wall];
for (var i=0,count=collisionObjects.length; i<count; ++i) {
    var obj = collisionObjects[i];
    var playerLeft=x-player.width, playerRight=x+player.width, playerTop=y-player.height, playerBottom=y+player.height;
    var objectLeft=obj.x, objectRight=obj.x+obj.width, objectTop=obj.y, objectBottom=obj.y+obj.height;
    //check if player is either touching or within the object-bounds
    if (playerRight>=objectLeft && playerLeft<=objectRight && playerBottom>=objectTop && playerTop<=objectBottom) {
        if (player.y+player.height==objectTop || player.y-player.height==objectBottom) {y=player.y;} //player is already colliding with top or bottom side of object
        else if (player.x+player.width==objectLeft || player.x-player.width==objectRight) {x=player.x;} //player is already colliding with left or right side of object
        else if (playerRight>objectLeft && playerLeft<objectRight && playerBottom>objectTop && playerTop<objectBottom) {
            //check on which side the player collides with the object
            var sides = {left:Math.abs(playerRight-objectLeft), right:Math.abs(playerLeft-objectRight), top:Math.abs(playerBottom-objectTop), bottom:Math.abs(playerTop-objectBottom)};
            var side = Math.min(sides.left, sides.right, sides.top, sides.bottom); //returns the side with the smallest distance between player and object
            if (side==sides.top) {y=objectTop-player.height;} else if (side==sides.left) {x=objectLeft-player.width;} //first check top, than left
            else if (side==sides.bottom) {y=objectBottom+player.height;} else if (side==sides.right) {x=objectRight+player.width;} //first check bottom, than right
        }
    }
}