如何仅对水平和垂直进行框转换？

Question

I'm trying to make a box moving by horizontal and vertical on the arrows press. But when I pres for example up arrow and right arrow it goes by diagonal. Here is my codepen

.box {
  background-color: gray;
  height: 100px;
  width: 100px;
  transition: margin 0.5s cubic-bezier(0, .7, 0, 1);
}

const box = document.getElementsByClassName('box')[0];

document.addEventListener('keydown', function({keyCode, which}) {
  const keycode = keyCode ? keyCode : which,
        startValue = '0px',
        shiftValue = '400px';

  console.log(box.style.marginLeft, box.style.marginTop)
  switch(keycode) {
    case(40):
      box.style.marginTop = shiftValue;
      break;
    case(39):
      box.style.marginLeft = shiftValue;
      break;
    case(38):
      box.style.marginTop = startValue;
      break;
    case(37):
      box.style.marginLeft = startValue;
      break;
  }
});

Answer 1

Try the following:

const box = document.getElementsByClassName('box')[0];

let moving = false;

document.addEventListener('keydown', function({keyCode, which}) {
  const keycode = keyCode ? keyCode : which,
        startValue = '0px',
        shiftValue = '400px';

  console.log(box.style.marginLeft, box.style.marginTop)
  if (!moving && [37, 38, 39, 40].includes(keycode)){
      switch(keycode) {
        case(40):
          box.style.marginTop = shiftValue;
          break;
        case(39):
          box.style.marginLeft = shiftValue;
          break;
        case(38):
          box.style.marginTop = startValue;
          break;
        case(37):
          box.style.marginLeft = startValue;
          break;
      }
      moving = true;
      window.setTimeout(() => moving = false, 400); // Not 500, because visually it is very slow towards the end anyway.
  }
});

Answer 2

Either you could implement a Promise solution in here but I don't think it's worth justifying. Basically what we can do is to store all the keys pressed in an array and make sure the javascript only goes through the array of pressed keys once every x milliseconds.

const box = document.getElementsByClassName('box')[0];
let pressedKeys = [];
let timeoutHandler = -1;

document.addEventListener('keydown', function({keyCode, which}) {
  // As soon as the user presses a key we will clear the time out
  clearTimeout(timeoutHandler);

  const keycode = keyCode ? keyCode : which,
    startValue = '0px',
    shiftValue = '400px';

  pressedKeys.push(keycode);

  // register the timeout to a variable in order for this function 
  // only run once every x second. This implementation is also 
  // known as 'debounce function to poor people'
  timeoutHandler = setTimeout(() => {
    pressedKeys.forEach((key, index) => {
      // The animation time for each key pressed will be incremental
      // which means the second key pressed will have an animation delay
      // higher than the first one
      const timeoutSeconds = index === 0 ? 1 : index + (index * 100);
      setTimeout(() => {
        switch(key) {
          case(40):
            box.style.marginTop = shiftValue;
            break;
          case(39):
            box.style.marginLeft = shiftValue;
            break;
          case(38):
            box.style.marginTop = startValue;
            break;
          case(37):
            box.style.marginLeft = startValue;
            break;
        }
      }, timeoutSeconds)
    });

    pressedKeys = [];
  }, 100)
});

Answer 3

One possible solution: you could keep track of which moves have been requested and wait to perform the move until the previous move has finished. Example:

const box = document.getElementsByClassName('box')[0];

const startValue = '0px';
const shiftValue = '400px';

function moveDown() {
  // The move* functions only perform the move if is valid - i.e., 
  // if it would actually cause a visible change.
  if (box.style.marginTop !== shiftValue) {
    box.style.marginTop = shiftValue;
    return true;
  }
  // The move* functions return true iff the move was made.
  return false;
}

function moveRight() {
  if (box.style.marginLeft !== shiftValue) {
    box.style.marginLeft = shiftValue;
    return true;
  }
  return false;
}

function moveUp() {
  if (box.style.marginTop !== startValue) {
    box.style.marginTop = startValue;
    return true;
  }
  return false;
}

function moveLeft() {
  if (box.style.marginLeft !== startValue) {
    box.style.marginLeft = startValue;
    return true;
  }
  return false;
}

const moves = [];
let timeOfLastMoveInMilliseconds = null;
const animationDurationInSeconds = 0.5; // should match css transition duration
const animationDurationInMilliseconds = animationDurationInSeconds * 1000; 

function onFrame() {
  if (!timeOfLastMoveInMilliseconds) {
    timeOfLastMoveInMilliseconds = performance.now();
  }
  const timeSinceLastMove = performance.now() - timeOfLastMoveInMilliseconds;
  if (moves.length > 0 && timeSinceLastMove >= animationDurationInMilliseconds) {
    const wasMoved = moves.pop()();
    if (wasMoved) {
      timeOfLastMoveInMilliseconds = performance.now();
    }
  }
  window.requestAnimationFrame(onFrame);
}
window.requestAnimationFrame(onFrame);

document.addEventListener('keydown', function({keyCode, which}) {
  const keycode = keyCode ? keyCode : which;
  switch(keycode) {
    case(40):
      moves.unshift(moveDown);
      break;
    case(39):
      moves.unshift(moveRight);
      break;
    case(38):
      moves.unshift(moveUp);
      break;
    case(37):
      moves.unshift(moveLeft);
      break;
  }
});

Note that the code above keeps track of every move the user makes, so, eg, if you press down, up, down, up, down quickly, that sequence will play back. Depending on your application, you might want to add restrictions so that, eg, only horizontal+diagonal moves are allowed and/or only moves coming from keypresses that happen within a short timeframe.

Answer 4

So, I decided to set 500 milliseconds breaks between every press on the key with animation and if it's faster without animation, but without any additional asynchronous code. Thanks for the help.

.box {
  background-color: gray;
  height: 100px;
  width: 100px;
}

.animation {
  transition: margin 0.5s cubic-bezier(0, .7, 0, 1);
}

const box = document.getElementsByClassName('box')[0];
let prevTime = 0;

document.addEventListener('keydown', function({keyCode, which}) {
  const keycode = keyCode ? keyCode : which,
        startValue = '0px',
        shiftValue = '400px',
        currentTime = Date.now();
  let diff = 0;

  diff = currentTime - prevTime;

  if (diff > 500) {
    box.classList.add('animation');
  } else {
    box.classList.remove('animation');
  }

  switch(keycode) {
    case(40):
      box.style.marginTop = shiftValue;
      break;
    case(39):
      box.style.marginLeft = shiftValue;
      break;
    case(38):
      box.style.marginTop = startValue;
      break;
    case(37):
      box.style.marginLeft = startValue;
      break;
  }

  prevTime = currentTime;
});