Javascript 蛇身渲染（蛇身不跟随头部）

为了练习，我决定做一个蛇游戏。但是有一个问题：如果你吃水果，它不会给蛇增加身体的一部分！（L41和更进一步）我有一个画布，所以不用担心，稍后我会优化我的代码。我知道还有其他方法，但我就是这样做的，我需要你的帮助来解决这个问题。因此，当你吃水果时，它应该增加身体的一部分，但它会收缩一部分，然后增加一部分，使其保持不变。（第一次除外，然后再添加一个！）我不知道为什么第一次有效，而其他时间无效。如果要测试，请复制代码并将此HTML行添加到其中：（使用HTML标记！！！）

var ctx=document.getElementById（“ctx”）.getContext（“2d”）//拿画布
var宽度=600；
var高度=600；
var framecount=0；
var水果列表={}；
var bodyparts={}；
var bodyparts2={}；
var得分=0；
var BodyLength=1；
var bodyLenght2=0；
ctx.font='30px Arial'；
var head={//蛇头
x:300，
y:300，
spdX:10，
spdY:5，
颜色：“蓝色”，
宽度：20，
lastX:0，
拉斯蒂：0，
};
变量body1={
x:300，
y:320，
颜色：“蓝色”，
宽度：20，
lastX:null，
拉蒂：空，
}
变量尾={
x:300，
y:340，
颜色：“蓝色”，
宽度：20，
lastX:null，
拉蒂：空，
}
车身零件[1]=车身1；
车身部件2[1]=尾部；
Body=function（）{//snake的Body
变量体={
x:null，
y:空，
id:车身长度，
颜色：“蓝色”，
宽度：20，
lastX:null，
拉蒂：空，
};
车身部件[车身长度]=车身；
车身零件2【车身长度2】=车身；
}
果=函数（id，x，y，颜色）{//果
变量水果={
x:x，
y:y，
id:id，
颜色：“橙色”，
宽度：20，
};
水果列表[id]=水果；
}
setbodyPos=函数（id1，id2）{
id1.lastX=id1.x；
id2.x=id1.lastX；
id1.lastY=id1.y；
id2.y=id1.lastY；
}
randomFruit=函数（）{//水果的随机坐标
var x=Math.random（）*（宽度-20）；
var y=Math.random（）*（高度-20）；
var id=Math.random；
果实（id，x，y）；
}
testCollisionRectRect=函数（rect1，rect2）{
return rect1.x这里有很多事情要做，所以让我向您指出几年前我为学习javascript而编写的一个游戏：


此外，在我完成这项工作后，我的同事向我提出挑战，要求我将其变成一个“蠕虫”游戏。我接受了挑战：


这是非常古老的代码（当我还是一名初级/中级开发人员和整个js noob时），但希望您能从中找到答案。
首先，您应该正确格式化代码。之后，您应该将数据和逻辑与视图（图形）分开。我在文件中正确格式化了它，只是忘了在这里执行