如何使图像在左右上下键上移动？

Question

我已经观看了至少 30 篇关于如何在按下的键上使图像向上、向下、向左或向右移动的教程，但没有一篇对我有帮助。

我想放一张图片，如果你按左键或右键，它就会朝那个方向移动。 最短的方法是什么？

我知道这是减去或添加 X 轴的东西，但是如何在页面上添加 X 和 Y 以便它可以移动？

是不是有keycode？​​p>

Answer 1

注意：注意left 和top 中的-ve。

const image = document.querySelector(".image-continer");

document.addEventListener("keydown", (e) => {
  const key = e.keyCode;
  const cs = getComputedStyle(image);

  const change = 10;
  const regex = /[\d\.]*/;

  const left = cs.left;
  const top = cs.top;
  const leftNumber = left.match(regex);
  const topNumber = top.match(regex);

  // LEFT key pressed
  if (key === 37) {
    image.style.left = `${parseFloat(leftNumber[0]) - change}px`;
  }
  // TOP key pressed
  if (key === 38) {
    image.style.top = `${parseFloat(topNumber[0]) - change}px`;
  }
  // RIGHT key pressed
  if (key === 39) {
    image.style.left = `${parseFloat(leftNumber[0]) + change}px`;
  }
  // DOWN key pressed
  if (key === 40) {
    image.style.top = `${parseFloat(topNumber[0]) + change}px`;
  }
});

html,
body {
  height: 100%;
  margin: 0;
}

.image-continer {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

<div class="image-continer">?</div>

Answer 2

此方法允许对角移动图像。

let img = document.getElementById("myimage"),
    w = img.offsetWidth/2,
    h = img.offsetHeight/2,
    x = img.offsetLeft,
    y = img.offsetTop,
    step = 10, //number of pixels to move
    keys = [];

document.addEventListener("keydown", function(e)
{
  let l=null, u=null;
  if (keys.indexOf(e.key) == -1)
    keys[keys.length] = e.key;

  for(let i = 0; i < keys.length; i++)
  {
    let key = keys[i];
    if (key == "ArrowLeft")
    {
      l += -step;
    }
    if (key == "ArrowRight")
    {
      l += step;
    }
    if (key == "ArrowUp")
    {
      u += -step;
    }
    if (key == "ArrowDown")
    {
      u += step;
    }
    }
  if (l === null && u === null)
    return;

  e.preventDefault();
  e.stopPropagation();

  if (l !== null)
    x += l;
  if (u !== null)
    y += u;

  if (x < w)
    x = w;
  if (y < h)
    y = h;
  if (x > img.parentNode.offsetWidth - w)
    x = img.parentNode.offsetWidth - w;
  if (y > img.parentNode.offsetHeight - h)
    y = img.parentNode.offsetHeight - h;

  img.style.left = x + "px";
  img.style.top = y + "px";
}, false);

document.addEventListener("keyup", function(e)
{
  keys.splice(keys.indexOf(e.key), 1);
}, false);

body,
html
{
  height: 100%;
}
img
{
  top: 50%;
  left: 50%;
  position: absolute;
  transform: translate(-50%,-50%);
  transition: left 0.3s ease, top 0.3s ease;
  box-shadow: 0 0 10px 2px lightblue;
}

<img id="myimage" src="https://lh3.googleusercontent.com/s1j_z7YCGft2EBNfnpXel8v02F8QkQKvp-_UjkR8SFaE5ciwPX9IugLMYvo_cCBzzuThRD7dVwwLO3H7XnvbD0JNnyVDmw_mPd8T5NH7yzQSSirZcA=w100">

Answer 3

JQuery 示例：

$(document).on('keydown', function(event) { // if a key is pressed...
    if (event.which === 39) { // then if the key the right arrow key...
        $('.image').animate({ // then animate it with JQuery...
            left: `+=${$('.image').width() * 3}`
        }, 'slow'); // and do it slowly
    } else if (event.which === 37) { // otherwise if the key is the left arrow key...
        $('.image').animate({ // then animate it with JQuery...
            left: `-=${$('.image').width() * 3}`
        }, 'slow'); // and do it slowly
    } else if (event.which === 38) { // otherwise if it is the up arrow key...
        $('.image').animate({ // then animate it with JQuery...
            top: `-=${$('.image').width() * 3}`
        }, 'slow'); // and do it slowly
    } else if (event.which === 40) { // otherwise if it is the down arrow key...
        $('.image').animate({ // then animate it with JQuery
            top: `+=${$('.image').width() * 3}`
        }, 'slow'); // and do it slowly
    }
    event.preventDefault();
});

Answer 4

我得到了解决方案：

var x = 0;
var y = 0;
var keys = {};
image.style.left = (x) + "px";
image.style.top = (y) + "px";

document.addEventListener("keyup", (e) => {
    keys[e.keyCode] = false;
  });
document.addEventListener("keydown", (e) => {
    keys[e.keyCode] = true;

    if(keys[37] {
        x += 5;
        image.style.left = (x) + "px";
    }

    if(keys[39] {
        x -= 5;
        image.style.left = (x) + "px";
    }
 });