Пишем JavaScript код игры"5 отличий"

@Zoff74 · Регистрация: 24.11.2020

Студворк — интернет-сервис помощи студентам

Братцы. Помогите написать JavaScript (JQuery) код, к всем известной игре "Найди Отличия".

Реализация игры, немного простой теории.

Все отличия на двух картинках сделаны с помощь div блоков размером 20px на 20px. Когда мы на них нажимаем (было найдено отличие) у них добавляется круглая красная рамка. Изначально все эти отличия (блоки) будут присутствовать в исходном коде страницы, но игрок их не будет видеть, так как у них не будет рамки.
HTML верстка:

HTML5
1
2
3
4
5
6
        <div id="wrap">
                <div id="one"></div>
                <div id="two"></div>
        </div>
        
        <div id="info"></div>

Общий блок с id wrap содержит еще два блока, one – это левый блок (блок для первой картинки), и two это блок для правой картинки.
Блок с идентификатором info нужен для того, чтобы в него выводить количество найденных и оставшихся отличий.

Координаты (блоки) с отличиями будут одинаковыми как для левой, так и для правой картинки и их удобно хранить в массиве, поэтому все эти координаты должны будут заполняться автоматически скриптом.

1.После заполнения HTML код выглядит так:

HTML5
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<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>
   <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>
</div>
<div id="info"></div>

Каждая из координат представляем из себя div блок с классом area и отступами, например, данный код:

HTML5
1
<div style="margin:206px 0 0 143px" class="area"></div>

означает, что отличие (блок) имеет координаты:
отступ сверху: 206px
отступ справа: 0
отступ снизу: 0
отступ слева: 143px
и т.д.
======================================== ========

2.Теперь CSS стили:

CSS
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
#wrap{
    width: 916px;
    height: 691px;
    margin: 0 auto;
}
#wrap #one,#wrap #two{
        width: 50%;
        height: 100%;
        float: left;
    background: url(.../.../photo1.jpg);
}
#wrap #two{
    background: url(.../.../photo2.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 – стили для блока, в котором выводится информация о количестве найденных отличий.
===================================

3.Осталось самое главное – JavaScript (JQuery) код:

coordinates – это массив с координатами, например, координата:

'206#143' означает отступ сверху 206px и отступ слева 143px

Переменная curPoint хранит количество найденных отличий, по-умолчанию их 0.

Далее мы выводим в блок info информацию от текущем количестве отличий, coordinates.length – это размер массива с координатами, то есть сколько элементов в массиве, столько и отличий (в данном случае 5).
После этого идет цикл в котором заполняются два блока (#one и #two) координатами из массива.
Берется координата, например, 206#143 расщепляем её с помощью split(‘#’), то есть получаем по отдельности элементы разделенные решеткой
используем 2 полученных параметра (отступ сверху и слева) в стилях элемента div, который мы вставляем с помощью функции append.
Осталось обработать нажатие (клик) на отличие – логика здесь простая:
по клику на текущее отличие, добавляем ему красную рамку, далее определяем на какую из картинок (левую или правую) было нажатие, если нашли отличие на левой картинке, то добавляем отличие и на правую, если нашли на правой, то выделяем отличие и на левой.
Для определения порядкового номера элемента используем функцию index, то есть если мы нажали, например, на 5 элемент на левой картинке, то красную рамку мы добавляем и к 5 элементу правой картинки.

Операцией curPoint++ увеличиваем количество найденных отличий, после чего, выводим об этом информацию.
============================
Так вот. Это теория без Java Script кода. Помогите написать (или напишите) полный JavaScript (JQuery) код. Для профи это наверное не так трудно как мне.
С Уважением к присутствующим...

@Padonak · 23.06.2022, 12:53

Что-то накалякал:

PHP/HTML
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>XZ</title>
    <style>
#wrap{
    width: 916px;
    height: 691px;
    margin: 0px;
}
#one,#two{
    width: 50%;
    height: 100%;
    float: left;
    background: url(1.jpg) no-repeat;
}
#two{
    background: url(2.jpg) no-repeat;
}
.area{
    width: 20px;
    height: 20px;
    position: absolute;
    -webkit-border-radius: 10px;
    -moz-border-radius: 10px;
    border-radius: 10px;
}
.found{
border: 1px solid red;
}
#info{
    width: 200px;
    text-align: center;
    margin: 20px auto;
}
    </style>
   <script>
   /*
   https://www.cyberforum.ru/javascript-jquery/thread3001981.html
  */
   const coordinates = ['206#143','177#211','282#197','233#340','321#188'];
   
   function doc(attr){
    return !arguments[1] ? document.querySelector(attr) : document.querySelectorAll(attr);
   }
   
   function buildTips(){
   dX = doc('#one').offsetWidth;
   
   coordinates.forEach( (crd, i) => {
   const temp = crd.split('#'),
         x = +temp[1] + dX,
         st_1 = temp.join('px; left:') + 'px',
         st_2 = temp[0] + 'px; left:' + x + 'px';;
   doc('#one').innerHTML += '<div data-tip="' + i + '" class="area" style="top:' + st_1 + ';"></div>';
   doc('#two').innerHTML += '<div data-tip="' + i + '" class="area" style="top:' + st_2 + ';"></div>';
   } );
   
   doc('[data-tip]', 1).forEach( (div) => div.addEventListener('click', function(e){
   const elem = e.target,
         tip = elem.getAttribute('data-tip'),
         sec_id = elem.parentNode.id == 'one' ? 'two' : 'one';
   if(elem.classList.contains('found')) return;
   elem.classList.add('found');
   doc('#' + sec_id + ' [data-tip="' + tip + '"]').classList.add('found');
   doc('#info').innerHTML = 'Найдено ' + doc('.found', 1).length / 2 + ' отличий из ' + coordinates.length;
   })
   );
   
   }
   
   onload = buildTips;
   </script>
  </head>
  <body>    
    <div id="wrap">
        <div id="one"></div>
        <div id="two"></div>
    </div>
    <div id="info"></div>
  </body>
