Задача. Игра 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