可以用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。这样，数据就会朝一个方向流动，您的应用程序将更易于编写和维护。