</html>

Рабочий пример

@Zoff74 · 30.06.2022, 09:19 **[ТС]**

Большое Человеческое Спасибо!
Даже не ожидал (хоть и надеялся) что кто то откликнется. На беглый взгляд заметил, что Вы намного и реально упростили код. Буду разбирать. Вы не против, если (когда) появятся вопросы по теме, я буду обращаться к Вам за помощью и советом?
С Уважением...

@gogolik · 30.06.2022, 09:22

Zoff74, вы всегда можете задать свой вопрос на форуме. На каждый вопрос создавайте по теме, чтобы не путаться и облегчить поиск будущим поколениям.

@Padonak · 30.06.2022, 22:48

Zoff74, дада, задавайте вопросы на форуме, вам наверняка помогут! Дядя Гоголик плохого не посоветует

Новые блоги и статьи Все статьи Все блоги /
Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Programma_Boinc 23.12.2025 Thinkpad X220 Tablet — это лучший бюджетный ноутбук для учёбы, точка. Рецензия / Мнение Это мой обзор планшета X220 с точки зрения школьника. Недавно я решила попытаться уменьшить свой. . .	PhpStorm 2025.3: WSL Terminal всегда стартует в ~ and_y87 14.12.2025 PhpStorm 2025. 3: WSL Terminal всегда стартует в ~ (home), игнорируя директорию проекта Симптом: После обновления до PhpStorm 2025. 3 встроенный терминал WSL открывается в домашней директории. . .	Как объединить две одинаковые БД Access с разными данными VikBal 11.12.2025 Помогите пожалуйста !! Как объединить 2 одинаковые БД Access с разными данными.	Новый ноутбук volvo 07.12.2025 Всем привет. По скидке в "черную пятницу" взял себе новый ноутбук Lenovo ThinkBook 16 G7 на Амазоне: Ryzen 5 7533HS 64 Gb DDR5 1Tb NVMe 16" Full HD Display Win11 Pro	Музыка, написанная Искусственным Интеллектом volvo 04.12.2025 Всем привет. Некоторое время назад меня заинтересовало, что уже умеет ИИ в плане написания музыки для песен, и, собственно, исполнения этих самых песен. Стихов у нас много, уже вышли 4 книги, еще 3. . .
От async/await к виртуальным потокам в Python IndentationError 23.11.2025 Армин Ронахер поставил под сомнение async/ await. Создатель Flask заявляет: цветные функции - провал, виртуальные потоки - решение. Не threading-динозавры, а новое поколение лёгких потоков. Откат?. . .	Поиск "дружественных имён" СОМ портов Argus19 22.11.2025 Поиск "дружественных имён" СОМ портов На странице: https:/ / norseev. ru/ 2018/ 01/ 04/ comportlist_windows/ нашёл схожую тему. Там приведён код на С++, который показывает только имена СОМ портов, типа,. . .	Сколько Государство потратило денег на меня, обеспечивая инсулином. Programma_Boinc 20.11.2025 Сколько Государство потратило денег на меня, обеспечивая инсулином. Вот решила сделать интересный приблизительный подсчет, сколько государство потратило на меня денег на покупку инсулинов. . . .	Ломающие изменения в C#.NStar Alpha Etyuhibosecyu 20.11.2025 Уже можно не только тестировать, но и пользоваться C#. NStar - писать оконные приложения, содержащие надписи, кнопки, текстовые поля и даже изображения, например, моя игра "Три в ряд" написана на этом. . .	Мысли в слух kumehtar 18.11.2025 Кстати, совсем недавно имел разговор на тему медитаций с людьми. И обнаружил, что они вообще не понимают что такое медитация и зачем она нужна. Самые базовые вещи. Для них это - когда просто люди. . .

@Zoff74 0 / 0 / 0 Регистрация: 24.11.2020 Сообщений: 3
	30.06.2022, 09:19 [ТС]
	Большое Человеческое Спасибо! Даже не ожидал (хоть и надеялся) что кто то откликнется. На беглый взгляд заметил, что Вы намного и реально упростили код. Буду разбирать. Вы не против, если (когда) появятся вопросы по теме, я буду обращаться к Вам за помощью и советом? С Уважением... 0

@gogolik Супер-модератор 3941 / 2045 / 829 Регистрация: 13.03.2010 Сообщений: 6,729
	30.06.2022, 09:22
	Zoff74, вы всегда можете задать свой вопрос на форуме. На каждый вопрос создавайте по теме, чтобы не путаться и облегчить поиск будущим поколениям. 0

@Padonak Философ-разговорник 1066 / 391 / 120 Регистрация: 20.02.2016 Сообщений: 884 Записей в блоге: 1
	30.06.2022, 22:48
	Zoff74, дада, задавайте вопросы на форуме, вам наверняка помогут! Дядя Гоголик плохого не посоветует 0