HTML5 Snake Game - 添加多種食物

Question

我已經按照本指南制作了我的蛇游戲。

但現在我想在地圖中添加更多的食物。

好吧，我嘗試使用makeFoodItem();放置行makeFoodItem(); 而不僅僅是默認的 1 行。 所以像：

makeFoodItem();
makeFoodItem();
makeFoodItem();
makeFoodItem();
makeFoodItem();

這也做了5種食物。 但是snake拿到的時候分數沒有加，只是拿掉了，拿的時候也沒加新的。

所以我開始研究函數makeFoodItem() ，它看起來像這樣：

function makeFoodItem(){
  suggestedPoint = [Math.floor(Math.random()*(canvas.width/gridSize))*gridSize, Math.floor(Math.random()*(canvas.height/gridSize))*gridSize];
  if (snakeBody.some(hasPoint)) {
    makeFoodItem();
  } else {
    ctx.fillStyle = "rgb(10,100,0)";
    ctx.fillRect(suggestedPoint[0], suggestedPoint[1], gridSize, gridSize);
  };
}

但我真的不知道在那里做什么。

Answer 1

function spawnMultipleFood () {
for (let i = 0; i < spawnMoreFoodX.length; i++) {
    let spawnMultipleX = spawnMoreFoodX[i]
for (let j = 0; j < spawnMoreFoodY.length; j++) {
    let spawnMultipleY = spawnMoreFoodY[i]

innerBoard.fillStyle = "purple";
innerBoard.fillRect(spawnMultipleX * grid, spawnMultipleY * grid, gridSize, gridSize)
    }
} 

}

/我的 spawnMoreFoodX 和 spawnMoreFoodY 的全局變量是一個數組，我循環遍歷並將其設置為另一個變量，然后將該變量插入到 fillRect() /