javascript中的平滑蛇运动

我在做蛇游戏。我有一个基本的游戏，但我想移动蛇更顺利，特别是我想把蛇的方向更顺利

到目前为止的问题是，我一直在移除蛇的尾巴，并将其添加到头部的运动部分。 通过缩短调用draw函数的间隔并少量增加x和y值，平滑地移动snake是相当容易的，但我遇到的问题是如何平滑地旋转snake，这正是我迷茫/困惑的地方，我不知道如何这样做（只有蛇的部分转动，而不是蛇被阻挡时头部的变化）

有人能帮忙吗？这是我的密码：

let cvs=”“；
设ctx=“”；
让大小=[]；
var方向='b'；
无功转速=200；
//在箭头上移动线单击
addEventListener（“向下键”，moveSomething，false）；
函数（e）{
开关（如钥匙代码）{
案例37：
//左
如果（方向！=“r”）{
方向='l'；
}
打破
案例38：
//向上
如果（方向！=“b”）{
方向='t'；
}
打破
案例39：
//对
如果（方向！=“l”）{
方向='r'；
}
打破
案例40：
//底部
如果（方向！=“t”）{
方向='b'；
}
打破
}
}
让食物{
x:Math.floor（Math.random（）*220），
y:Math.floor（Math.random（）*400），
s:20，
绘图：函数（）{
//此if块舍入x和y值
如果（（此.x%20）！=0 | |（此.y%20）！=0）{
如果（（此.x%20）！=0）{
设e=这个。x%20；
e=20-e；
这个.x=这个.x+e；
}
如果（（此.y%20）！=0）{
设e=y%20；
e=20-e；
this.y=this.y+e；
}
};
ctx.fillStyle=“红色”；
ctx.fillRect（this.x，this.y，this.s，this.s）；
},
新食品：功能（）{
this.x=Math.floor（Math.random（）*220）；
this.y=Math.floor（Math.random（）*400）；
这个.draw（）；
}
}
常数蛇={
s:20，
绘图：函数（x，y）{
ctx.fillStyle=“绿色”；
ctx.fillRect（this.s*x，this.s*y，this.s，this.s）；
ctx.strokeStyle=“黑色”；
ctx.strokeRect（this.s*x，this.s*y，this.s，this.s）；
},
snakeint:function（）{
对于（设i=8；i>=4；i--）{
推({
x:我，
y:6
})
}
}, 
callDraw:function（）{
for（设i=0；i

你的代码看起来运行得很好……你能扩展一下你的意思吗：

平稳地转动蛇

目前，蛇似乎一次移动一个盒子的距离，我试图让它移动得更平稳，比如说你把一大块木头放在地上，用同样的力连续推它几分钟在没有中间停顿的情况下，一段时间内，块将非常平稳地移动，即一次移动dx或dy的距离。你可以检查我在问题中提供的链接，蛇移动非常平稳。但我的移动是一种急促的运动。你已经知道部分解决方案：

缩短间隔并增加x和y va少量的lues

想想你的蛇的“骨头”，它们是20x20的正方形5，准确地说，你会如何转动，你可以重叠正方形使其看起来平滑，但我想这看起来会很奇怪，可能会将蛇改成重叠的圆圈