Как сделать так, чтобы положение X и Y объекта реагировало на ширину и высоту HTML Canvas?

Question

Я создаю простую игру, используя HTML5 Canvas.

Игра имеет несколько прямоугольников внутри холста.

Проблема в том, что я использую координаты X и Y для управления прямоугольниками;игра отлично работает на моем дисплее - однако, если я использую дисплей меньшего размера, объект может выйти за пределы «карты». Если я использую дисплей большего размера, я могу видеть больше «карты».

Как я могу сделать ее адаптивной?

Вот часть кода, которую я использую для создания холста:

    this.canvas.width = document.body.clientWidth - 15;
    this.canvas.height = 700;
    this.context = this.canvas.getContext("2d");

и это в значительной степени движение прямоугольника внутри игрового цикла:

    cursor.x += 1;

Answer 1

Убедитесь, что вы установили ширину холста и высоту, чтобы они не могли быть больше размера экрана.

Затем, каждый раз, когда вы перемещаете прямоугольник, добавьте флажок кпосмотрите, находится ли прямоугольник внутри области просмотра.

Так что-то вроде:

if (cursor.x + 1 < this.canvas.width) {
  cursor.x += 1;
}