不断向keydown

Question

function Parse(css) {
  var a = "";
  for (var i in css)
    if (!isNaN(parseInt(css[i]))) a += css[i];
    else break;
  return parseInt(a)
}

function Player() {
  return document.getElementById('PLAYER');
}
var P = {
  HEIGHT: Parse(window.getComputedStyle(Player(), null).getPropertyValue('height')),
  WIDTH: Parse(window.getComputedStyle(Player(), null).getPropertyValue('width')),
  TOP: Parse(window.getComputedStyle(Player(), null).getPropertyValue('top')),
  LEFT: Parse(window.getComputedStyle(Player(), null).getPropertyValue('left'))
};
document.addEventListener('keydown', function(k) {
  switch (k.key.toLowerCase()) {
    case 'arrowleft':
      Object.assign(Player().style, {
        left: `${P.LEFT - P.WIDTH}px`
      });
      break;
    case 'arrowright':
      Object.assign(Player().style, {
        left: `${P.LEFT + P.WIDTH}px`
      });
      break;
    case 'arrowup':
      Object.assign(Player().style, {
        top: `${P.TOP - P.HEIGHT}px`
      });
      break;
    case 'arrowdown':
      Object.assign(Player().style, {
        top: `${P.TOP + P.HEIGHT}px`
      });
      break;
  }
}, true);

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#PLAYER {
  position: relative;
  width: 32px;
  height: 32px;
  background-color: #000;
}

<div id="PLAYER"></div>

我一直在努力为Javascript中的可能游戏做一个非常基本的测试，但我遇到了一些难以理解的错误。

问题是我的黑色div方形元素（紧贴在0,0处）只在一个正方形中移动，除了在一个方向上连续移动，通过在其左侧或顶部添加自己的宽度或高度，根据箭头键是按压。

这真是令人困惑。

非常感谢任何和所有输入和/或建议。我对制作游戏的场景很陌生。

Answer 1

将元素的position设置为relative

＆＃13;

＆＃13;

function Parse(css) {
  var a = "";
  for (var i in css)
    if (!isNaN(parseInt(css[i]))) a += css[i];
    else break;
  return parseInt(a)
}

function Player() {
  return document.getElementById('PLAYER');
}

window.onload = function() {
  var P = {
    HEIGHT: Parse(window.getComputedStyle(Player(), null).getPropertyValue('height')),
    WIDTH: Parse(window.getComputedStyle(Player(), null).getPropertyValue('width')),
    TOP: Parse(window.getComputedStyle(Player(), null).getPropertyValue('top')),
    LEFT: Parse(window.getComputedStyle(Player(), null).getPropertyValue('left'))
  };
document.addEventListener('keydown', function(k) {
  switch (k.key.toLowerCase()) {
    case 'arrowleft':
      Object.assign(Player().style, {
        left: `${P.LEFT - P.WIDTH}px`
      });
      break;
    case 'arrowright':
      Object.assign(Player().style, {
        left: `${P.LEFT + P.WIDTH}px`
      });
      break;
    case 'arrowup':
      Object.assign(Player().style, {
        top: `${P.TOP - P.HEIGHT}px`
      });
      break;
    case 'arrowdown':
      Object.assign(Player().style, {
        top: `${P.TOP + P.HEIGHT}px`
      });
      break;
  }
}, true);

}

＆＃13;

body {
  width: 100%;
  height: 100%;
  margin: 0;
}

#PLAYER {
  width: 32px;
  height: 32px;
  background-color: #000;
  position: relative;
  display:block;
}

＆＃13;

<div id="PLAYER"></div>

＆＃13;

＆＃13;

＆＃13;