tictactoe

Многопользовательская онлайн-игра «Крестики-нолики»

Видео-демо:

Описание: Это веб-приложение задумано как онлайн-«бумага» для классической бумажной игры «Крестики-нолики». Приложение служит платформой, позволяющей играть в игру TTT, наряду с которой предусмотрена базовая функция чата для облегчения общения игроков.

Спецификация макроса:

• Онлайн-игровая доска для игры в ТТТ;
  • Игроки должны иметь возможность общаться друг с другом;
• Веб-приложение должно обеспечивать функцию нескольких комнат.

д-_-б

Инструменты и технологии:

Связь с клиентом сервера на основе протокола Socket.IO.

Клиентская сторона * :	Серверная часть:
HTML, CSS, JS (включая фреймворк SocketIO)	Фреймворки Python: Flask, Flask SocketIO.

^* элементы внешнего интерфейса доски Tic Tac Toe, вдохновленные проектом Web Dev Simplified Tic Tac Toe — функциональность для двух игроков с одной стороны

Специально для игры

• 2 игрока ( х | о );
• игрок с 1-м ходом => отметка места ( x | o ):
• До (победы или ничьей): отметка места игрока 2 => ход обмена => отметка места 1-го игрока;

Логика реализации

---

В многопользовательской онлайн-игре «Крестики-нолики» обработку ходов, соединение игроков, управление чатом игроков и игровыми комнатами обеспечивает сервер (в данном случае с помощью фреймворков Flask, Flask SocketIO). По правилам крестиков-ноликов в одной игре участвуют только два игрока. Это означает, что сервер должен проверить наличие игровой комнаты и наличие двух игроков, прежде чем подключать нового.

Шаг 1 — Подключение

• К серверу подключаются два клиента.
  • Первоначальная проверка: наличие комнаты, количество игроков;

Шаг 2. Игрок проинформирован

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

Шаг 3 – начать игру

• Сервер начинает матч и информирует игроков о том, кто начнет матч, когда игроки согласились начать игру.
  • На третьем этапе два игрока играют друг против друга. Сначала игрок нажимает на поле, и эта информация отправляется на сервер. Информацию о выбранном поле и следующем игроке отправляет клиентам сервер в комнате. Это будет повторяться до тех пор, пока ничья или один игрок не выиграет игру.

app.py

Файл, где начинается все самое интересное... Вот конфигурация фреймворков Flask и Flask Socket IO. После настройки маршруты Flask украшаются @app.route() , а обработчики Flask SocketIO — @socketio.event . В нижней части файла есть socketio.run(app, debug=True) который запустит сервер. «Функция socketio.run() инкапсулирует запуск веб-сервера и заменяет запуск стандартного сервера разработки Flask app.run() ». Сокет для колбыIO

oophelpers.py

Есть моделирование объектов Player() и GameRoom() . Внутри себя классы определяют поведение и необходимые атрибуты.

templates/

По сути, templates/index.html — это просто HTML-страница, описывающая содержимое страницы — настольную игру и область журналов. В верхней части страницы есть модальное представление «Просмотр приветствия», которое меняет состояние: display: show -> display: none , когда событие сервера выдает информацию о доступности комнаты.

static/styles/

Здесь находятся файлы CSS, используемые для описания эстетики страницы.

static/scripts/

В файле main.js находятся сценарии, которые делают возможным взаимодействие с веб-приложением. Файл начинается с « ОБЪЯВЛЕНИЯ ПЕРЕМЕННЫХ » вверху, после чего анонимная функция addEventListener joinButton проверяется roomAvailability() с помощью функций async и await . После подтверждения доступности комнаты вызывается userConnectedHandlers() . Функции чата и игры предоставляются в EventListener, прикрепленном к кнопкам sendButton , startGameButton , restartButton .

requirements.txt

Этот файл просто описывает пакеты зависимостей для этого веб-приложения.

Воспроизвести веб-приложение

Один из способов запустить это приложение:

• создать виртуальную среду Python;

python -m venv [directory]

• установить требования в виртуальной среде;

pip install -r requirements.txt

• запустите python app.py или flask run и посетите http://localhost:5000 в двух отдельных вкладках браузера.

python app.py

или

flask run

Контейнеризация с использованием докера

Создайте образ из Dockerfile

docker build -t < img_name > .        

docker build -t flask-tictactoe .        

Запустите контейнер в фоновом режиме и опубликуйте порты контейнера на хосте.

docker run -d -p < host_port > : < container_port > < image_name >    

docker run -d -p 80:5000 flask-tictactoe  

Доступ к контейнеру в браузере по адресу: http://localhost или http://127.0.0.1