Смещение в API сценариев Canvas

Question

Я только начал работать над игрой в змею на JavaScript с использованием API Canvas Scripting и столкнулся с проблемой, которую не могу понять, как решить

Я пытаюсь сгенерировать едудля змеи в любом месте сетки. Тем не менее, сама змея неправильно совмещается с фруктом.

Код, который я использую для создания фрукта:

let fruitPosX = Math.round(Math.random() * canvas.width)
let fruitPosY = Math.round(Math.random() * canvas.height)

Вот пример

Как я должен это исправить, я предполагаю какую-то систему координат, но как мне поступить? Кроме того, если у кого-то есть другой подход, пожалуйста, опубликуйте его ниже.

Answer 1

Допустимая ширина змеи snakeWidth, вы также должны иметь fruitWidth и fruitHeight, чтобы быть равными snakeWidth

let canvasWidth = canvas.width;
let canvasHeight = canvas.height;
let cols = canvasWidth/snakeWidth; // create the exact number of "aligned" columns your fruits can occupy
let rows = canvasHeight/snakeWidth; // create the exact number of "aligned" rows when the snake moves horizontally

let fruitPosX = Math.round(Math.random() * cols) * snakeWidth; // find a random column to place the fruit
let fruitPosY = Math.round(Math.random() * rows) * snakeWidth; // find a random row to place the fruit