如何使对象的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;
}