JavaScript Circle исчезает при столкновении - PullRequest
Новая
       6

JavaScript Circle исчезает при столкновении

0 голосов
/ 09 мая 2018

Создание небольшого 2D-симулятора физики JavaScript. Работаем по кругу, чтобы окружить столкновения прямо сейчас. Проблема в том, что когда сталкиваются 2 круга, один из них исчезает, а другой сталкивается правильно. Я думаю, это может быть связано с тем, как я обновляю и обнаруживаю столкновения.

Вот моя функция 

function animate() {
  c.fillStyle = "#000000";
  c.fillRect(container.x, container.y, container.width, container.height);
  var newVx1 = 0;
  var newVy1 = 0;

  //loop through the circles array
  for (var i = 0; i < circles.length; i++) {
    //draw the circles
    c.fillStyle = "hsl(" + circles[i].color++ + ", 100%, 100%)";
    c.beginPath();
    c.arc(circles[i].x, circles[i].y, circles[i].r, 0, Math.PI * 2, true);
    c.fill();
//check circle on circle collisions 
for (var an = 0; an < circles.length; an++) {
  if (an != i) {
    var a = circles[i].x - circles[an].x;
    var b = circles[i].y - circles[an].y;
    if (Math.sqrt(a * a + b * b) < circles[i].r + circles[an].r) {
      var xHit =
        circles[i].x * circles[an].r + circles[an].x * circles[i].r;
      var yHit =
        circles[i].y * circles[an].r + circles[an].y * circles[i].r;

      newVx1 =
        (circles[i].vx * (circles[i].mass - circles[an].mass) +
          2 * circles[i].mass[an] * circles[i].vx) /
        (circles[i].mass + circles[an].mass);
      //var temp = 0
      newVy1 =
        (circles[i].vy * (circles[i].mass - circles[an].mass) +
          2 * circles[an].mass * circles[an].vy) /
        (circles[i].mass + circles[an].mass);

      var newVx2 =
        (circles[an].vx * (circles[an].mass - circles[i].mass) +
          2 * circles[i].mass * circles[i].vx) /
        (circles[i].mass + circles[an].mass);

      var newVy2 =
        (circles[an].vy * (circles[an].mass - circles[i].mass) +
          2 * circles[i].mass * circles[i].vy) /
        (circles[i].mass + circles[an].mass);

      circles[i].vx = newVx1;
      circles[an].vx = newVx2;
      circles[i].vy = newVy1;
      circles[an].vy =newVy2;

    }
  }
}



if (
  circles[i].x - circles[i].r + circles[i].vx < container.x ||
  circles[i].x + circles[i].r + circles[i].vx >
    container.x + container.width
) {
  circles[i].vx = circles[i].bounce * -circles[i].vx;
  //circles[i].vx = -circles[i].vx;
}

if (
  circles[i].y + circles[i].r + circles[i].vy >
    container.y + container.height ||
  circles[i].y - circles[i].r + circles[i].vy < container.y
) {
  circles[i].vy = circles[i].bounce * -circles[i].vy;
  // circles[i].vx = -circles[i].vx;
}

circles[i].x += circles[i].vx;
circles[i].y += circles[i].vy;

circles[i].vy += 0.06;
//wind factor
    //circles[i].vx += .0001*circles[i].r
  }





  requestAnimationFrame(animate);
}

1 Ответ

0 голосов
/ 09 мая 2018

Обычно в Canvas, когда что-то волшебным образом исчезает, это может быть связано с тем, что данные, переданные на холст, больше не действительны.

Если вы укажете данные кругов для отладки, вы увидите, что и "x", и "vx" теперь равны NaN.

Продолжайте возвращать эту ошибку, и вы обнаружите, что NaN происходит от этой строки кода, которая содержит опечатку. 

newVx1 =
(circles[i].vx * (circles[i].mass - circles[an].mass) +
  2 * circles[i].mass[an] * circles[i].vx) /
(circles[i].mass + circles[an].mass);

Видите круги [м] .Масс [ан]? Это приведет к неопределенности, которая затем приведет к NaN.

Ваше столкновение все еще ведет себя странно, но, по крайней мере, теперь оно не исчезает. Пример

...