使对象面向鼠标光标

如何解决使对象面向鼠标光标

我是 JavaScript 的初学者。 我正在尝试制作一个非常基本的 2d 自上而下的射击游戏，我想在其中旋转我的播放器以拖动鼠标光标。 我已经看到了有关此的其他问题，但没有一个对我有用。 请告诉一个方法来做到这一点（我以前从未制作过这种游戏。） 我附上了我的代码片段，我必须向鼠标旋转。（“player1 变量”） 免责声明：我是初学者（以为我会提到）

//variables
var player1;
var gun1;
var gun2;


function preload(){

}

function setup(){
    //creating sprites
    player1 = createSprite(200,200,30,30)
    gun = createSprite(player1.x,player1.y-20,5,30)
    gun.shapeColor = "black"
}

function draw(){
  canvas = createCanvas(displayWidth-20,displayHeight-120);
   background("#32CD32");
   gun.x = player1.x;
   gun.y = player1.y-15;
   // functions to move
   //up
  if(keyDown("up")){
    player1.y = player1.y - 5;
  }
  //down
  if(keyDown("down")){
    player1.y = player1.y + 5;
  }
  //right
  if(keyDown("right")){
    player1.x = player1.x + 5;
  }
  //left
  if(keyDown("left")){
    player1.x = player1.x - 5;
  }

 

drawSprites();
} 

解决方法

您可以添加一个 mousemove event listener 来获取鼠标的坐标。从给定的文档：

myPics.addEventListener('mousemove',e => {
    x = e.offsetX;
    y = e.offsetY;
});

然后，您当然需要知道当前玩家的位置，但您已经在 player 变量中知道了这一点。

你现在可以得到 x 和 y 的差异，因为你们都知道鼠标和玩家的位置，这给了你一个三角形。您可以使用 pythagoras theorem 计算三角形的角度，然后根据您计算的角度（或者可能具有角度，因为您希望玩家的中心位于角度的中心）旋转玩家。

你真的应该尝试从那里自己解决它，因为你只能通过反复试验和阅读文档并尝试自己理解来提高你的编码技能。不过，我希望我可以向您展示一个大致的方向。