На прошлой неделе у меня была возможность поработать с кем-то над улучшением кода, который я написал. Полученный код включал двумерные массивы. В прошлом у меня были проблемы с многомерными массивами, так как я мало ими пользовался, поэтому я обнаружил, что это очень полезный опыт обучения. Это также вдохновило меня на дальнейшую практику, поэтому я пишу базовое руководство о том, как использовать многомерные массивы в javascript для поиска победителя в простой игре в крестики-нолики.
Во-первых, давайте изобразим доску для игры в крестики-нолики:
В крестиках-ноликах есть восемь потенциальных выигрышных комбинаций, состоящих в том, чтобы собрать 3 клетки подряд с вашим маркером (традиционно X или O), играя поперек, вниз или по диагонали.
Итак, выигрышные комбинации:
123 456 789 147 258 369 159 357
Мы можем думать о каждом из них как о собственном массиве:
[1, 2, 3] [4 ,5, 6] [7, 8, 9] [1, 4, 7] [2, 5, 8] [3, 6, 9] [1, 5, 9] [3, 5, 7]
Многомерные массивы являются вложенными массивами. Таким образом, мы можем хранить (и вкладывать) эти выигрышные комбинации в один большой массив, который мы можем позже перебирать, когда проверяем, есть ли победитель:
largeArray = [
[1, 2, 3],
[4 ,5, 6],
[7, 8, 9],
[1, 4, 7],
[2, 5, 8],
[3, 6, 9],
[1, 5, 9],
[3, 5, 7]
]
Итак, в чем разница между получением элемента из одномерного массива и двумерного массива?
Что ж, с одномерным массивом вы получаете элемент по его индексу, что просто:
array[i]
С двумерным массивом вы также получаете элемент по его индексу, но у вас есть несколько массивов для просмотра, поэтому вы также будете просматривать несколько индексов. Двумерный массив выглядит так:
largeArray[i][j]
Давайте разберем это…
Часть largeArray[i] — это самый внешний массив (в нашем случае largeArray). Часть [j] массива largeArray[i][j] — это индекс внутреннего (вложенного) массива внутри largeArray.
Предположим, что i = 0 и j = 0, так как мы хотим перебирать массивы с самого начала. Итак, наш массив будет выглядеть так:
largeArray[0][0];
Индекс 0 большого массива — это первый элемент (в данном случае это еще один массив из [1, 2, 3]). Здорово. Вторая часть также просматривает индекс 0, но внутри вложенного массива (а не во внешнем largeArray). Итак, внутри [1, 2, 3]. Первый элемент (индекс [0]) равен «1».
Итак, bigArray[0][0] = «1»!
Помните! Массивы используют индексацию с отсчетом от нуля, поэтому 0 означает, что это первый элемент в этом массиве.
Давайте посмотрим на другой пример. Каким будет bigArray[3][2]?
Разбейте его на части: во-первых, largeArray[3] — это массив из [1, 4, 7].
Далее, что представляет собой элемент с индексом [2] в этом массиве?
Правильно, это 7!
largeArray[3][2] = 7
Теперь, когда мы знаем, как работают многомерные массивы, давайте выясним, как мы можем использовать их, чтобы найти победителя в нашей игре в крестики-нолики.
Я не буду расписывать код всей игры, так как это не является целью данной статьи. Но предположим, что когда игрок решает поместить свой маркер в поле, поле становится либо «X», либо «O» (в зависимости от того, чей сейчас ход). Если на ящике еще нет маркера, ящик пустой/пустой.
После того, как игрок сделал свой ход и поместил свой маркер, запускается функция checkForWinner:
checkForWinner() {
for (var i = 0; i <largeArray.length; i++) {
x = largeArray[i][0];
y = largeArray[i][1];
z = largeArray[i][2];
if (box[x].marker == box[y].marker) {
if (box[y].marker == box[z].marker) {
if (box[x].marker != blank) {
winner = box[x].marker;
}
}
}
}
return winner;
}
Хорошо, что здесь происходит? Давайте разделим это:
Мы просматриваем наш двумерный массив, просматривая каждую выигрышную комбинацию по одной.
В операторах if мы сначала проверяем, совпадает ли маркер в 1-м поле (largeArray[i][0]) с маркером во 2-м поле (largeArray[i][ 1]). Если это то же самое, он затем проверит, совпадает ли маркер в 1-м поле с маркером в 3-м поле (largeArray[i][2]). Если это так, это означает, что все три ящика из одной из выигрышных комбинаций в нашем массиве largeArray одинаковы, поэтому должен быть победитель, верно?! Не совсем…
Нам нужно убедиться, что ящики не пусты, так как может быть 3 пустых ящика подряд. Поэтому, прежде чем мы объявим победителя, мы проверим, пусто ли первое поле. Если это не так, значит, и двух других ящиков тоже нет (поскольку они все одинаковые, помните?). Так что, если он не пустой и в нем действительно есть маркер, у нас есть три выигрышных комбинации подряд с одним и тем же маркером.
Победитель, победитель ужина с курицей!
Победителем становится игрок, поставивший свой маркер последним (игрок, чей ход в настоящее время наступает, когда функция checkForWinner была запущена после того, как он поместил свой маркер).
В противном случае, если победителя нет, игра продолжается еще один ход.
Спасибо за чтение!
Надеюсь, вы смогли следовать за мной, даже несмотря на то, что у меня не было всей кодовой базы для полной игры в крестики-нолики.
Важно продолжать учиться и совершенствовать свои навыки программиста. Многомерные массивы были моей слабостью, поэтому я хотел лучше понять их и попрактиковаться в их использовании, поскольку знаю, что буду часто сталкиваться с ними в своей карьере.
Ваше здоровье!
