Крестики-нолики для новичков в игровой логике с JS.
Одна из лучших вещей во время обучения - это то, что ваш мозг пытается найти место для этой новой информации и понять ее, а также то, как она может быть полезна с тем, что вы уже знаете, вот как это работает для меня, и именно так я пришел к Идея создания игры, потому что в начале моей первой недели чтения материала javascript я прочитал, насколько хороши массивы для хранения данных, связанных с игрой.
Прежде всего я немного объясню, что такое массивы и как они работают на языке программирования javascript.
Массивы
Объект JavaScript Array - это глобальный объект, который используется при построении массивов; которые представляют собой высокоуровневые объекты в виде списков.
var fruits = ['Apple', 'Banana']; console.log(fruits.length); // 2var first = fruits[0]; // Apple
Теперь, когда у вас есть эта новая или, может быть, не та новая информация, связанная с массивом, я объясню, какую логику я использовал для создания этой игры.
Хотя для своей игры я использовал html и css UI (пользовательский интерфейс), я приведу общий пример, который работает либо для этого, либо для консольных приложений.
Объявление переменных.
После мозгового штурма я пришел к выводу, что лучший способ сохранить вводимые пользователем данные и обновить игровое поле - это использовать фактическую переменную игрока, которая будет назначаться игроку случайным образом в начале каждой игры и будет обновляться после каждого ввода игрока до тех пор, пока произошла победа или ничья, для которой в начале каждой игры объявляются две дополнительные переменные со значением false.
let winner = false; let draw = false; let actualPlayer = null;
Для игровой доски, основываясь на ранее прочитанном материале, я решил, что для сохранения пользовательского ввода я должен создать 3 массива, каждый из которых имеет длину 3 объявления с пустыми строками, и сохранил эти массивы внутри объектной переменной, если вы внимательно посмотрите эти массивы выглядят как игровая доска в крестики-нолики с легким доступом к горизонтальным значениям, не таким легким доступом к вертикальным и тем, что потребовало немного больше кода, где значения диагональных линий для проверки статуса игры.
let gameArrays = {
a:["", "", ""],
b:["", "", ""],
c:["", "", ""]
};
Ввод игроков и проверка победителя.
Теперь вам нужно будет ввести координаты ввода, которые желают пользователи, и изменить это массивы в конкретном месте на фактическую букву пользователя, всегда убедитесь, что вы сообщаете пользователю, кто является фактическим игроком, а также отображаете пользователю представление о том, как выглядит таблица доски. В данный момент.
0 1 2 a [“o”,” “,”o”] b [“ “,”x”,” “] c [“x”,” “,” “]
Игрок сообщит вам, какой массив и индекс вы хотите выбрать, и после проверки того, что в этом индексе нет ни одной буквы желания, вы должны изменить значение этого элемента массива.
Перед проверкой победителя я также подсчитываю количество сделанных ходов на основе объединенной длины всех массивов, если длина равна 9 и нет победителя, ti означает, что игра закончилась ничьей.
Теперь, чтобы проверить победителя, я сначала создал функцию, которая принимает объединенный массив (строку) в качестве аргумента, проверяет, нет ли победителя и если длина массива равна 3, после этого мы разбиваем строку на массив и проверьте, все ли значения массива одинаковы, и если это так, измените значение переменной победителя на истинное, в противном случае оно сделает его ложным.
Для этого мы использовали метод массива every ().
const checkForWinnerArray = (array) => {
if(array.length == 3 && winner === false){
winner = array.split('').every(element =>
element == actualUser);
}
};
Чтобы найти победителя, я создал переменные, которые будут отправляться через функцию checkForWinnerArray (), пока не будет найден победитель.
Сначала я создал переменную для горизонтальных массивов и проверяю победителя в зависимости от последнего затронутого индекса массива, независимо от массива (a, b, c), мы делаем это, ожидая, что positionMoved var будет чем-то вроде «A2».
// Saving the movement on the object
gameArrays[positionMoved[0]][positionMoved[1]] = actualUser;
// Checking for winner horizontally based on last game move
const lastMoveArrayHor = gameArrays[positionMoved[0]].join('');
checkForWinnerArray(lastMoveArrayHor);
// Checking for winner vertically based on last game move
const lastMoveArrayVert = Array.from("abc", key =>
gameArrays[key][positionMoved[1]]
).join('');
checkForWinnerArray(lastMoveArrayVert);
Чтобы создать необходимые массивы для функции проверки победителя, я создал новую вспомогательную функцию, которая должна была принимать целое число в качестве аргумента, а затем на основе этого создать массив и вернуть его для проверки.
Функция создает массив из заданной строки и индекса, затем добавляет еще одно число к индексу, пока не запустится с начальных значений «abc».
const findXarrayValues = (i) => {
let valuesString;
if(i == 0){
valuesString = Array.from("abc", x => {
let value = gameArrays[x][i];
i++;
return value;
}).join('');
} else {
valuesString = Array.from("abc", x => {
let value = gameArrays[x][i];
i--;
return value;
}).join('');
}
return valuesString;
}
После этого мы можем пойти и проверить, есть ли победитель на этих двух новых массивах, основываясь на диагональных возможностях доски для крестиков-ноликов.
// Checking for diagonal winner from a0 to c2 const arrayAAscending = findXarrayValues(0); checkForWinnerArray(arrayAAscending); // Checking for diagonal winner from a2 to c0 const arrayADescending = findXarrayValues(2); checkForWinnerArray(arrayADescending);
После этого процесса можно проверить, есть ли победитель, ничья или ни один из них, и если ничего не изменилось, мы продолжаем игру и меняем фактического игрока на другого, отличного от фактического, например
const amountOfMoves = findAmountOfMoves();
if (amountOfMoves >= 8 && winner === false){
draw = true;
console.log(`Is a draw!!!`)
} else if (winner === true) {
console.log(`${actualUser} is the winner`)
}
if(winner === false && draw === false) {
actualUser == “x” ? actualUser = “o” : actualUser = “x”;
}
Заключение
Это основная попытка объяснить некоторую логику, необходимую для создания структуры игры в крестики-нолики, и то, как я заставил ее работать с ванильным javascript.
Вот пример того, как эта логика воплотилась в жизнь и превратилась в простое веб-приложение.
