javascript - 鼠标点击 Angular

Question

所以我正在创建一个打砖 block 游戏，我需要一些帮助来寻找 Angular 。

游戏几乎由方 block 组成，当被击中时，会让你失去 1 点生命值。游戏的重点是用球击打方 block ，在它们到达底部之前将其打破。如果球撞到墙壁或障碍物，其轨迹就会相反。

我希望用户能够单击 html Canvas 中的某人。然后，从 Canvas 底部屏幕中心开始的球将遵循该 Angular 。换句话说，用户将单击，球将移动到该位置，然后继续移动，直到击中某物。

我这里有一些代码，但它可能对如何实现 Angular 没有帮助。

   function animate(callback) {
  window.requestAnimationFrame(function() {
    window.setTimeout(callback, 1000/60);
  });
}

// canvas
  var canvas = document.getElementById('canvas');
  var context = canvas.getContext('2d');

// variables
var ballList = [];
var maxBalls = 1;
var checkAmount = 0;
var interval;
// onload/refresh/update/render
window.onload = function() {
  refresh();
}

function refresh() {
  update();
  render();
  animate(refresh);
}

function update() {
  document.addEventListener("click", spawn);
  for(var i = 0; i < ballList.length; i++) {
    ballList[i].move();
  }
}

function render() {
  context.fillStyle = '#000';
  context.fillRect(0, 0, canvas.width, canvas.height);
  for(var i = 0; i < ballList.length; i++) {
    ballList[i].show();
  }
}

// ball
function Ball() {
  this.x = canvas.width / 2;
  this.y = canvas.height - 50;
  this.width = 10;
  this.height = 10;
  this.xVel = 5;
  this.yVel = -10;

  this.show = function() {
    context.fillStyle = '#fff';
    context.fillRect(this.x, this.y, this.width, this.height);
  }

  this.move = function() {
    this.x += this.xVel;

    this.y += this.yVel;
    if(this.x >= canvas.width || this.x <= 0) {
      this.xVel *= -1;
    }
    if(this.y >= canvas.height || this.y <= 0) {
      this.yVel *= -1;
    }
  }
}

function spawn(event) {
  var xVel = (event.clientX - canvas.width / 2) / 90;
  if(ballList.length < maxBalls) {
    if(checkAmount < maxBalls) {
      interval = setInterval(function() {
        ballList.push(new Ball((event.clientX)));
        checkAmount++;
        if(checkAmount > maxBalls) {
          clearInterval(interval);
          checkAmount = 0;
        }
      }, 10);
    }

  }
}

提前致谢。

Answer 1

单位向量

要将对象从一点移动到另一点，您可以使用向量。矢量只是代表方向和速度的两个数字。它可以是极坐标，因为一个数字是 Angular ，另一个数字是距离，也可以是笛卡尔坐标，将矢量表示为 x 和 y 的变化量。

笛卡尔单位向量

为此，您可以使用其中任何一个，但我更喜欢笛卡尔向量和称为单位向量的特定类型。单位向量的长度为 1 个单位。在计算机图形学中，单位通常是像素。

所以我们有一个起点

var startX = ?
var startY = ?

我们想要达到的目标

var targetX = ?
var targetY = ?

我们想要从开始到目标的单位向量，

var vectorX = targetX - startX;
var vectorY = targetY - startY;

向量的长度是两点之间的距离。这不太方便，所以我们将 x 和 y 除以长度，将其转换为单位向量

var length = Math.sqrt(vectorX * vectorX + vectorY * vectorY);
var unitVectX = vectorX / length;
var unitVectY = vectorY / length;

现在我们有了一个一像素长的单位向量。

球将在开始时开始

var ballX = startX
var ballY = startY

并且将以每秒 200 像素的速度移动(假设 60fps)

var ballSpeed = 200 / 60;

现在要移动球，只需添加单位向量乘以速度即可。好吧，直到下一帧。

 ballX += unitVectX * ballSpeed;
 ballY += unitVectY * ballSpeed;

使用笛卡尔可以很容易地从与 x 或 y 轴对齐的墙壁反弹。

if(ballX + ballRadius > canvas.width){
      ballX = canvas.width - ballRadius;
      unitVectX = - unitVectX;
}

极向量

您还可以使用极坐标。当我们使用单位向量时，极坐标单位向量只需要方向。您使用三 Angular 函数atan2

 // get the direction in radians
 var polarDirection = Math.atan2(targetY - startY, targetX - startX); 

方向是以弧度为单位的，很多人不喜欢弧度而转换成度数，但是不需要知道它朝哪个方向走，只要方向正确就可以了。记住弧度很容易。 360度是2弧度，180度是1弧度，90度是0.5。实际使用的单位是 PI(没有多少人知道 pi 的许多数字，但您不需要知道)。因此 270 度等于 1.5 弧度或数字 1.5 * Math.PI。

Angular 从 3 点钟位置(指向屏幕右侧)开始为 0 弧度或 0 度，然后顺时针 90 度在 6 点钟位置为 0.5 弧度，180 度在 6 点钟位置为 1 弧度，依此类推上。

要使用 PolarDirection 移动球，您需要使用更多三 Angular 函数。

 // do this once a frame
 ballX += Math.cos(polarDirection) * ballSpeed;
 ballY += Math.sin(polarDirection) * ballSpeed;
 // note that the cos and sin actually generate the cartesian unit vector