Наш пример для начинающих веб-разработчиков интерфейса в этой статье — игра на память. Вы можете посмотреть видео кодирования выше. Вы также можете получить доступ к кодам здесь.
Игра состоит из квадратов на сетке 4х4. На обратной стороне этих квадратов есть определенные символы, и эти квадраты не закрываются, когда два одинаковых символа открываются один за другим, нажав на квадрат. После того, как все пары совпали, игра заканчивается.
Как обычно, мы создаем файл index.html для запуска нашего примера. Мы получаем семейство шрифтов Open Sans через Google Fonts и добавляем его в наш файл index.html. После создания файлов game.css и game.js и добавления их в HTML мы, наконец, закрываем наш HTML-файл с помощью элемента div с идентификатором game-wrapper.
Что касается нашего файла CSS, мы задаем ширину 300 пикселей для #game-wrapper. Это будет ширина нашей игры, и размеры квадратов внутри сетки будут соответствовать этой ширине.
Для стиля .grid мы предоставляем стили display:flex и flex-flow:row wrap, чтобы обеспечить равномерное выравнивание добавляемых кадров.
Для .cell мы задаем стили display:flexи соответствующие стили для его содержимого, выровненного по вертикали и горизонтали. Нам нужен еще один элемент, который поместится за квадратом, и мы создаем его с помощью .cell::after. Мы также задаем вращение по оси Y стилю .hide с помощью rotateY, чтобы использовать его для замкнутой формы квадратов.
Мы заканчиваем наш файл CSS, создавая стили панели, которые будут использоваться для отображения информации.
Теперь очередь наших javascript-кодов. Мы создаем переменную с именем game и назначаем функцию, которая будет выполняться сразу после ее создания. В этой функции мы определяем необходимые переменные. В переменной symbols мы назначаем символы, которые будут использоваться внутри квадратов. Мы делаем это самым простым способом, разделяя строку букв и цифр и создавая массив.
Нам нужно сохранить предыдущую выбранную карту в игре для сравнения. Для этого мы используем переменную previousCellIndex.
Мы размещаем grid, представляющий нашу сетку, cell, представляющий квадраты, и элементы информационной панели в дереве DOM. Мы увеличиваем цикл, который мы используем для создания квадратов, на два, потому что мы хотим, чтобы каждый символ был парой. Также в этом цикле мы должны сделать перетасовку, чтобы символы не располагались рядом друг с другом, мы заменяем каждый квадрат случайным предыдущим квадратом и повторяем цикл.
Мы даем функцию cellClick событию щелчка квадратов. В этой функции мы сначала проверяем переменную флага canPlay и то, что квадрат, по которому щелкнули, перевернут.
Если это первое нажатие на квадрат для пары, мы присваиваем его индексу previousCellIndex и завершаем функцию. Если это второй квадрат, мы проверяем, есть ли совпадение, и игра завершается. После этих проверок мы устанавливаем переменную previousCellIndex в ноль, выводим на экран необходимую информацию и завершаем функцию.
