Задача. Игра Connect Four
Необходимо реализовать базовую логику игры Connect Four, в которую смогут играть 2 игрока.
Стек: Front-end задача с использование js, css на базе фреймворка React.js.
- Каждый игрок заполняет одну ячейку за ход.
- Ячейки можно заполнять только снизу вверх.
- Побеждает тот, кто первым заполнит четыре клетки подряд.
Разбор
Итак возьмем стандартную раскладку игры, поле 6x7. Два игрока: красный и черный. Пусть красный начинает первым.
Для динамики игры нам понадобится реализовать 3 главных метода:
- hasAnyMove - проверка возможности хода в текущий столбец.
- makeMove - установка фишки текущего игрока в соот-ей ячейке.
- checkGameEnd - после каждого хода игрока нам нужно выполнить проверку на окончание игры.
Основная логика алгоритма сосредаточена в этих трех функциях. Однако отметить стоит только алгоритм проверки на выигрышную позицию. Для каждого текущего хода с координатами фишки (row, col) запустим поиск во всех направлениях: по горизонтали, по вертикали вниз, а также по главной и вспомог.диагонали. Если мы обнаружим 4 последовательно расположенные фишки одного цвета, то мы нашли победителя, иначе заканчиваем проверку.
Для визуализации игры создадим следующие React компоненты:
- ConnectFour - главный компонент игры, определяющий логику и главную верстку.
- ConnectFourBoard - компонент, который отрисовывает доску.
- ConnectFourCell - компонент, для отрисовки ячейки доски.
Реализация
https://github.com/AlbertDavletov/connect-four-react
Play-test
https://codesandbox.io/s/github/AlbertDavletov/connect-four-react/tree/main/?from-embed