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

问题描述

我试图在田地中向上（北）、向下（南）、左（西）和右（东）移动一头牛（每次移动 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;
   }   
});

解决方法

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

北{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:-1,y:0}]

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

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

css-position execution html javascript