Приветствую тебя дорогой читатель! В этом уроке я покажу, как можно создать игру на поиск отличий на JavaScript!
Я уверен, вы знаете о чем идет речь – это та игра, где перед вами расположены 2 картинки, и необходимо найти определенное количество отличий.
В данном уроке по JavaScript я расскажу, как можно создать такую игру, имея уже 2 картинки с различиями. Такие картинки очень просто сделать в фотошопе (об этом как-нибудь в другой раз), а еще проще найти на просторах интернета.
Я буду показывать на примере вот этих двух картинок, которые я нашел в поиске по картинкам:
Картинка выше – это пример уже начатой игры, как видите, я уже нашел 5 отличий из 12.
Других картинок, увы, не будет, иначе это займет очень много времени, к тому же, цель урока – показать, как это можно сделать (научить), а уж картинки вы выберете и сами.
Требования к игре
Итак, давайте выпишем все требования, которые должны быть реализованы в игре:
- перед игроком должны выводиться 2 картинки;
- найденное отличие должно обводиться красным;
- если отличие найдено на левой картинке, то оно должно быть автоматически выделено и на правой картинке (и наоборот);
- количество найденных отличий должно подсчитываться;
- если нажимать на одно и тоже отличие больше одного раза, то должно засчитываться только одно отличие.
Вот, в принципе, и все требования, теперь давайте перейдем к реализации!
Реализация игры
Перед тем, как рассмотреть код, необходимо сказать пару слов о том, как это будет реализовано (немного теории).
Все отличия буду сделаны с помощь div блоков размером 20px на 20px. Когда мы на них нажимаем (было найдено отличие) у них добавляется круглая красная рамка. То есть изначально все эти отличия (блоки) будут присутствовать в исходном коде страницы, но игрок их не будет видеть, так как у них не будет рамки.
Давайте рассмотрим HTML верстку:
<div id="wrap">
<div id="one"></div>
<div id="two"></div>
</div>
<div id="info"></div>
Общий блок с id wrap содержит еще два блока, one – это левый блок (блок для первой картинки), и two это блок для правой картинки.
Блок с идентификатором info нужен для того, чтобы в него выводить количество найденных и оставшихся отличий.
Как вы понимаете, координаты (блоки) с отличиями будут одинаковыми как для левой, так и для правой картинки и их удобно хранить в массиве (об этом чуть ниже), поэтому все эти координаты будут заполняться автоматически скриптом.
После заполнения HTML код (для примера из данного урока) будет выглядеть так:
<div id="wrap">
<div id="one">
<div style="margin:206px 0 0 143px" class="area"></div>
<div style="margin:177px 0 0 211px" class="area"></div>
<div style="margin:282px 0 0 197px" class="area"></div>
<div style="margin:233px 0 0 340px" class="area"></div>
<div style="margin:321px 0 0 188px" class="area"></div>
<div style="margin:168px 0 0 397px" class="area"></div>
<div style="margin:323px 0 0 349px" class="area"></div>
<div style="margin:657px 0 0 423px" class="area"></div>
<div style="margin:560px 0 0 105px" class="area"></div>
<div style="margin:476px 0 0 294px" class="area"></div>
<div style="margin:325px 0 0 121px" class="area"></div>
<div style="margin:285px 0 0 402px" class="area"></div>
</div>
<div id="two">
<div style="margin:206px 0 0 143px" class="area"></div>
<div style="margin:177px 0 0 211px" class="area"></div>
<div style="margin:282px 0 0 197px" class="area"></div>
<div style="margin:233px 0 0 340px" class="area"></div>
<div style="margin:321px 0 0 188px" class="area"></div>
<div style="margin:168px 0 0 397px" class="area"></div>
<div style="margin:323px 0 0 349px" class="area"></div>
<div style="margin:657px 0 0 423px" class="area"></div>
<div style="margin:560px 0 0 105px" class="area"></div>
<div style="margin:476px 0 0 294px" class="area"></div>
<div style="margin:325px 0 0 121px" class="area"></div>
<div style="margin:285px 0 0 402px" class="area"></div>
</div>
</div>
Как видите каждая из координат представляем из себя div блок с классом area и отступами, например, данный код:
<div style="margin:206px 0 0 143px" class="area"></div>
означает, что отличие (блок) имеет такие координаты:
- отступ сверху: 206px
- отступ справа: 0
- отступ снизу: 0
- отступ слева: 143px
Для того, чтобы точно задать расположение точки, достаточно знать 2 параметра: отступ сверху и отступ слева.
Теперь давайте разберем CSS стили:
#wrap{
width: 916px;
height: 691px;
margin: 0 auto;
}
#wrap #one,#wrap #two{
width: 50%;
height: 100%;
float: left;
background: url(/wp-content/uploads/2017/04/game1.jpg);
}
#wrap #two{
background: url(/wp-content/uploads/2017/04/game2.jpg);
}
#wrap .area{
width: 20px;
height: 20px;
position: absolute;
margin: 206px 0 0 143px;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
#info{
width: 200px;
text-align: center;
margin: 20px auto;
}
- #wrap – стили для общего блока, в котором содержатся еще 2 блока с координатами;
- #wrap #one,#wrap #two – так мы задаем стили сразу для двух блоков, так как они отличаются только фоном;
- #wrap #two – так мы перебиваем верхние стили, задавая фон для второго блока (вторая картинка);
- #wrap .area – это стили для каждой из координат (те самые отличая), красная рамка будет задаваться только когда мы нажали на отличие;
- #info – стили для блока, в котором выводится информация о количестве найденных отличий.
Ну что же, осталось разобрать самое главное – JavaScript (JQuery) код:
Идем сверху вниз:
coordinates – это массив с координатами, например, координата:
'206#143'
означает отступ сверху 206px и отступ слева 143px
Переменная curPoint хранит количество найденных отличий, по-умолчанию их 0.
Далее мы выводим в блок info информацию от текущем количестве отличий, coordinates.length – это размер массива с координатами, то есть сколько элементов в массиве, столько и отличий (в данном случае 12).
После этого идет цикл в котором заполняются два блока (#one и #two) координатами из массива.
Делается это так:
- берется координата, например, 206#143
- расщепляем её с помощью split(‘#’), то есть получаем по отдельности элементы разделенные решеткой
- используем 2 полученных параметра (отступ сверху и слева) в стилях элемента div, который мы вставляем с помощью функции append.
Осталось обработать нажатие (клик) на отличие – логика здесь такая:
по клику на текущее отличие, добавляем ему красную рамку, далее определяем на какую из картинок (левую или правую) было нажатие, если нашли отличие на левой картинке, то добавляем отличие и на правую, если нашли на правой, то выделяем отличие и на левой.
Для определения порядкового номера элемента используем функцию index, то есть если мы нажали, например, на 5 элемент на левой картинке, то красную рамку мы добавляем и к 5 элементу правой картинки.
Операцией curPoint++ увеличиваем количество найденных отличий, после чего, выводим об этом информацию.
Теперь вы можете посмотреть реальный пример, а также, скачать его к себе на компьютер.
Посмотреть результат
Скачать
У данного варианта реализации есть минусы, вот они:
- необходимо вручную подбирать координаты точек, где находятся отличия;
- отличие не всегда бывает в форме круга и не всегда размерами 20 на 20 пикселей;
Теперь давайте расскажу, как сделать игру со своими картинками.
Что нужно изменять, чтобы сделать подобное для других картинок?
Вам понадобятся 2 картинки одинаковых размеров с отличиями. Допустим, вы нашли такие картинки, что нужно менять в коде?
Вот что придется менять:
в CSS стилях
- у #wrap изменить ширину (width) – она равна ширине двух картинок, то есть берете ширину любой из картинок и умножаете ее на 2, а также, изменяем высоту (height) – она равна высоте любой из картинок;
- у #wrap #one,#wrap #two изменяем background – вставляем путь к первой картинке;
- у #wrap #two изменяем background – вставляем путь ко второй картинке;
В JavaScript коде
- в массиве coordinates изменяем координаты на свои (ниже расскажу как получить координаты);
Всё, больше ничего нигде менять не нужно!
Как определять отступы (координаты) для отличий?
Все очень просто! Координаты мы будем получать с помощью расширения для браузера Mozilla Firefox!
Шаг № 1
Открываем Mozilla Firefox
Шаг № 2
Нажимаем Ctrl + Shift + A и попадаем в дополнения.
Шаг № 3
В левом меню выбираем – Расширения:
Шаг № 4
В поиске (в правом верхнем углу) вбиваем Measurelt и нажимаем Enter:
Шаг № 5
Устанавливаем найденное дополнение и перезапускаем браузер, расширение имеет вот такую иконку:
Шаг № 6
Открываем в браузере нашу игру и в правом верхнем углу выбираем нашу линейку, нажав на иконку:
Шаг № 7
Осталось только определить координаты, я покажу на примере картинки из данного урока.
От левого верхнего угла картинки нажимаем и протягиваем до нужной точки (до отличия):
Как видите, у меня получилось: W: 143px H: 206px – это значит, что отступ сверху равен 206px, а отступ слева 143px – эти данные я и заношу в массив coordinates. как:
'206#143'
И так далее для всех остальных точек.
P.S. изменять нужно от левого верхнего угла какой-то определенной картинки, советую все измерения делать на левой картинке, но если хотите измерить координаты на правой картинке, то делайте это от левого верхнего угла именно второй картинки!
Как видите, ничего сложного нет, надеюсь, данный урок будет для вас полезен.
Вопросы можно задать в комментариях, на этом у меня все, желаю вам удачи, пока!
Если вам нужна помощь в создании какого-либо функционала, сайта, сервиса, тестов или калькуляторов, то готов помочь, подробнее на странице услуг.