Элемент div onkeypress не работает должным образом

Question

Я пытаюсь создать классную c «Змеиную игру» , используя только ванильный Javascript. У меня проблема с движениями змейки при нажатии клавиш со стрелками. Это не сработало, как предполагалось. Весь код выглядит так:

HTML

<div class="canvas" id="canvas">
      <div class="snake" id="snake"></div>
      <div class="food-item" id="food-item"></div>
    </div>

CSS

.canvas {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: rgba(203, 200, 200, 0.51);
}

.snake {
  width: 18px;
  height: 18px;
  transform: translate(215px, 246px);
  background-color: rgba(180, 9, 180, 0.808);
  border-radius: 25px;
}

JS

//the position of element before movement 

var pos = 0;
let ele = document.getElementById("snake");

//Add an event for button press

window.addEventListener("keydown", (key) => {
  var keycode = key.key;
  return {
    keycode: keycode,
    start: start(keycode),
  };
});

//movement of the element

function start(key) {
  let keys = key;

  function automove() {
    try {
      if (pos === 380) {
        clearInterval(movement);
      } else if (keys === "ArrowRight") {
        pos++;
        ele.style.transform = "translate(" + pos + "px)";
      } else if (keys === "ArrowLeft") {
        pos++;
        ele.style.transform = "translate(" + -pos + "px)";
      } else if (keys === "ArrowUp") {
        pos++;
        ele.style.transform = "translateY(" + pos + "px)";
      } else if (keys === "ArrowDown") {
        pos++;
        ele.style.transform = "translateY(" + -pos + "px)";
      } else {
        console.log("invalid command: " + Error);
      }
    } catch (error) {
      console.log("Error: " + error);
    }
  }

  const movement = setInterval(automove, 1000);
  return movement;

}

поведение кода таково

Что я здесь делаю неправильно ... есть ли альтернативный способ сделать это?

Это было бы отлично, если можно поддержать ванильным Js ответ.

Answer 1

Для игры со змейкой вы хотите, чтобы персонаж двигался, даже когда не нажимается никакая клавиша. Значит, нужно как-то сохранить направление. вот обновленная версия: https://jsfiddle.net/wmvqgku4/1/

JS:

var posX = 200;
var posY = 160;
var ele = document.getElementById("snake");

const UP =0;
const RIGHT =1;
const DOWN =2;
const LEFT =3;

var dir = 1;

window.addEventListener("keydown", (key) => {
  keyhandler(key.key)
});
window.onload = function () {
  ele = document.getElementById("snake");
  ele.style.top  = posY + "px";
  ele.style.left = posX + "px";

  setInterval( automove, 300);
  console.log("Started.");
}

function keyhandler(keys) {
    try {
      if (posX >= 380) {
        clearInterval(movement);
      } 

      if (keys === "ArrowRight") {
        dir = RIGHT;
      } else if (keys === "ArrowLeft") {
        dir = LEFT;
      } else if (keys === "ArrowUp") {
        dir = UP;
      } else if (keys === "ArrowDown") {
        dir = DOWN;
      } else {
        console.log("invalid command: " + keys);
      }
    } catch (error) {
      console.log("Error: " + error);
    }
}

function automove() {
    switch ( dir )  {
    case UP: posY--; break;
    case DOWN: posY++; break;
    case LEFT: posX--; break;
    case RIGHT: posX++; break;
  }
  console.log(dir);
  ele.style.top  = posY + "px";
  ele.style.left = posX + "px";
}

CSS:

.canvas {
  position: relative;
  width: 500px;
  height: 500px;
  background-color: rgba(203, 200, 200, 0.51);
}
.snake {
  width: 18px;
  height: 18px;
  position: absolute;
  background-color: rgba(180, 9, 180, 0.808);
  border-radius: 25px;
}

Я сделал змею position absolute, а als отслеживает положение x / y, поэтому вы можете добавлять проверки для границ.

Я также немного изменил его, обработчик ключей проверяет ключи и обновляет переменную направления. автодвижение теперь только проверяет направление и обновляет положение.

Надеюсь, это поможет.