Javascript HTML5画布游戏获胜'；在画布上应用边距时不起作用

我一直在玩下面的游戏

我想添加

margin:0 auto

，但当我应用任何类型的

margin

，

填充

等时，游戏停止工作

在这里我添加了

margin:200px你会注意到游戏不起作用

不确定原因。
移动整个200px画布时，您需要确保捕鼠器正确

您只需更改函数即可实现目标：

function trackPosition(e) {
    mouse.x = (e.pageX-200);
    mouse.y = e.pageY;
}

我们用-200px设置mouse.x，它用作边距

您还需要更改“按钮”单击事件：

// Variables for storing mouse position on click
var mx = (e.pageX-200),
my = e.pageY;

由于移动画布，命中检测代码处于禁用状态，因为它使用了与页面相关的pageX、pageY值。您可以通过使用offsetX、offsetY值获得相对于画布本身的位置，这将使您无需进行额外计算就可以更好地进行命中检测

function btnClick(e) {
    // Variables for storing mouse position on click
    var mx = e.offsetX,
    my = e.offsetY;

您可能还需要在代码的其他部分和/或其他计算中执行此操作，以确保命中检测是正确的
注意，无论何时更改css样式，您都必须进入并更改js文件中的计算