[JS] Помогите исправить баг!
Есть условие, что когда у луча позиция Y будет = 300, появится новый луч, и так для каждого. Я создаю лучи в массиве. Проблема в том, что лучи должны появляться постепенно, но новые лучи добавляются в массив ПОСТОЯННО. Как это исправить? Заранее спасибо.
const cvs = document.getElementById('canvas');
const ctx = cvs.getContext('2d');
ctx.rect(0, 0, 600, 600);
ctx.stroke()
var player = {
x: 300,
y: cvs.height - 51
}
document.addEventListener('keydown', function(e) {
if (e.code == 'KeyD') {
ctx.clearRect(player.x, player.y, 50, 50)
player.x += 50
}
else if (e.code == 'KeyA') {
ctx.clearRect(player.x, player.y, 50, 50)
player.x -= 50
}
})
//массив с лучами
var enem = [];
enem[0] = {
x: Math.floor(Math.random() * 12 + 1),
y: 0
}
function drawGame() {
ctx.fillStyle = 'orange';
ctx.fillRect(player.x, player.y, 50, 50);
if (player.x >= 600) {
player.x = 550
}
else if (player.x <= 1) {
player.x = 1
}
//рисую лучи
for (let i = 0; i < enem.length; i++) {
ctx.fillStyle = 'red'
ctx.fillRect(enem[i].x, enem[i].y, 50, 50);
enem[i].y++;
ctx.clearRect(enem[i].x, enem[i].y, 50, 50);
//добавляю новый луч
if (enem[i].y == 300) {
enem.push({
x: Math.floor(Math.random() * 12 + 1) * 50,
y: 0
})
}
}
requestAnimationFrame(drawGame)
}
setInterval(drawGame, 100) 1. Функция drawGame, по логике, не должна реализовывать какую-то игровую логику. Она должна отрисовывать игровую модель, а модель следует обновлять отдельно.
2. Зачем тебе setInterval(drawGame, 100), если у тебя в конце каждого вызова уже указан requestAnimationFrame(drawGame). Сдается мне, что ты перерисовываешь кадр всё чаще и чаще. Попробуй вместо setInterval выполнить однократно requestAnimationFrame(drawGame).
2. У тебя цикл по всему массиву. Если у тебя несколько элементов с координатами 300, тогда для каждого будет добавлен ещё один "элемент". С каждым разом число лучей будет удваиваться. А вместе с setInterval я даже не знаю.