Сегодня в приложении для игры на память нужно выполнить шаг 2 — продублировать карточки, чтобы получилось 12 пар. Так, чтобы у каждой карты была карта, чтобы соответствовать.

Я сделал это, продублировав файлcardArray. Это было сделано с помощью метода concat для присоединения CardArray к CardArray.

var gameGrid = cardsArray.concat(cardsArray)

Затем мне пришлось пройтись по старому коду и изменить то место, где у меня былcardArray, чтобы теперь сказать gameGrid, чтобы он перетаскивал массив с обеими парами.

Когда я перезагрузил страницу, она обнаружила оба набора.

Поскольку я прошел этот шаг очень быстро, я решил перейти к следующему шагу: рандомизировать отображение карты.

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

Поэтому мне нужно было рандомизировать позиции, в которые загружаются фотографии. Я сделал это, используя метод sort() и math.random.

 gameGrid.sort(function(){
return 0.5 - Math.random()})

Переменная gameGrid, которая теперь содержит пары карточек, отсортирована. Я передал функцию в сортировке, так как сортировка будет автоматически сортироваться в алфавитном порядке или от низшего к высшему, если мы не передаем аргумент. Поэтому я передал функцию, которая возвращает 0,5, вычтенное Math.random (для получения случайного числа от 0 до 1). Теперь, когда я снова открываю страницу и обновляю ее, карточки появляются в другом месте.

Я обнаружил, что хорошо разбираюсь в методах sort() и Math.random(), но не понимал, почему мы выбрали 0,5 — Math.random(). Поэтому я спросила у милого мужа, и мы узнали, что в методе сортировки сравниваются два элемента массива. При их сравнении, если он меньше 0, то a будет отсортирован ниже, чем b, если он равен 0, то он не изменится, если он больше 0, то b ниже, чем a. А поскольку Math.random выбирает случайное число в диапазоне от 0 до 1, то 0,5 находится на полпути между этим. Таким образом, некоторые из случайно выбранных чисел будут больше 0, а некоторые будут меньше, а некоторые даже могут быть равны.

И я выполнил этот шаг намного быстрее, поэтому я перейду к следующему шагу: стиль выбранных карт.

Цель этого шага заключалась в том, чтобы поместить рамку вокруг карты при нажатии на нее.

Сначала я добавил класс в файл CSS с именем selected со сплошной синей рамкой шириной 4 пикселя.

.selected {
border: 4px solid blue:
}

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

Затем я помещаю прослушиватель событий в сетку, прослушивая щелчки пользователей, передавая функцию. В этой функции я создал переменную для нацеливания на выбранный элемент, а затем добавил класс ‘selected’ class. После того, как это будет сделано, когда карты будут нажаты, граница будет добавлена ​​к нажатому элементу div. Однако граница также добавлялась ко всему разделу, когда она щелкалась между карточками, чего я не хотел. Чтобы исправить это, я использовал оператор if, который говорит, что если щелкнутое имя узла равно SECTION, то оно ничего не вернет.

grid.addEventListener('click', function (event) {
//create variable to target clicked item
var clicked = event.target;
//stop grid section for being selected, only select divs inside grid
if (clicked.nodeName === 'SECTION') {
return;
}
//add selected class
clicked.classList.add('selected');
})

Итак, теперь, когда нажимаются карты, добавляется граница, но вся сетка никогда не выделяется.

И вот где я оставлю это на сегодня вечером.