Не своевременное удаление частиц в анимации

Question

Я делаю с помощью canvas анимацию с потоком из 0 и 1. Цифры должны исчезать за пределами экрана, но почему-то некоторые исчезают даже не долетев до границ экрана, хотя я поставил проверку с запасом. Когда пробую выводить высоту, пишет всё правильно, а рисование как будто идёт не так как должно. Кто знает, пожалуйста подскажите в чём дело.

Вот код.

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");

const width = 1300;
const height = 650;

canvas.width = width;
canvas.height = height;

var inRad = function(angle) {
  return angle * Math.PI / 180;
};

//анимация
let arr = [];
let timeCtr = 0;
let speed = 2;

const animation = function() {
  ctx.clearRect(0, 0, width, height);

  if (timeCtr === 0) {
    let object = {
      x: Math.random() * (width + 600) - 600,
      y: -10,
      angle: Math.random() * 45,
      rotate: 0,
      nmb: String(Math.floor(Math.random() * 2))
    }
    object.dx = Math.cos(inRad(object.angle)) * speed;
    object.dy = Math.sin(inRad(object.angle)) * speed;
    arr.push(object);
    timeCtr = 10;
  }

  timeCtr--;

  for (var i = 0; i < arr.length; i++) {
    arr[i].x += arr[i].dx;
    arr[i].y += arr[i].dy;

    if (Math.floor(arr[i].y) > height + 40) {
      arr.splice(arr[i], 1);
    }
  }

  for (var i = 0; i < arr.length; i++) {
    ctx.save();
    ctx.translate(arr[i].x, arr[i].y);
    ctx.rotate(inRad(arr[i].rotate));
    arr[i].rotate++;
    ctx.font = "20px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "White";
    ctx.shadowColor = "White";
    ctx.shadowBlur = 15;
    ctx.fillText(arr[i].nmb, 0, 0);
    ctx.restore();
  }

  requestAnimationFrame(animation);
};

window.onload = animation;

body {
  text-align: center;
}

canvas {
  background-color: black;
}

<canvas id="canvas"></canvas>

Answer 1

Можно проверить индекс элемента, который удаляется каждый раз:

console.log(arr.indexOf([...arr].splice(arr[i],1)[0])); // Всегда 0

Поэтому arr.splice(arr[i], 1); просто заменил на arr.splice(i, 1); и вроде все работает:

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext("2d");

const width = 1300;
const height = 650;

canvas.width = width;
canvas.height = height;

var inRad = function(angle) {
  return angle * Math.PI / 180;
};

//анимация
let arr = [];
let timeCtr = 0;
let speed = 2;

const animation = function() {
  ctx.clearRect(0, 0, width, height);

  if (timeCtr === 0) {
    let object = {
      x: Math.random() * (width + 600) - 600,
      y: -10,
      angle: Math.random() * 45,
      rotate: 0,
      nmb: String(Math.floor(Math.random() * 2))
    }
    object.dx = Math.cos(inRad(object.angle)) * speed;
    object.dy = Math.sin(inRad(object.angle)) * speed;
    arr.push(object);
    timeCtr = 10;
  }

  timeCtr--;

  for (var i = 0; i < arr.length; i++) {
    arr[i].x += arr[i].dx;
    arr[i].y += arr[i].dy;

    if (Math.floor(arr[i].y) > height + 40) {
      arr.splice(i, 1);
    }
  }

  for (var i = 0; i < arr.length; i++) {
    ctx.save();
    ctx.translate(arr[i].x, arr[i].y);
    ctx.rotate(inRad(arr[i].rotate));
    arr[i].rotate++;
    ctx.font = "20px Arial";
    ctx.textAlign = "center";
    ctx.textBaseline = "middle";
    ctx.fillStyle = "White";
    ctx.shadowColor = "White";
    ctx.shadowBlur = 15;
    ctx.fillText(arr[i].nmb, 0, 0);
    ctx.restore();
  }

  requestAnimationFrame(animation);
};

window.onload = animation;

body {
  text-align: center;
}

canvas {
  background-color: black;
}

<canvas id="canvas"></canvas>

БЛОГ НА HUSL

Не своевременное удаление частиц в анимации

Ответы (1 шт):