Враги Space Invaders не двигаются ⇐ CSS

[Anonymous]

Я пытаюсь заставить врагов в Space Invaders двигаться в соответствии с механикой игры, но они либо не двигаются, либо ломают построенную мной формацию 3х3 и просто двигаются как сумасшедшие

класс Inimigo { конструктор() { это.Селеторес(); this.enemies = []; this.framesPerDirection = 16; this.currentFrame = 0; this.totalFrames = 35; this.enemyWidth = 128; this.enemyHeight = 128; this.enemyRowCount = 3; this.enemyColumnCount = 3; this.RenderX = 55 это.RenderY = 35 this.enemyX = 0 this.enemyY = 0 это.srcX = 0; это.srcY = 0; this.movementState = 'andarDireita'; это.createEnemies() } Селеторес() { this.canvas = document.querySelector('canvas'); } createEnemies() { for (let c = 0; c < this.enemyColumnCount; c++) { this.enemies[c] = []; for (let r = 0; r < this.enemyRowCount; r++) { this.enemies[c][r] = { х: 0, й: 0, статус: 1, motionState: this.movementState }; } } console.log("враги", this.enemies) } Animate(кадры, спрайты) { константный интервал = 20; const passInterval = интервал кадров % === 0; если (passInterval) { этот.currentFrame++; if (this.currentFrame >= this.framesPerDirection) { this.currentFrame = 0; } } this.srcX = (this.currentFrame % this.framesPerDirection) * this.enemyWidth; this.Drawing(спрайты); } Играть(враг) { this.movementState = враг.movementState const CanvasWidth = this.canvas.width; // Ларгура на холсте // Логика для перемещения по направлению if (this.movementState === 'andarDireita') { this.enemyX += 0,1; // Вы можете настроить необходимую скорость console.log(this.enemyX) враг.x = этот.enemyX } // Логика для перемещения к задаче, когда вы завершаете работу с холстом if (this.movementState === 'andarDireita' && враг.x >= CanvasWidth - this.enemyWidth) { враг.movementState = 'andarEsquerda'; } // Логика для перемещения в заданную сторону if (this.movementState === 'andarEsquerda') { враг.х -= 5; // Подгоняем необходимую скорость } // Логика для перемещения по направлению, когда переходим к границе холста if (this.movementState === 'andarEsquerda' && враг.x = ColidPlayer) { вернуть истину; } еще { вернуть ложь; } } } новый Инимиго(); * { маржа: 0; заполнение: 0; размер коробки: граница-коробка; } ч1 { выравнивание текста: по центру; поле внизу: 20 пикселей; пробел: nowrap; переполнение: скрыто; переполнение текста: многоточие; максимальная ширина: 100%; размер шрифта: 5vw; } тело { минимальная высота: 100vh; дисплей: гибкий; оправдание-содержание: центр; выровнять-элементы: по центру; гибкое направление: столбец; } холст { дисплей: блок; граница: 1 пиксель, сплошная черная; маржа: 0 авто; } #Тела { ширина: расчет (135vw/2); высота: расчет (165vh/2);

Мне нужен был способ обновить этот код, чтобы они могли двигаться в соответствии с предложением игры (сначала переместиться вправо, после удара о край холста они опускаются на 10 пикселей вниз и перемещаются влево, после удара о край холста они опускаются еще на 10 пикселей и перемещаются вправо и так далее)

Я использую HTML (с холстом), CSS и JavaScript с классами и объектами