如何在 p5.play 中将精灵朝向鼠标旋转?

时间:2021-03-25 09:21:05

标签: javascript rotation p5.js atan2 p5.play

我正在使用 p5.play(p5) 库制作一款自上而下的射击游戏。我想将玩家精灵朝向鼠标旋转。使用 Atan2 函数 (https://p5js.org/reference/#/p5/atan2)。我设法使用它旋转图像。但是当我尝试旋转精灵时,旋转根本不正确。我该如何解决这个问题?

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

function preload(){
 crosshair = loadImage("crosshairmouse.png")
 
}

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;
  }

push()
imageMode(CENTER)
  translate(width / 2, height / 2);
  let a = atan2(mouseY - height / 2, mouseX - width / 2);
  rotate(a);
  //image(crosshair,40,40)
  player1.rotation = a;
pop()

 

drawSprites();
} 

0 个答案:

没有答案