八个方向逐鹿舞动，指尖御风指哪向何方

2023-11-19 19:24:39

一个div元素，键盘操控的八个方向。这听起来像是游戏开发中常见的需求，需要元素能够响应键盘输入并在屏幕上移动。让我们逐步实现这个功能：

为div添加动画效果

首先，我们需要为div元素添加一个动画效果。我们可以使用CSS3的@keyframes规则来实现。这里有一个简单的动画效果示例：
```
@keyframes move {
  from {
    transform: translate(0, 0);
  }

  to {
    transform: translate(100px, 100px);
  }
}
```
这将使div元素从初始位置平滑移动到(100px, 100px)的位置。
给每个方向添加一个自定义属性

接下来，我们需要为每个方向添加一个自定义属性。这将使我们能够跟踪div元素当前的移动方向。我们可以使用data-direction属性来实现：
```
<div id="div" data-direction="none"></div>
```
当按下键盘时，我们可以将data-direction属性设置为对应的方向，例如：
```
document.getElementById("div").dataset.direction = "left";
```

当按下键盘事件左（37）上（38）右（39）下（40）所对应的值时条件变成true

现在，我们需要处理键盘事件并相应地更新div元素的位置。我们可以使用addEventListener()方法来监听键盘事件：

document.addEventListener("keydown", function(event) {
  switch (event.keyCode) {
    case 37: // Left arrow
      document.getElementById("div").dataset.direction = "left";
      break;
    case 38: // Up arrow
      document.getElementById("div").dataset.direction = "up";
      break;
    case 39: // Right arrow
      document.getElementById("div").dataset.direction = "right";
      break;
    case 40: // Down arrow
      document.getElementById("div").dataset.direction = "down";
      break;
  }
});

当按下键盘上的左、上、右或下箭头键时，我们将data-direction属性设置为对应的方向。

按键松开后条件变回false

最后，当按键松开时，我们需要将data-direction属性重置为"none"：
```
document.addEventListener("keyup", function(event) {
  document.getElementById("div").dataset.direction = "none";
});
```
这将使div元素停止移动。

使用JavaScript移动div元素

现在，我们可以在JavaScript中使用setInterval()方法来定期检查data-direction属性并相应地更新div元素的位置：

setInterval(function() {
  var direction = document.getElementById("div").dataset.direction;

  switch (direction) {
    case "left":
      document.getElementById("div").style.left = parseInt(document.getElementById("div").style.left) - 10 + "px";
      break;
    case "up":
      document.getElementById("div").style.top = parseInt(document.getElementById("div").style.top) - 10 + "px";
      break;
    case "right":
      document.getElementById("div").style.left = parseInt(document.getElementById("div").style.left) + 10 + "px";
      break;
    case "down":
      document.getElementById("div").style.top = parseInt(document.getElementById("div").style.top) + 10 + "px";
      break;
  }
}, 10);