Question

我正在制作一种打地鼠游戏的变种，其中我在屏幕上出现许多错误。问题是，这些错误只想在屏幕的一半处出现，而我不确定为什么。游戏位于：https://hmcka.github.io/100days/day38/day38.html。

我逐行浏览了CSS文件，并尝试了几种不同的方法来用JavaScript测量屏幕的宽度（下面注释掉的代码示例）。知道是什么让这些bug处于旁观状态吗？

function moveItSmooth() {
const bug = randLocale(animals);
var rect = bug.getBoundingClientRect();

let posX = rect.top;
let posX2 = (Math.round(Math.random() * (screen.width - rect.width)) + 150);
//tried screen.width;
//tried window.innerWidth
//tried window.width

let posY = rect.left;
let posY2 = Math.round(Math.random() * (window.innerHeight - rect.height));

Answer 1

let posX = rect.top;

将X坐标设置为顶部，将Y坐标设置为左侧。因为您使用宽度来计算X（左右），使用高度来计算Y（上下），所以应该将它们翻转。

您可以看到错误通常会传播到屏幕底部以外的地方，因为它们的垂直范围与屏幕的宽度相同。

bug.style.top = posX + 'px';
bug.style.left = posY + 'px';

应该是

bug.style.left = posX + 'px';
bug.style.top = posY + 'px';

我不确定为什么这个Javascript只覆盖一半的屏幕

1 个答案: