web-приложение Крестики-Нолики

+6
1.31K
web-приложение Крестики-Нолики

После публикации поста с cli-приложением я подумал, что тема Крестиков-Ноликов закрыта.  Но нет, чуть позже появилась мысль написать web-приложение. Казалось бы, что сделать это после того как написано cli-приложение раз плюнуть. Это по-большому счёту так, но мы то знаем, что «дьявол в деталях».

Подготовка

На этот раз потребуется web-сервер. Вы можете использовать какой вам удобнее/привычнее. Я же воспользуюсь встроенным веб-сервером .
Проект имеет следующую структуру файлов

web-xo
├── handler.php
├── index.php
├── src
│   ├── autoload.php
│   ├── Charter.php
│   ├── CrossZero.php
│   ├── Helper.php
│   ├── Session.php
│   └── Storage.php
└── templates
    ├── show.php
    └── style.css


Ссылка на скачивание
Если вы пользуетесь встроенным веб-сервером, то распакуйте архив по произвольному адресу, пусть это будет /home/vasya/php-apps/web-xo. Далее в консоли

  1. # переходите в эту директорию
  2. cd /home/vasya/php-apps/web-xo
  3. # запускаете сервер
  4. php -S localhost:8000
  5. # если вы дальше видите примерно такую строчку, то всё отлично
  6. [Sun Sep 19 14:14:08 2021] PHP 7.4.23 Development Server (http://localhost:8000) started

Теперь, если вы наберёте в браузере _http://localhost:8000, то отработает index.php

Отличие от cli-приложения

Очевидно, что кроме PHP будет использоваться HTML и CSS для единственной странички. Но главное техническое отличие состоит в том, что, если cli-приложение запускалось, работало от начала до окончания игры на одном компьютере, ввод данных был там же, то  в web-приложении не так.
PHP по-умолчанию не сохраняет состояние между запросами страниц. Отработало приложение(например, мы успели поставить свой «х», а приложение «о»), в следующий раз при обращении к приложению оно не будет знать, что было раньше.
Но не всё так печально, в PHP есть механизм сессий, который можно применить для сохранения состояния, но его нужно запустить и «вручную» им управлять.
Для этой цели написан класс Session. Подвергнулся изменениям и класс CrossZero, теперь мы должны сохранять таблицу с «х» и «о» после каждого изменения и извлекать её из сессии при каждом новом запросе к приложению.

Особенности реализации

Задача index.php показать текущее состояние таблицы, в случае ошибки, победы и т.д. — вывести информационное сообщение,  показать форму для ввода.  handler.php обрабатывает данные get-запроса, ставит в таблицу «х», осуществляет ход компьютера и перебрасывает на index.php.
Чтобы подключать классы реализован автозагрузчик(autoload.php). Уровень, на котором мы получаем и обрабатываем данные и уровень представления(html) разделены.

Играйтесь! Найдёте ошибку или непонятное место — пишите, будем это исправлять.

Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
+1
IamB IamB 2 года назад #

Если вы имеете в виду OpenServer, то, конечно, да.  Распаковываете архив, создаете папку для нового сайта, в нее кладете содержимое папки web-xo. Перезапускаете  OpenServer, в браузере набираете адрес вашего нового сайта. В терминах могу ошибиться, Linux пользуюсь.

Олег Васильевич я Олег Васильевич я 2 года назад #
Комментарий удален
+1
Fuze Fuze 2 года назад #

Рекомендую обратить внимание на Electron, но как прокачивание скилов, данная работа вполне гуд 👍

+1
IamB IamB 2 года назад #

Благодарю за такой отзыв! Ну, день удался :)

Еще от автора

Google Таблицы
Поле призвано упростить работу с таблицами. Можно создавать таблицы во встроенном визуальном редакторе, но это занятие как минимум трудоемкое.
Создание таск-трекера своими(почти) руками
Этот пост появился благодаря теме на форуме. Поразмышлял, пописал код, поставил опыты и. думаю, процентов на 80 решил задачу с форума.
Логгер для проекта
По случаю написал логгер. Конечно, можно было взять готовый, поскольку только ленивые их не писали.
Используя этот сайт, вы соглашаетесь с тем, что мы используем файлы cookie.