Javascript 如何捕获或记录对角鼠标移动？_Javascript_Events_Cursor_Mousemove_Diagonal

Javascript 如何捕获或记录对角鼠标移动？

javascript events

Javascript 如何捕获或记录对角鼠标移动？,javascript,events,cursor,mousemove,diagonal,Javascript,Events,Cursor,Mousemove,Diagonal,我基本上想移动蜘蛛对角线像一个8路移动鼠标，但我不确定这是可能的？我的想法是：如果x和y坐标同时变化，那么这就是对角线运动，对吗？我找不到关于鼠标对角移动的任何信息 HTML JS //获取游标元素，设置存储x和y位置// 让mouseCursor=document.querySelector（“光标”）； var-oldx=0； var-oldy=0； var方向=”； //听光标移动并获取页面坐标 addEventListener（“mousemove”，函数（事件）{ var yPos=e

我基本上想移动蜘蛛对角线像一个8路移动鼠标，但我不确定这是可能的？我的想法是：如果x和y坐标同时变化，那么这就是对角线运动，对吗？我找不到关于鼠标对角移动的任何信息

HTML

//获取游标元素，设置存储x和y位置//
让mouseCursor=document.querySelector（“光标”）；
var-oldx=0；
var-oldy=0；
var方向=”；
//听光标移动并获取页面坐标
addEventListener（“mousemove”，函数（事件）{
var yPos=event.pageY；
var xPos=event.pageX；
//将光标设置为与页面坐标匹配
mouseCursor.style.top=yPos+“px”；
mouseCursor.style.left=xPos+“px”；
//确定光标移动的方向
如果（xPos>oldx）{
direction=“right”；
oldx=xPos；
mouseCursor.style.transform=“旋转（90度）”；
}否则如果（xPosoldy）{
方向=“向下”；
oldy=yPos；
mouseCursor.style.transform=“旋转（180度）”；
}否则如果（yPos<旧版）{
方向=“向上”；
oldy=yPos；
mouseCursor.style.transform=“旋转（0度）”；
}
控制台日志（方向）；

链接到我的代码笔示例

最简单的回答是，是的，如果x和y坐标都在变化，那么你是在以某种对角线的方式移动，因此你没有完全上下或完全左右移动。希望这是有意义的。

更改了代码（可能是缩短这一点的更好方法？）

if（xPos>oldx&&yPosoldx&&yPos>oldy）{
方向=“完全正确”；
oldy=yPos；
oldx=xPos；
mouseCursor.style.transform=“旋转（135度）”；
}else if（xPosoldy）{
方向=“左下”；
oldy=yPos；
oldx=xPos；
mouseCursor.style.transform=“旋转（-135度）”；
}else if（xPos>oldx）{
direction=“right”；
oldx=xPos；
mouseCursor.style.transform=“旋转（90度）”；
}否则如果（xPosoldy）{
方向=“向下”；
oldy=yPos；
mouseCursor.style.transform=“旋转（180度）”；
}否则如果（yPos<旧版）{
方向=“向上”；
oldy=yPos；
mouseCursor.style.transform=“旋转（0度）”；
}```

我可以提供一个答案，但在我找到答案之前，先查找2D矢量数学游戏。尽管听起来可能很简单，但这些东西都很简单。这看起来有效吗？我不知道如何在注释中发布代码块）如果（xPos>oldx&&yPos

<html>

  <head>
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.15.3/css/all.css" 
  </head>

  <body>
  <div class="spiderweb"><i id="cursor" class="fas fa-spider"></i></div>
  </body>

</html>

body {
  cursor: none;
  display:flex;
  justify-content:center;
  align-items:center;
}

.spiderweb {
  width: 400px;
  height: 400px;
  background: aliceblue;
  background: url(https://cdn.pixabay.com/photo/2016/03/31/20/12/spider-web-1295590_1280.png);
  background-repeat: none;
  background-size: cover;
}

.fa-spider {
  font-size: 2.5em;
}

#cursor {
  position: absolute;
/*   transition-duration: 0.1s; */
  top: 0px;
  left: 0px;
  filter: drop-shadow(1px 2px 2px rgba(0, 0, 0, 0.4));
}

//Get cursor element , set store x and y position//
let mouseCursor = document.querySelector("#cursor");
var oldx = 0;
var oldy = 0;
var direction = "";

//listen to cursor move and get page coordinates
window.addEventListener("mousemove", function (event) {
  var yPos = event.pageY;
  var xPos = event.pageX;
  //set cursor to match page coordinates
  mouseCursor.style.top = yPos + "px";
  mouseCursor.style.left = xPos + "px";
  //determine direction cursor is moving
  if (xPos > oldx) {
    direction = "right";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(90deg)";
  } else if (xPos < oldx) {
    direction = "left";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-90deg)";
  } else if (yPos > oldy) {
    direction = "down";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(180deg)";
  } else if (yPos < oldy) {
    direction = "up";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(0deg)";
  }

  console.log(direction);

if (xPos > oldx && yPos < oldy) {
    direction = "upright";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(45deg)";
  } else if (xPos < oldx && yPos < oldy) {
    direction = "upleft";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-45deg)";
  } else if (xPos > oldx && yPos > oldy) {
    direction = "downright";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(135deg)";
  } else if (xPos < oldx && yPos > oldy) {
    direction = "downleft";
    oldy = yPos;
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-135deg)";
  } else if (xPos > oldx) {
    direction = "right";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(90deg)";
  } else if (xPos < oldx) {
    direction = "left";
    oldx = xPos;
    mouseCursor.style.transform = "rotate(-90deg)";
  } else if (yPos > oldy) {
    direction = "down";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(180deg)";
  } else if (yPos < oldy) {
    direction = "up";
    oldy = yPos;
    mouseCursor.style.transform = "rotate(0deg)";
  }```