Не удалось загрузить ресурсы на веб-сервере Apache, запрашивающем файлы без расширения файла. ⇐ Apache

[Anonymous]

Я пытаюсь внедрить небольшую базовую игру тетрис, которую я нашел на github, на свой веб-сервер, но изображения плиток не загружаются в игру, а в консоли пишет, что не удалось загрузить ресурс 404, не найден, и он описывает файл он ищет цвета, которые я указал в массиве в следующем коде, но не имеет расширений .png, хотя массив явно должен запрашивать источник изображения из папки ресурсов с расширениями .png

Кроме того, он загружает один цвет, синий, но когда я обновляю страницу, чтобы попытаться получить другой цвет, он говорит, что, например, не удалось найти файл «оранжевый»

Файловая структура находится в htdocs Apache, служба которого работает на локальном хосте, и выглядит следующим образом:
[*]Htdocs [*]index.html (со ссылкой на tetris.html) [*]tetris.html [*]tetris.js [*]tetris.css [*]папка ресурсов (включая все цвета в формате .png, например blue.png)
window.onload = () => { константа фон = document.getElementById("фон"), ScoreLbl = document.getElementById("оценка"), linesLbl = document.getElementById("lines"), холст = document.getElementById("game-canvas"), ctx = Canvas.getContext("2d"); let audio = new Audio("resources/music.mp3"); класс Тетромино { static COLORS = [".resources/blue.png", ".resources/green.png", ".resources/yellow.png", ".resources/red.png", ".resources/orange.png", " .resources/light-blue.png", ".resources/purple.png"]; статический BLOCK_SIZE = 28; статическая ЗАДЕРЖКА = 400; статический DELAY_INCREASED = 5; конструктор (xs, ys, цвет = ноль) { это.х = хз; this.y = ys; this.length = xs.length; this.color = цвет; this.img = новое изображение(); // Настраиваем обещание отслеживать загрузку изображений this.imgLoaded = новое обещание ((разрешить, отклонить) => { this.img.onload = разрешить; this.img.onerror = отклонить; }); если (цвет!== ноль) { this.img.src = Тетромино.ЦВЕТА[цвет]; console.log(this.img.src); console.log((TETROMINOES.COLORS[цвет])); } } обновление (updFunc) { for (пусть я = 0; я < this.length; ++i) { ctx.clearRect( this.x * Тетромино.BLOCK_SIZE, this.y * Тетромино.BLOCK_SIZE, Тетромино.BLOCK_SIZE, Тетромино.BLOCK_SIZE ); updFunc (я); } это.рисовать(); } рисовать() { если (!this.img.complete) { this.img.onload = () => this.draw(); возвращаться; } // Распечатываем текущий тетромин for (пусть я = 0; я < this.length; ++i) { ctx.drawImage( это.img, this.x * Тетромино.BLOCK_SIZE, this.y * Тетромино.BLOCK_SIZE, Тетромино.BLOCK_SIZE, Тетромино.BLOCK_SIZE ); } } сталкивается (checkFunc) { for (пусть я = 0; я < this.length; ++i) { const {x, y} = checkFunc (я); if (x < 0 || x >= FIELD_WIDTH || y < 0 || y >= FIELD_HEIGHT || FIELD[y][x] !== false) вернуть истину; } вернуть ложь; } слияние () { for (пусть я = 0; я < this.length; ++i) { ПОЛЕ[this.y][this.x] = this.color; } } вращать() { константа maxX = Math.max(...this.x), minX = Math.min(...this.x), minY = Math.min(...this.y), пх = [], ню = []; if (!this.collides(i => { nx.push(maxX + minY - tetromino.y); ny.push(tetromino.x - minX + minY); return {x: nx, y: ny}; })) { это.обновление(я => { this.x[i] = nx[i]; this.y[i] = ny[i]; }); } } } константа ПОЛЯ_ШИРИНА = 10, ПОЛЕ_ВЫСОТА = 20, ПОЛЕ = Array.from({ длина: FIELD_HEIGHT }), MIN_VALID_ROW = 4, ТЕТРОМИНО = [ новое Тетромино([0, 0, 0, 0], [0, 1, 2, 3]), новое Тетромино([0, 0, 1, 1], [0, 1, 0, 1]), новое Тетромино([0, 1, 1, 1], [0, 0, 1, 2]), новое Тетромино([0, 0, 0, 1], [0, 1, 2, 0]), новое Тетромино([0, 1, 1, 2], [0, 0, 1, 1]), новое Тетромино([0, 1, 1, 2], [1, 1, 0, 1]), новое Тетромино([0, 1, 1, 2], [1, 1, 0, 0]) ]; пусть тетромино = ноль, задерживать, счет, линии; (настройка функции() { холст.стиль.топ = Тетромино.BLOCK_SIZE; Canvas.style.left = Тетромино.BLOCK_SIZE; ctx.canvas.width = FIELD_WIDTH * Tetromino.BLOCK_SIZE; ctx.canvas.height = FIELD_HEIGHT * Tetromino.BLOCK_SIZE; // Масштабируем фон константный масштаб = Tetromino.BLOCK_SIZE/13,83333333333; фон.стиль.ширина = масштаб * 166; фон.стиль.высота = масштаб * 304; // Смещаем каждый блок до середины ширины таблицы const middle = Math.floor(FIELD_WIDTH/2); for (const t ТЕТРОМИНО) t.x = t.x.map(x => x + middle); перезагрузить(); рисовать(); })(); функция сброса() { // Делаем ложными все блоки FIELD.forEach((_, y) => FIELD[y] = Array.from({ length: FIELD_WIDTH }).map(_ => false)); ctx.clearRect(0, 0, холст.ширина, холст.высота); задержка = Тетромино.DELAY; оценка = 0; линии = 0; } функция playMusic() { аудио.играть(); } функция рисования() { если (тетромино) { // Столкновение? if (tetromino.collides(i => ({ x: tetromino.x[i], y: tetromino.y[i] + 1 }))) { тетромино.слияние(); // Готовимся к новому тетромино тетромино = ноль; // Проверка завершенных строк пусть завершенные строки = 0; for (пусть y = FIELD_HEIGHT - 1; y >= MIN_VALID_ROW; --y) if (FIELD[y].every(e => e !== false)) { for (let ay = y; ay >= MIN_VALID_ROW; --ay) ПОЛЕ[ay] = [...ПОЛЕ[ay - 1]]; ++завершенныестроки; // Сохраняем ту же строку ++у; } если (завершенные строки) { // Печатаем снова таблицу ctx.clearRect(0, 0, холст.ширина, холст.высота); for (let y = MIN_VALID_ROW; y блок!== false)) { alert("Игра окончена! \n \nScore: "+ счет + "\nЛинии очищены: " + линии); перезагрузить(); } } } еще tetromino.update(i => ++tetromino.y[i]); } // Ни одно тетромино не сработало еще { счетLbl.innerText = оценка; linesLbl.innerText = линии; // Создаём случайное тетромино тетрамино = (({ x, y }, цвет) => новое Тетромино([...x], [...y], цвет) )( ТЕТРОМИНО[Math.floor(Math.random() * (ТЕТРОМИНО.длина - 1))], Math.floor(Math.random() * (Тетромино.ЦВЕТА.длина - 1)) ); тетромино.рисовать(); } setTimeout (рисовать, задержка); } // Двигаться window.onkeydown = событие => { воспроизводить музыку(); переключатель (event.key) { случай «Стрелка влево»: if (!tetromino.collides(i => ({ x: tetromino.x[i] - 1, y: tetromino.y[i] }))) тетромино.обновление(я => --tetromino.x[i]); перерыв; случай «СтрелкаВправо»: if (!tetromino.collides(i => ({ x: tetromino.x[i] + 1, y: tetromino.y[i] }))) tetromino.update(i => ++tetromino.x[i]); перерыв; случай «Стрелка вниз»: задержка = Тетромино.DELAY / Тетромино.DELAY_INCREASED; перерыв; случай " ": тетромино.поворот(); перерыв; случай «СтрелкаВверх»: тетромино.поворот(); перерыв; } } window.onkeyup = событие => { если (event.key === "Стрелка вниз") задержка = Тетромино.DELAY; } } Я пытался загрузить файл тетрис и ожидал, что в игру можно будет играть (раньше это работало, но это было не на Apache, а на веб-сервере esp32, где я разместил файл), но после долгих поисков неполадок единственный цвет, который был загрузка была синей