HTML5 Snake Game - add multiple food

Question

I have followedthis guide to make my snake game.

But now I want to add more then one food into the map.

Well, I tried putting rows with makeFoodItem(); instead of just the default 1 row. So like:

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

Which also made 5 foods. But the score wasn't added when the snake got them, and they was just removed, and didn't added a new one when it was taken.

So I went into looking at the Function makeFoodItem() , which looks like this:

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

but I could not really figure out what to do there.

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

}

/ my global vars for spawnMoreFoodX and spawnMoreFoodY are an array that I loop through and set that to another variable, then plug that var in to fillRect() /