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

Question

我正在制作一个打鼹鼠游戏的变体，其中我有许多错误在屏幕上乱窜。问题是，这些错误只想在半个屏幕上乱窜，我不确定为什么。游戏在： https://hmcka.github.io/100days/day38/day38.html .

我已经逐行浏览了我的CSS文件，并且尝试了几种不同的方法来测量Javascript中的屏幕宽度(下面注释掉的代码示例(。知道是什么让这些错误边缘化吗？

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';