Canvas 画布：将形状组织为数组，并使用变量命名对象/形状

我对canvas相当陌生，我从头开始做了一个蛇游戏。蛇不局限于垂直和水平，但可以走很多路-这就是为什么我选择用圆圈制作蛇

现在我的蛇是无限的，这是不理想的。我想将蛇分组成一个数组，这样我就可以使用array.shift删除蛇的最后一个圆/部分，这样我就可以定义蛇的长度

此外，我想添加一些食物到画布上，并能够删除它之后。但我不知道如何用变量命名画布上的形状。我找了一整晚，但我猜我用错了词或是别的什么。。。我知道使用KineticJS是可能的，但我想在这一点上避免使用KineticJS

因此，我的问题是：

如何将形状组织到阵列中？ 如何使用Javascript变量命名形状？ 非常感谢你。我怀疑这是个新手问题，但我在任何地方都找不到答案

如何使用Javascript变量命名形状并将形状组织到数组中

可以将多部分形状定义为多个javascript对象

然后，您可以将这些多个零件组织到一个表示整个形状的阵列中

大概是这样的：

var snakeWidth=10;

var snake=[];

for(var i=0;i<10;i++){

    snake.push({
        x:i*snakeWidth,
        y:0,
        width:snakeWidth,
        height:10
    });
}

var foods=[];

for(var i=0;i<5;i++){

    foods.push({
        x:Math.random()*(canvas.width-10),
        y:Math.random()*(canvas.height-10),
        width:5,
        height:5,
    });

}

然后，例如，您可以测试foods[]数组中的所有食物对象，以查看蛇是否吃了任何特定的食物

关于使用变量命名形状：

您通常不需要通过命名来跟踪单个对象，因为您可以遍历所有对象的数组。相反，您可以将数组容器命名为snake，foods

function eatFood(snakeX,snakeY){
    for(var i=0;i<foods.length;i++){
        var food=foods[i];
        if(snakeX>=food.x 
            && snakeX<=food.x+food.width 
            && snakeY>=food.y
            && snakeY<=food.y+food.height
        ){
            // The snake ate this particular food
        }
    }
}

[添加：在画布上绘制蛇和食物]

---

这里有一篇关于创建经典蛇游戏的帖子：恐怕这与我的问题无关。我只需要知道如何将形状分组到数组中，以及如何使用变量名命名形状。谢谢您抽出时间。我明白了，这就是我想要的，但是，我如何把这个数组画到画布上呢？不客气！我在答案中添加了代码，显示如何在画布上绘制snake[]和foods[]数组。祝你玩蛇游戏好运！

function draw(){
    ctx.clearRect(0,0,canvas.width,canvas.height);
    ctx.fillStyle=snakeFill;
    for(var i=0;i<snake.length;i++){
        var s=snake[i];
        ctx.fillRect(s.x,s.y,s.width,s.height);
    }
    ctx.strokeStyle="black";
    s=snake[snake.length-1];
    ctx.strokeRect(s.x,s.y,s.width,s.height);

    ctx.fillStyle=foodFill;
    for(var i=0;i<foods.length;i++){
        var f=foods[i];
        ctx.fillRect(f.x,f.y,f.width,f.height);
    }
}