你能用JS移动一个div吗？

Question

我正在尝试学习游戏制作的绝对基础知识，我想知道为什么我可以移动 img 而不是 div 元素。JS：var element;function moveSelection(evt) {  element = document.getElementById("char");  switch (evt.keyCode) {    case 37:      element.style.left = parseInt(element.style.left) - 10;      break;    case 39:       element.style.left = parseInt(element.style.left) + 10;       break;    case 38:       element.style.top = parseInt(element.style.top) - 10;       break;    case 40:       element.style.top = parseInt(element.style.top) + 10;       break;   }}window.addEventListener('keydown', moveSelection);现在，如果我有一个 id 为 char 的 img 标签，我可以用箭头键移动它。<img src="" id="char">但是，如果我删除该图像并用 div 替换它，<div id="char"></div>它不让我移动它。

Answer 1

代码存在多个问题，我不确定它如何处理图像。

为此，需要做一些事情：

1. 确保目标元素的 CSS 具有position: absolute属性集。您也可以使用relative,fixed或sticky视需要而定。

2. 使用getComputedStyle而不是直接访问style。该style属性将仅包含由属性或属性设置的值。

3. "px"在解析后的数字上附加一个测量单位。

这是一个最小的完整示例：

const element = document.getElementById("char");

const charStyle = getComputedStyle(element);

function moveSelection(evt) {

  evt.preventDefault();

  switch (evt.keyCode) {

    case 37:

      element.style.left = parseInt(charStyle.left) - 10 + "px";

      break;

    case 39:

      element.style.left = parseInt(charStyle.left) + 10 + "px";

      break;

    case 38:

      element.style.top = parseInt(charStyle.top) - 10 + "px";

      break;

    case 40:

      element.style.top = parseInt(charStyle.top) + 10 + "px";

      break;

  }

}

document.addEventListener("keydown", moveSelection);

#char {

  width: 50px;

  height: 50px;

  background: red;

  position: absolute;

}

<div id="char"></div>

话虽如此，这种设计应该让你觉得是一种反模式，因为它序列化和反序列化来自 DOM 元素的属性。这是创建良好的老式数据结构的不良替代品，例如：

const character = {x: 0, y: 0, stepSize: 10 /*... more properties ...*/};

此外，让键盘直接触发角色的移动会导致尴尬的重新触发和通常不可靠的用户体验。requestAnimationFrame对于这种情况，最好使用动画循环。键盘处理程序将为每个键打开和关闭标志，但实际上不会直接更新任何内容。动画循环将平滑地处理重新定位。您的 JS 脚本将保持游戏/动画状态，并仅在渲染帧时将其作为解耦视图转储到 DOM。这样，数据流向一个方向，您的应用程序将更易于编写和维护。