Что я делаю не так в этом обнаружении столкновений? - PullRequest
Новая
       20

Что я делаю не так в этом обнаружении столкновений?

0 голосов
/ 03 июня 2019

Я все еще новичок в JavaScript, я провел всю ночь, читая об обнаружении столкновений между двумя кругами, и придумал следующее.

Вы найдете расстояние мяча с этой формулой: 

Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y - y2, 2));

тогда вы. Если сумма радиусов больше или равна расстоянию, круги сталкиваются, я пытался сделать это в своем коде, но, похоже, это не работает для меня. Может кто-нибудь сказать мне, что я делаю не так? 

var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var x2 = canvas.width / 2;
var y = canvas.height - 20;
var y2 = 20;
var ballRadius = 20;
var ballRadius2 = 20;
var dx = 2;
var dy = -2;
var dx2 = 2;
var dy2 = 2;
var distance = Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y - y2, 2));

function drawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();
}

function drawBall2() {
  ctx.beginPath();
  ctx.arc(x2, y2, ballRadius2, 0, Math.PI * 2);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  drawBall();
  drawBall2();
  x += dx;
  y += dy;
  x2 += dx2;
  y2 += dy2
  if (x && x2 > canvas.width - ballRadius || x && x2 < ballRadius) {
    dx = -dx;
    dx2 = -dx2;
  }
  if (y && y2 > canvas.height - ballRadius || y && y2 < 0) {
    dy = -dy;
    dy2 = -dy2;
  }
  if (ballRadius + ballRadius2 >= distance) {
    alert("collision");
  }

}
setInterval(draw, 10);
<canvas id="canv" width="512" height="512"></canvas>

Я хочу знать, что я делаю неправильно с расчетами.

1 Ответ

0 голосов
/ 03 июня 2019

С вашими вычислениями все в порядке - проблема в том, что вы рассчитываете расстояние между двумя вашими шарами только один раз , прежде чем вы даже начнете интервал. Расстояние должно пересчитываться непрерывно в функции обратного вызова вашего setinterval. В противном случае вы просто сравниваете фиксированное число - это расстояние между двумя шарами при запуске.

Вот пример: 

var canvas = document.getElementById("canv");
var ctx = canvas.getContext("2d");
var x = canvas.width / 2;
var x2 = canvas.width / 2;
var y = canvas.height - 20;
var y2 = 20;
var ballRadius = 20;
var ballRadius2 = 20;
var dx = 2;
var dy = -2;
var dx2 = 2;
var dy2 = 2;
var distance = Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y - y2, 2));

function drawBall() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.beginPath();
  ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
  ctx.fillStyle = "green";
  ctx.fill();
  ctx.closePath();
}

function drawBall2() {
  ctx.beginPath();
  ctx.arc(x2, y2, ballRadius2, 0, Math.PI * 2);
  ctx.fillStyle = "blue";
  ctx.fill();
  ctx.closePath();
}

function draw() {
  drawBall();
  drawBall2();
  x += dx;
  y += dy;
  x2 += dx2;
  y2 += dy2
  if (x && x2 > canvas.width - ballRadius || x && x2 < ballRadius) {
    dx = -dx;
    dx2 = -dx2;
  }
  if (y && y2 > canvas.height - ballRadius || y && y2 < 0) {
    dy = -dy;
    dy2 = -dy2;
  }
  distance = Math.sqrt(Math.pow(x - x2, 2) + Math.pow(y - y2, 2));
  if (ballRadius + ballRadius2 >= distance) {
    console.log("collision");
  }

}
setInterval(draw, 50);
<canvas id="canv"></canvas>
...