До сих пор ты открывал HTML двойным щелчком. Теперь запустим ту же «Память» через локальный HTTP-сервер: у игры появится адрес в браузере, а загрузку каждого файла можно будет проверить как обычный запрос. Найдём намеренно сломанный путь и запустим этим способом ещё одну игру.
Нужна работающая игра «Память» из прошлого занятия. Её правила здесь не переписываем. Результат: страница открывается по http://127.0.0.1:8000/, HTML, CSS и JS загружаются, карточки работают. Устанавливать редактор или Node.js дополнительно не требуется; для основного сценария настроим Python.
В папках start и final лежит готовая «Память». В step-01 изменено название вкладки, в broken-path специально допущена ошибка в пути к файлу, а в exercise находится ещё одна игра с ошибкой для самостоятельного поиска. Распакуй архив целиком, а решение открывай после своей попытки. Инструкция по запуску есть в просмотрщике и архиве.
Скачать ZIPЧем запуск через HTTP отличается от открытия файла
При двойном щелчке адрес начинается с file: браузер читает файл с диска. При HTTP браузер просит сервер прислать HTML, затем отдельными запросами получает подключённые CSS и JavaScript. Наш сервер — маленькая программа на твоём же компьютере, которая отдаёт файлы выбранной папки.
Простые предыдущие игры работали с диска. Но для следующих задач с сохранением и модулями нужен один предсказуемый адрес запуска. Мы сразу договоримся использовать http://127.0.0.1:8000/. Привычка проверять реальные запросы также помогает найти отсутствующий файл вместо случайных изменений кода.
| Часть адреса | Что означает |
|---|---|
http:// | Браузер обращается к HTTP-серверу |
127.0.0.1 | Этот же компьютер, loopback-адрес |
:8000 | Порт выбранного сервера, условный номер входа |
/ | Корень папки, которую сервер раздаёт |
localhost — имя для локального компьютера. В уроках используем числовой адрес выше, чтобы не менять написание между запусками. Это не адрес для друга: на его компьютере 127.0.0.1 указывает на его собственную машину. Локальный HTTP-запуск не публикует игру в интернете.
Устанавливаем Python в Windows
Основной путь — Python Install Manager с официальной страницы Python. Скачай установщик для Windows, открой MSIX и нажми Install. После установки закрой старое окно терминала и открой новое. Такой способ описан в официальной инструкции Python для Windows.
Для команд этого урока используй PowerShell: открой его через меню «Пуск». Не вводи команды в Console браузера — это разные инструменты. Установи Python 3.14 и проверь его версию:
py install 3.14
py -3.14 --versionПервая команда скачивает среду выполнения, вторая печатает версию. Последнее число в номере версии может отличаться: оно меняется при выходе исправлений. Продолжай, когда команда версии успешно показывает Python 3.14.x. Если подходящая версия уже установлена, повторно устанавливать её не нужно.
Писать игру на Python не будем: используем его готовый модуль раздачи файлов. Дополнительные пакеты и pip-команды не нужны.
Открываем терминал в папке игры
Создай отдельную папку memory-http. Скопируй в неё три файла из start: index.html, style.css, game.js. В ней не должно оказаться ещё одной вложенной папки start вместо самих файлов. Открой memory-http в Проводнике, нажми адресную строку, введи powershell и нажми Enter. Терминал откроется в этой папке.
Проверь место, прежде чем запускать сервер:
Get-Location
Get-ChildItem -NameПервая команда показывает текущую папку, вторая — имена файлов в ней. В пути должна быть memory-http, а в списке — три файла игры. Сервер будет считать эту папку корнем. Не запускай его из общей папки документов: для разработки нужен только выбранный проект.
Запускаем сервер и открываем игру
В том же окне PowerShell выполни:
py -3.14 -m http.server 8000 --bind 127.0.0.1-m http.server запускает готовый модуль; 8000 задаёт порт; --bind 127.0.0.1 ограничивает прослушивание локальным компьютером. Сервер берёт файлы из текущей папки. Это поведение и параметры описаны в документации http.server.
Окно останется занято сообщениями сервера — оно не зависло. Оставь его открытым. В адресной строке браузера набери http://127.0.0.1:8000/. Должна появиться «Память» с шестью карточками. Открой две, проверь новую партию. В адресе должен быть HTTP, а не путь file.
Проверка корня: в index.html замени только title на Моя Память по HTTP, сохрани и обнови страницу. Название вкладки изменится. Такой пример находится в step-01. Если название не меняется, сравни папку открытого редактора с Get-Location: вероятно, ты редактируешь другую копию. Заголовок h1 на странице при изменении title остаётся прежним — это разные элементы.
После проверки можно вернуть исходный title. Final содержит исходную рабочую игру без изменения правил. Для следующего проекта важен правильный способ запуска, а не новое название.
Убеждаемся, что файлы действительно загружены
Открой DevTools через F12 и вкладку Network. На время проверки включи Disable cache, пока панель открыта, и обнови страницу. В списке найди запрос документа, style.css и game.js. У них должен быть статус 200: ресурс успешно получен. Без отключения кэша браузер может показать 304 или использование кэша; это само по себе не ошибка.
Нажми строку game.js: проверь адрес запроса и содержимое ответа. Так можно убедиться, что браузер получил именно текущий файл, а не другую копию. Фильтр по имени помогает не спутать игровой скрипт с запросом значка вкладки. Порядок работы с панелью описан в документации Chrome DevTools.
| Результат запроса | Что проверяем |
|---|---|
| 200 и ожидаемый код | Файл загрузился; если поведение неверно, ищем ошибку выполнения или правила |
| 404 | По запрошенному пути файла нет: имя, папка и регистр букв |
| Не удаётся соединиться | Запущен ли сервер, совпали ли адрес и порт |
Находим ошибку в пути к скрипту
В своей учебной копии index.html измени src="game.js" на src="games.js", сохрани и обнови. Такая копия уже дана в broken-path. Ты увидишь заголовок, но пустое поле: HTML загрузился, а скрипт не создал карточки.
Проверь гипотезу «не загрузился JS» через Network. Запрос games.js получит 404. Сравни его с реальным именем в папке: там game.js. Исправь одну ссылку в HTML, сохрани, обнови и проверь 200, появление шести карточек и кнопку новой партии. Полная замена game.js не исправляет неправильный src.
Относительная ссылка game.js ищет файл рядом с текущим документом. При корне memory-http он доступен по /game.js. Если позже перенесёшь файл в подпапку scripts, HTML должен указывать scripts/game.js. Имя, расположение и ссылка обязаны совпадать. Не делай эту дополнительную перестановку, пока основной запуск ещё не заработал.
Останавливаем и запускаем снова
Вернись в окно PowerShell с сервером и нажми Ctrl+C. Снова появится приглашение ввода команд. Уже загруженная игра может продолжать реагировать, потому что её код остался в памяти браузера; это не означает, что сервер работает. Новый запрос после остановки не получит файл.
Повтори команду запуска из той же папки и снова обнови страницу. Если хочешь открыть другой проект, сначала останови этот сервер, открой терминал в папке другого проекта, проверь путь и запусти команду там. Так будет понятно, файлы какой игры сейчас отдаёт сервер.
Запуск в macOS и Linux
Установи Python 3 по официальной инструкции для macOS или своей Unix-системы, если его нет. В терминале папки игры проверь python3 --version. Дальше используется тот же модуль, но команда начинается иначе:
python3 -m http.server 8000 --bind 127.0.0.1Проверка папки в таком терминале — знакомые pwd и ls. Адрес браузера, Network и остановка Ctrl+C остаются теми же. Отдельные инструменты сборки не требуются.
Если сервер или игра не запускаются
| Признак | Следующее действие |
|---|---|
| Команда py не найдена | Заверши установку Install Manager, закрой терминал, открой новый. Проверь официальный раздел устранения неполадок Windows, если команда всё ещё недоступна. |
| py install воспринимается как имя файла | Может запускаться старый launcher. После установки нового менеджера проверь pymanager install 3.14, затем снова команду проверки версии. Не удаляй прежние установки наугад; причина конфликта описана в официальной инструкции Windows. |
| Порт уже занят | Останови свой предыдущий сервер через Ctrl+C. Если 8000 занят другой программой, используй 8001 в команде и в адресе браузера; меняются оба места. |
| Список файлов вместо игры | В корне нет index.html или выбрана папка над проектом. Проверь Get-Location и содержимое; перезапусти сервер из папки с HTML. |
| 404 для game.js или CSS | Сравни запрошенный адрес с именем и расположением файла. Убедись, что расширение не .txt. |
| Редактирование не видно | Сохрани файл, проверь текущую папку сервера и путь редактора, обнови при открытом Network с Disable cache. |
| Страница работает, но адрес начинается file | Открыта прежняя вкладка двойного щелчка. Введи HTTP-адрес вручную и продолжай в этой вкладке. |
Самостоятельно: запусти через HTTP другую игру
Возьми ранее сделанный кликер или «Камень, ножницы, бумага». Создай отдельную папку с его тремя файлами и запусти её тем же способом. Сам выбери правильный корень и проверь в Network HTML, CSS и JS. Покажи один игровой раунд и сброс. Не копируй новую игру поверх «Памяти».
Затем открой учебную папку exercise из архива через HTTP. Это вторая игра с одной намеренной ошибкой подключения. Она выглядит иначе, хотя HTML и JS выполняются. Запиши наблюдение, найди неуспешный запрос и исправь именно причину. После исправления проверь оформление, выбор хода и новый матч.
Подсказка 1: раздели загрузку и поведение
Если кнопки есть и раунд работает, но оформление исчезло, начни с запроса CSS. Не меняй правила игры ради внешнего вида.
Подсказка 2: сравни ссылку и файл
Посмотри href у link в index.html и список файлов текущего корня. В одном из путей указано другое имя файла; Network покажет, какой адрес запросил браузер.
Разбор после собственной попытки
В exercise запрашивается theme.css, но файл называется style.css. Исправь href, обнови страницу и проверь 200. Исправленная копия находится в solutions архива. Это решение ошибки; перенос своей другой игры всё равно выполни самостоятельно.
Проверь, что ты освоил
Ты запускаешь и останавливаешь локальный сервер, показываешь его корневую папку, объясняешь адрес и порт, различаешь 200 и 404 и восстанавливаешь путь по фактическому запросу. Обе игры работают через HTTP; ты понимаешь, почему локальный адрес нельзя отправить другу как ссылку на игру.
Сохрани исправную «Память» отдельно. Для продолжения используем её базовый final и постоянный адрес http://127.0.0.1:8000/. Другой порт или имя хоста допустимы для отдельного опыта, но дальше не меняй их без причины: браузер различает такие адреса.