Хабрахабр

Tic Tac Toe, часть 3: Undo/Redo с хранением команд

Tic Tac Toe, часть 0: Сравнение Svelte и React
Tic Tac Toe, часть 1: Svelte и Canvas 2D
Tic Tac Toe, часть 2: Undo/Redo с хранением состояний
Tic Tac Toe, часть 3: Undo/Redo с хранением команд

В этой части рассмотрена реализация игры Tic Tac Toe с помощью паттерна Command, с хранением команд Undo/Redo вместо хранения отдельных состояний, с произвольным доступом к каждому шагу истории игры.

Стартовый код

Прошлая часть статьи закончилась на таком коде: Код на REPL.

Все клетки игрового поля заполним единицами: Код на REPL Закомментируем весь код, который при выполнении изменений будет выдавать ошибки.

Хранилище state

Код на RELP

В игровом поле теперь отображается содержимое хранилища state. Добавили хранилище state. Добавили вывод статуса в компоненте App. Игровое поле по-умолчанию заполнили двойками.

Класс Command

Код на RELP

Класс History изменен для хранения команд вместо состояний. Добавили класс Command в файл helpers.js.

Если кто знает, подскажите, пожалуйста. Здесь мне не удалось выполнить правильное обновление статуса. И, вообще, возможно ли так использовать хранилище state?

Перевод хода

Код на RELP

В конструкторе класса Command выполнили перевод хода. Добавили запрет клика по уже заполненной клетке. Исправили вывод статуса.

Состояние игрового поля

Код на RELP

На предыдущих этапах возникло сомнение в правильности использования отдельного хранилища state, поэтому оно было убрано, и хранение состояния игрового поля перенесено в класс History — добавлено поле state.

Произвольный доступ

Произвольный доступ к любому шагу игры выполняется последовательным выполнением команд Undo или Redo до выбранной команды. Код на RELP
Добавлен вывод списка шагов.

Определение победителя

Добавлено хранилище status для вывода статуса. Код на RELP
Выполнено определение победителя.

Заключение

В случае приложений с большим размером модели лучше использовать хранение команд в истории. Хранение истории ходов с помощью состояний более удобно в использовании, но затратно по памяти, потому что на каждом шаге выполняется дублирование всего состояния игры.

Репозиторий на GitHub

https://github.com/nomhoi/tic-tac-toe-part3

Установка игры на локальном компьютере:

git clone https://github.com/nomhoi/tic-tac-toe-part3.git
cd tic-tac-toe-part3
npm install
npm run dev

Запускаем игру в браузере по адресу: http://localhost:5000/.

Теги
Показать больше

Похожие статьи

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Кнопка «Наверх»
Закрыть