Question

我不愿意承认这一点，但是我非常迷恋刚刚开始流血的游戏。

这个概念真的很简单，我有一个三角形要指向鼠标的位置。我自然会在p5.js中使用atan2函数，因为建议将其用于此类任务。我知道我正在计算错误旋转的数量，我希望它通过三角形的中点旋转，但将笔尖指向鼠标。如果有人可以指导我逐步了解其背后的数学原理，那么我将不胜感激。

var player;
function setup() {
  createCanvas(400, 400);
  player = new Player();
}

function draw() {
  background(0)
  fill(255);
  player.update();
}


function Player() {
   this.pos = createVector(width/2, height/2);
   this.r = 20;
   this.direction = 0;

   this.radians = 0;
   this.update = function() {
     push();
     stroke(255);
     noFill();
     translate(this.pos.x, this.pos.y);
     this.radians = atan2(mouseY-this.pos.y, mouseX-this.pos.x);
     rotate(this.radians);
     triangle(-this.r, this.r, this.r, this.r, 0, -this.r);
     ellipse(0, 0, 20, 20);
     pop();
   }
}

Answer 1

您的计算是正确的！

您可能会丢失一个与渲染有关的次要细节：0弧度/度指向右边，而您的假设可能是绘制三角形时指向0度。

我将保持计算不变，以防万一您需要在以后的开发中将此角度用于其他游戏对象。取而代之的是，我只是将旋转偏移90度（HALF_PI）以进行渲染，以解决三角形向上倾斜而不向右倾斜0度这一事实：

rotate(this.radians + HALF_PI);

或者偏离路线，您可以更新triangle调用以绘制指向右边的三角形。

玩得开心！

试图使三角形指向鼠标

1 个答案: