Replicated a snake game and the food that the snake is supposed to be chasing doesn't appear

JavaScript
#1

image

The food (which is symbolized by the square red dot as show in the picture above is supposed to show up as well as the score , but neither of those two things show when I run my code. What do you think I am doing wrong:

Here is the link to my code:https://codepen.io/noblegas/pen/NWPKMGj

#2

You can look at the drawFood function to see quickly no food shows.

function drawFood() {
  ctx.fillStyle = "red";
  ctx.strokestyle = "orange";
  ctx.fillRect(foodX, foodY, 10, 10);
  ctx.strokeRect(foodX, foodY, 10, 10);
}

When the above first runs (inside the main function), what are the values of foodX and foodY? Fix that issue and you should see something.

#3

but I thought the values of foodX and foodY were already set in the createFood function:

foodX
foodX1453×315 15.4 KB

#4

@noblegas87 createFood only gets called in two places (inside itself) and advanceSnake. However, advancedSnake is called after drawFood in your main function, so the values are not set. Also, the function would only get called in advanceSnake if didEatFood evaluates to true in the if statement. The problem is, didEatFood depends on foodX and FoodY again, so didEatFood will not be true.

#5