Javascript 网格系统需要修复画布上的位置问题吗？

我正在尝试创建一个简单的蛇游戏。我的问题是，大多数时候，当蛇遇到食物时，蛇的位置不是它应该的样子

为了更好地理解，请查看蛇（白色）与食物（绿色）相遇的屏幕截图：

var canvas=document.getElementById（'canvas'），
ctx=canvas.getContext（'2d'），
x=0，
y=0，
速度=3；
x_move=速度，
y_move=0，
食物位置=Math.floor（Math.random（）*canvas.width）-20；
食物位置=Math.floor（Math.random（）*canvas.height）-20；
//绘图
函数draw（）{
requestAnimationFrame（函数（）{
draw（）；
});
//画蛇
ctx.beginPath（）；
ctx.rect（x，y，20，20）；
clearRect（0，0，canvas.width，canvas.height）；
ctx.fillStyle='#ffffff'；
ctx.fill（）；
ctx.closePath（）；
//画食物
ctx.beginPath（）；
ctx.rect（食物位置，食物位置，20,20）；
ctx.fillStyle=“浅绿色”；
ctx.fill（）；
ctx.closePath（）；
//增加x和y的值以设置动画
x=x+x_移动；
y=y+y_移动；
} 
draw（）；
//按键
document.addEventListener（'keydown'，函数（事件）{
开关（event.keyCode）{
案例40://向下移动
如果（x_移动！=0&&y_移动！=-1）{
x_move=0；
移动=速度；
}
打破
案例39://右移
如果（x_移动！=-1&&y_移动！=0）{
x_move=速度；
y_move=0；
}
打破
案例38://移动顶部
如果（x_移动！=0和y_移动！=1）{
x_move=0；
移动=速度；
}
打破
案例37://向左移动
如果（x_移动！=1&&y_移动！=0）{
x_move=-速度；
y_move=0；
}
打破
}
});
canvas{背景色：红色}
我看不到您的碰撞代码。但我认为你的出身有错。你的正方形的起点不在中间，它在左上角。
谢谢你的回答，但是我怎么才能设定正方形的原点？你还需要帮助吗？明天我可以详细查找这个问题。当我使用
ctx.rect（Math.floor（x/10）*10，Math.floor（y/10）*10,10,10）时，它会起作用和ctx.rect（数学地板（食物位置x/10）*10，数学地板（食物位置y/10）*10，10，10）用来画食物，但我不知道为什么。我想，那是错误的。您只将最后一个数字设为零。例如，x=>117将变为110。我认为你必须减去宽度和高度的一半，把原点放在矩形的中心：食物位置x-宽度/2，食物位置y-高度/2，宽度，高度，蛇也是一样。