Question

我对canvas相当新，我从零开始制作蛇游戏。蛇并不局限于垂直和水平，但可以采用多种方式 - 这就是为什么我选择用圆圈制作蛇。

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

此外，我想在canvas添加一些食物，然后能够将其删除。但我无法弄清楚如何使用变量在canvas上命名形状。我整晚都在搜索，但我想我使用了错误的措辞或其他东西......我知道KineticJS可以使用它，但我想在此时避免使用KineticJS。

所以我的问题是：

如何将形状组织成阵列？
如何使用Javascript变量命名形状？

非常感谢你。我怀疑这是新手问题，但我无法在任何地方找到答案......

Answer 1

如何使用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,
    });

}

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

关于使用变量命名形状：

您通常不需要通过命名来跟踪单个对象，因为您可以遍历所有对象的数组。相反，你可以命名数组 - 容器（蛇，食物）

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
        }
    }
}

[加法：画蛇＆amp;画布上的食物]

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);
    }
}

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

1 个答案: