div 元素 onkeypress 无法正常工作

Question

我正在尝试仅使用香草 Javascript 创建经典 "Snake game"。按下箭头键时 蛇形运动 出现问题。它没有按预期工作。整个代码是这样的。

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;

}

the behavior of the code is this

我在这里做错了什么......有没有其他方法可以做到这一点？

如果你能用 vanillaJs 回答支持就太好了。

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;
}

我将蛇的位置设置为绝对位置，并且还跟踪 x/y 位置，因此您可以添加边界检查。

我也做了一点改动，keyhandler 检查按键并更新 direction 变量。 automove 现在只检查方向，并更新位置。

希望这对您有所帮助。

div 元素 onkeypress 无法正常工作

div element onkeypress isn't working properly

javascript

transform

keycode

addeventlistener

setinterval