Скопировано из моего личного блога. Написано в 2015 году.

Однажды я пошел на собеседование на роль руководителя фронтенд-команды. Интервью началось хорошо, оно было очень непринужденным, мы делились историями, шутили, смеялись, а потом БАМ! Настроение изменилось.

Хорошо, покажи нам, как сделать крестики-нолики. Вот доска.

я вообще не ожидала этого. Я замерз. Прежде всего, я спросил: «Что еще за крестики-нолики?»

Крестики-нолики == Крестики-нолики

О да. Я имею в виду, что Tic Tac Toe — очень простая игра. Я только что закончил создание клона Candy Crush, так что сложно было объяснить это на месте? Я почти сказал: «Ну, это очень просто. Вы просто сохраните пятна в массиве. Ага. Вот и все. А затем, если вы нажмете здесь, просто отметьте это и проверьте, выиграли ли вы… да… просто». :/

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

Я предполагаю, что быстрый и простой способ состоял бы в том, чтобы понять, что сетка очень маленькая, и вам нужно проверить только 8 строк. Но я за расширяемый подход. Я хочу использовать тот же код для создания Connect 4, а затем Match 3. Это основная функция моего подхода:

 
 /**
 * Recursively returns all consecutive matches from an
 * x, y grid position in a direction.
 * @public
 * @param {Int} x x position in the grid
 * @param {Int} y y position in the grid
 * @param {Array} direction a single direction of the search in Array form e.g [1, 1] goes SE
 * @param {Array} matches used for the recursive result
 * @return {Array} Array of matches
 */
 findMatchesByDirection(x, y, direction, matches = []) {
   const [tx, ty] = direction;
   const a = this.getItem(x, y);
   const b = this.getItem(tx, ty);
   if (this.compare(a, b)) {
     matches.push(b);
     return this.findMatchByDirection(tx, ty, direction, matches);
   } else {
     return matches;
   }
 }

Смотрите результат здесь
Мое полное решение для ES6 находится здесь, на github.

Недавно у меня появилась возможность стать наставником в Sydney Javascript Study Group. Я выбрал своим первым сеансом Крестики-нолики :) Ну, это было только на прошлой неделе, и после трехчасовой борьбы с крестиками-ноликами я не думаю, что снова буду озадачен этой темой!