如何旋转然后根据方向数组向上、向下、向左或向右移动元素？答案

【问题标题】：How do I rotate then move an element up, down, left or right based on an array of directions?如何旋转然后根据方向数组向上、向下、向左或向右移动元素？
【发布时间】：2021-07-21 05:58:21
【问题描述】：

GitHub Pages

Repo

我正在尝试在田野中向上（向北）、向下（向南）、向左（向西）和向右（向东）移动一头牛（每次移动 10 像素）。在我收集了一组基本方向后，我设置了奶牛的 style.left 和 style.up 并根据数组中的方向旋转它。

如何让奶牛先向一个方向旋转，然后再向它移动，然后再向另一个方向旋转，然后再向它移动？现在，假设数组中有 3 个北方向：奶牛将移动整个 30 像素而不是每次移动 10 像素。如果有东西方向和南方向，则牛不会向东旋转并向东移动 10px，然后向南旋转并向南移动 10px。奶牛在旋转和移动之前接收到一系列方向是很重要的。

const cow = {
   directions: ['North', 'East'],
   addDirection(direction) {
      this.directions.push(direction);
   }
};

let num = 0; // will increment or decrement by 90 or 180
let key = null; // keep track of keys to determine how much to increment or decrement
cow.directions.forEach(direction => {
   switch(direction) {
      case 'North':
         if(!key) {
            cowEl.style.transform = 'rotate(0deg)';
         }
         else if(key === 'East') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'West') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'South') {
            num -= 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // North
         // setTimeout(() => cowEl.style.top = parseInt(cowEl.style.top) - moveBy + 'px', 1000);
         cowEl.style.top = parseInt(cowEl.style.top) - moveBy + 'px';
      break;

      case 'East':
         if(!key || key === 'North') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'South') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'West') {
            num -= 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // East
         // setTimeout(() => cowEl.style.left = parseInt(cowEl.style.left) + moveBy + 'px', 2000);
         cowEl.style.left = parseInt(cowEl.style.left) + moveBy + 'px';
      break;

      case 'South':
         if(!key || key === 'North') {
            num += 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'East') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }   
         else if(key === 'West') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // South
         cowEl.style.top = parseInt(cowEl.style.top) + moveBy + 'px';
      break;

      case 'West':
         if(!key || key === 'North') {
            num -= 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'South') {
            num += 90;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         else if(key === 'East') {
            num += 180;
            cowEl.style.transform = `rotate(${num}deg)`;
         }
         key = direction; // West
         cowEl.style.left = parseInt(cowEl.style.left) - moveBy + 'px';
      break;
   }   
});

【问题讨论】：

请至少添加您的相关代码
您使用的是 CSS 动画还是 Javascript + 计时？请阅读 [link]stackoverflow.com/help/minimal-reproducible-example，因为如果我们看不到您是如何尝试实现的，我们只会猜测解决方案。
我已经添加了代码。

标签： javascript html css css-position execution

【解决方案1】：

有一种简单的方法可以在编码中标注方向。以下是您应该如何标注方向：

北{x:0, y:1}
南{x:0, y:-1}
东{x:1, y:0}
西{x:-1, y:0}

我不知道具体的，但这是我通常的做法。现在，如果您需要制作一系列特定方向：示例：[北、东、南、北、西] 您将使用如下符号来执行此操作： [{x:0, y:1}, {x:1, y:0}, {x:0, y:-1}, {x:0, y:1}, {x:-1, y:0}]

获得数组后，您可以轻松地使用array.forEach() 函数循环所有方向并调用函数。在循环内部，您可以创建一个 if else 案例，这将帮助您旋转奶牛以及在这些特定方向上移动它。希望这个答案可以帮助您制定逻辑！如果是，请投票支持此答案以帮助其他人找到此答案。

【讨论】：

【解决方案2】：

使用我的第一个答案中的符号，您只需将特定的 X 和 Y 值设置为牛的当前坐标即可使其移动。例如：设牛的当前坐标为{x:10, y:9} 然后让它向北将北的符号值添加到坐标中。北的符号是{x:0, y:1} 将 0 添加到 x 将得到 x = 10，将 1 加到 y 将得到 y = 10。所以现在牛已经搬到了北方！用新坐标{x:10, y:10}

【讨论】：