Почему ракеты не удаляются?

Question

[zlodiak]

Я написал простейший игровой скрипт. Два игрока перестреливаются ракетами. Если ракета попадает в игрока, то уменьшается energy игрока.

JSFIDDLE

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

Вот проблемный кейс:
1. левый игрок подвинулся на 4 шага вверх
2. левый игрок выпустил ракету
3. эта ракета пролетела всю длину экрана и вышла за пределы экрана(тут мой скрипт при помощи splice удаляет ракету из массива ракет)
4. видно, что energy правого игрока не изменилась
5. правый игрок тоже совершает 4 шага вверх
6. в результате energy правого игрока уменшилась(хотя ракеты на этом месте нет)

Помогите пожалуйста починить скрипт.

Клавиши управления: q, a, z, w, s, x

Answer 1

[0xD34F]

ракета пролетела всю длину экрана и вышла за пределы экрана(тут мой скрипт при помощи splice удаляет ракету из массива ракет)

Не удаляет. Нет у вас там кода, который такое делает. Есть код отвечающий за перемещение - с проверкой достижения границы экрана, и никакой ветки else, в которой и должно происходить удаление, там нет. Есть удаление ракеты при столкновении с кораблём. Удаления при выходе за границы экрана нет. Нет его. НЕ-ТУ.

А уж splice внутри forEach - за такое не грех и руки оборвать.

Проверяем, не вышла ли ракета за границы элемента (левую или правую), если да - удаляем, нет - двигаем:

for (let i = this.rockets.length; i--; ) {
  const rocket = this.rockets[i];

  if (rocket.type === 'right' && this._isCollideFlyLeft(rocket)) {
    this.flyLeft.energy -= 10;
    this.rockets.splice(i, 1);
  } else if (rocket.type === 'left' && this._isCollideFlyRight(rocket)) {
    this.flyRight.energy -= 10;
    this.rockets.splice(i, 1);
  } else if (
    rocket.xCoord + rocket.width >= this.fieldEl.offsetWidth ||
    rocket.xCoord <= 0
  ) {
    this.rockets.splice(i, 1);
  } else {
    rocket.move();
  }
}

Comments

[zlodiak]

splice внутри forEach нельзя использовать только по соображениям производительности?..

[0xD34F]

zlodiak, допустим, есть такой код:

[ 1, 2, 3, 4, 5, 6, 7, 8, 9 ].forEach((n, i, arr) => {
  console.log(n);
  if (n & 1) {
    arr.splice(i, 1);
  }
});

Обходим массив, выводим в консоль каждый элемент... Постойте-ка, а куда подевались чётные элементы? - 1 выводится, а 2 нет, 3 - да, 4 - снова нет, и т.д.

Элемент удалили, а внутренний счётчик forEach'a сделал +1 - так что следующий элемент после удалённого пропускается. Такая вот неприятность. Хотите делать splice при обходе массива - обходите массив вручную, без forEach'ей. Лучше - от конца к началу, так будет проще. Ну или придётся следить, когда увеличивать счётчик, а когда нет.

[zlodiak]

0xD34F, спасибо

Answer 2

[Святослав]

Необходимо добавить в условие передвижения ракет условие их уничтожения
Например, вот так

if (rocket.type === "left") {
  if (rocket.xCoord < parseInt(this.fieldEl.style.width)) {
    rocket.move();
  } else if (rocket.xCoord === parseInt(this.fieldEl.style.width)) {
    this.rockets.splice(index, 1);
    return;
  }
}

if (rocket.type === "right") {
  if (rocket.xCoord > 0) {
    rocket.move();
  } else if (rocket.xCoord === 0) {
    this.rockets.splice(index, 1);
    return;
  }
}