HTML мини-игра

@sunday24 · Регистрация: 19.08.2013

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

Здравствуйте! Была бы очень благодарна, если бы вы мне помогли разобраться с такой задачей. Вот на этом сайте увидела следующую игру http://www.quiz-en-folie.com/memo-regions.php, хотела бы вставить такую же в свой блог. Возможно ли это? Смотрела исходный код страницы, пыталась переделать под свое, но не очень получилось, кое-что работает, кое-что нет. Я новичок, хотела бы узнать какие параметры в коде я должна изменить на свои, а какие так и должны остаться. Если это вообще возможно. Заранее большое спасибо!

P.S. Чтобы начать игру, надо нажать jouer, затем сбоку пишется имя региона, который нужно найти на карте.

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

У меня получается вот так :

Всплывающая картинка не в том месте, они все как-будто смещаются влево и вниз, и еще она непрозрачная.

Игра установлена в Blogger. Где может быть проблема?

Спасибо!

Комментарий модератора

Загружайте изображения и файлы на форум и прикрепляйте к сообщению.
https://www.cyberforum.ru/abou... post594251

@x00 · 20.08.2013, 20:11

Сообщение от sunday24

Игра установлена в Blogger. Где может быть проблема?

Скорее всего проблема в том, что Вы что-то не так скопировали, или удалили что-то нужное.
У меня вот вроде получилось. Использовал свой макет.
В head страницы не забудьте вставить

HTML5
1
<script type="text/javascript" src="js/jquery.js"></script>

Я засунул файлы jquery.js и memo-regions.js в папку js, а все изображения (с ir1 по ir22.png и france.png) в папку img.
Если у Вас другие ссылки на эти файлы, то везде замените на своё.
Вот это я вставил в контейнер с текстом:

HTML5
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
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!-- GAME !-->
<img src="img/ir1.png" class="ir1" style="display:none;position:absolute;z-index:2;">
<img src="img/ir2.png" class="ir2" style="display:none;position:absolute;z-index:2;">
<img src="img/ir3.png" class="ir3" style="display:none;position:absolute;z-index:2;">
<img src="img/ir4.png" class="ir4" style="display:none;position:absolute;z-index:2;">
<img src="img/ir5.png" class="ir5" style="display:none;position:absolute;z-index:2;">
<img src="img/ir6.png" class="ir6" style="display:none;position:absolute;z-index:2;">
<img src="img/ir7.png" class="ir7" style="display:none;position:absolute;z-index:2;">
<img src="img/ir8.png" class="ir8" style="display:none;position:absolute;z-index:2;">
<img src="img/ir9.png" class="ir9" style="display:none;position:absolute;z-index:2;">
<img src="img/ir10.png" class="ir10" style="display:none;position:absolute;z-index:2;">
<img src="img/ir11.png" class="ir11" style="display:none;position:absolute;z-index:2;">
<img src="img/ir12.png" class="ir12" style="display:none;position:absolute;z-index:2;">
<img src="img/ir13.png" class="ir13" style="display:none;position:absolute;z-index:2;">
<img src="img/ir14.png" class="ir14" style="display:none;position:absolute;z-index:2;">
<img src="img/ir15.png" class="ir15" style="display:none;position:absolute;z-index:2;">
<img src="img/ir16.png" class="ir16" style="display:none;position:absolute;z-index:2;">
<img src="img/ir17.png" class="ir17" style="display:none;position:absolute;z-index:2;">
<img src="img/ir18.png" class="ir18" style="display:none;position:absolute;z-index:2;">
<img src="img/ir19.png" class="ir19" style="display:none;position:absolute;z-index:2;">
<img src="img/ir20.png" class="ir20" style="display:none;position:absolute;z-index:2;">
<img src="img/ir21.png" class="ir21" style="display:none;position:absolute;z-index:2;">
<img src="img/ir22.png" class="ir22" style="display:none;position:absolute;z-index:2;">
<div id="page">
<div id="gauche">
<div id="corps">
<div id="memoregions" style="display: block;">
<h1 style="text-align: center;">Placez les rйgions de France</h1>
Un petit jeu pour apprendre а placer toutes les rйgions (22 au 
total) de la France Mйtropolitaine sur une carte. Appuyez sur "jouer" 
pour commencer puis essayez de trouver le bon emplacement de la rйgion 
demandйe sur la carte de France.<br>
                A chaque fois que vous aurez trouvй la bonne rйgion, elle sera rajoutйe sur la carte. <br>
                <br>
                <div id="zone" style="height:130px;">
                    <button type="button" onclick="rhas();" class="btn" style="text-align:center;margin-left:300px;">jouer</button><br>
                    <div style="float:right;margin-right:5px;font-size:1.6em;">
                        <span class="r1" style="display:none;">Bretagne</span>
                        <span class="r2" style="display:none;">Basse-Normandie</span>
                        <span class="r3" style="display:none;">Haute-Normandie</span>
                        <span class="r4" style="display:none;">Picardie</span>
                        <span class="r5" style="display:none;">Nord-Pas-de-Calais</span>
                        <span class="r6" style="display:none;">Champagne-Ardenne</span>
                        <span class="r7" style="display:none;">Lorraine</span>
                        <span class="r8" style="display:none;">Alsace</span>
                        <span class="r9" style="display:none;">Pays de la Loire</span>
                        <span class="r10" style="display:none;">Centre</span>
                        <span class="r11" style="display:none;">Ile-de-France</span>
                        <span class="r12" style="display:none;">Bourgogne</span>
                        <span class="r13" style="display:none;">Franche-Comtй</span>
                        <span class="r14" style="display:none;">Rhфne-Alpes</span>
                        <span class="r15" style="display:none;">Auvergne</span>
                        <span class="r16" style="display:none;">Limousin</span>
                        <span class="r17" style="display:none;">Poitou-Charentes</span>
                        <span class="r18" style="display:none;">Aquitaine</span>
                        <span class="r19" style="display:none;">Midi-Pyrйnйes</span>
                        <span class="r20" style="display:none;">Languedoc-Roussillon</span>
                        <span class="r21" style="display:none;">Provence-Alpes-Cфte d'Azur</span>
                        <span class="r22" style="display:none;">Corse</span>
                    </div>
                    <div>
                        <span id="points" style="display:none;">Nombre de rйgions trouvйes : <span class="nbpts">0</span><sub style="font-size:1.8em;">/22</sub></span>
                        <span id="nbtent" style="display:none;">NOMBRE D'ESSAIS : <span class="nbessai">0</span></span>
                    </div>
                    <span style="clear:both"></span>
                </div>
                <div style="float:right;margin-right:40px;">
                    <span class="juste" style="display:none;font-size:1.8em;color:blue;">OK</span>
                    <span class="faux" style="display:none;font-size:1.8em;color:red;">ERREUR</span>
                </div>
                <div>
                    <img src="img/france.png" usemap="#map" border="0" height="473" width="450">
                    <map name="map">
                    <area shape="poly" coords="19,131,47,141,62,150,76,156,108,140,110,124,93,123,91,119,58,123,48,109,30,115,20,111,21,120" class="z1">
                    <area shape="poly" coords="114,110,145,110,154,116,163,115,168,124,171,112,159,107,157,86,143,92,122,84,114,93,105,70,105,77,109,102" class="z2">
                    <area shape="poly" coords="159,72,171,63,194,56,201,60,201,81,192,99,183,106,179,97,171,98,169,78" class="z3">
                    <area shape="poly" coords="202,49,210,42,216,57,229,49,254,58,275,54,271,75,256,82,261,95,256,97,252,88,235,90,223,83,213,84,213,61" class="z4">
                    <area shape="poly" coords="209,31,218,37,229,32,245,40,251,44,272,46,271,39,258,38,250,30,239,22,227,18,227,7,208,13,211,22" class="z5">
                    <area shape="poly" coords="295,50,283,68,279,84,268,94,270,108,262,111,267,123,269,135,277,138,299,138,313,149,313,155,322,155,326,147,322,135,300,117,305,67,295,65" class="z6">
                    <area shape="poly" coords="319,72,311,108,337,133,343,135,365,139,370,124,363,116,367,108,361,99,362,91,352,86,352,79,332,79" class="z7">
                    <area shape="poly" coords="392,94,381,99,380,113,378,121,372,143,376,160,382,157,381,139,385,114,398,102,399,100" class="z8">
                    <area shape="poly" coords="85,169,121,149,126,135,123,123,143,125,155,131,168,139,158,156,145,162,144,178,120,182,120,204,124,213,106,213,91,206,86,184,101,171" class="z9">
                    <area shape="poly" coords="159,171,178,150,184,135,181,121,194,116,213,135,220,134,229,147,237,145,234,174,242,193,225,203,223,212,189,211,184,191,166,184" class="z10">
                    <area shape="poly" coords="203,102,209,91,237,102,246,102,255,115,251,120,241,121,240,133,229,125,210,117" class="z11">
                    <area shape="poly" coords="250,132,258,134,266,147,274,156,297,154,306,164,314,165,315,206,301,208,298,223,283,221,273,199,253,198,248,171" class="z12">
                    <area shape="poly" coords="338,150,364,150,366,175,341,203,342,215,325,216,326,185,330,169,328,163" class="z13">
                    <area shape="poly" coords="275,236,306,236,310,220,317,220,322,231,338,229,348,240,360,228,366,248,373,261,363,275,357,266,348,274,347,287,326,297,331,316,316,308,305,312,288,313,284,297,300,271,294,263,284,263" class="z14">
                    <area shape="poly" coords="233,218,243,208,264,211,271,222,262,230,267,260,269,274,283,277,278,287,249,283,242,289,238,281,226,288,223,279,240,262,238,253,243,238" class="z15">
                    <area shape="poly" coords="182,230,195,223,218,223,228,231,227,242,225,256,214,280,198,280,194,257,180,251,180,250,182,245" class="z16">
                    <area shape="poly" coords="131,191,156,191,173,202,177,217,170,231,169,242,157,251,140,270,123,256,114,244,120,233,115,225,139,226" class="z17">
                    <area shape="poly" coords="162,260,182,262,188,283,172,305,170,323,133,330,126,345,134,363,132,378,93,357,110,309,115,299,114,285,112,272,123,290,139,283,160,275" class="z18">
                    <area shape="poly" coords="197,289,213,289,214,305,232,305,237,297,255,325,247,339,223,347,197,349,189,364,206,382,208,391,197,384,184,386,170,375,160,387,144,383,148,363,143,340,177,333,184,312" class="z19">
                    <area shape="poly" coords="216,402,241,396,239,373,286,339,287,345,302,327,278,324,268,296,252,296,266,332,253,350,238,355,228,362,206,362,219,371,223,395" class="z20">
                    <area shape="poly" coords="297,352,355,365,390,335,396,335,399,323,388,326,368,308,373,292,359,280,360,289,338,303,344,322,330,329,317,322,307,341" class="z21">
                    <area shape="poly" coords="375,416,388,407,395,412,397,426,393,448,390,461,381,455,379,437,374,432" class="z22">
                    </map>
                </div>
                <br><br>
                Pour rappel et pour vous aider, voici le nom des 22 rйgions franзaises : <br><br>
                L'Alsace<br>
                L'Aquitaine<br>
                L'Auvergne<br>
                La Basse Normandie<br>
                La Bourgogne<br>
                La Bretagne<br>
                Le Centre<br>
                La Champagne-Ardenne<br>
                La Corse<br>
                La Franche-Comtй<br>
                La Haute Normandie<br>
                L'Ile de France<br>
                Le Lanquedoc Roussillon<br>
                Le Limousin<br>
                La Lorraine<br>
                Le Midi Pyrйnйes<br>
                Le Nord-Pas-De-Calais<br>
                Les Pays de la Loire<br>
                La Picardie<br>
                Le Poitou Charentes<br>
                La Provence Alpes Cфte d'Azur<br>
                Le Rhфne-Alpes<br>
                <br>    
                A vous de les placer sur la carte maintenant!<br>
                <br>
                    Retour a l'<a href="http://www.quiz-en-folie.com/">accueil</a><br>
                <br>
                <div class="gagne" style="text-align:center;display:none;">
                    <span style="font-size:2em;">BRAVO</span><br><br>
                    <a href="http://www.quiz-en-folie.com/memo-regions.php">Rejouer</a><br>
                </div>
            </div>
            <script type="text/javascript" src="js/memo-regions.js"></script>
            <script type="text/javascript">
            <!--
                $('#memoregions').css('display','block');
            //-->
            </script>
        </div>
    
</div>
<!-- GAME END !-->

Исходный код страницы и js полное говно, но переписывать нет желания :-)
Хотя скрипт, то сам по себе простой.

@sunday24 · 20.08.2013, 23:23 **[ТС]**

Огромное вам спасибо, но, к сожалению, не помогло

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

Добавлено через 15 минут
Попробовала сделать в другом блоге, но тоже на платформе blogger, та же проблема...картинки смещены вправо и вниз.

Добавлено через 6 минут
Вот ссылка на страницу переделанную, может быть так вам будет проще помочь мне

http://tuaimesparlerfrancais.b... es_19.html

@x00 · 21.08.2013, 01:09

Попробуйте заменить

HTML5
1
<script src="https://dl.dropboxusercontent.com/u/52264313/memo-regions.js" type="text/javascript">

на

HTML5
1
<script type="text/javascript" src="http://yourjavascript.com/3104272851/memo-regions.js"></script>

Глупое решение, но тем не менее должно работать.

@sunday24 · 21.08.2013, 12:12 **[ТС]**

Спасибо большое!

Вы мне очень помогли! Теперь стало намного лучше, единственное что, картинки до сих пор сползают направо...Как сделать так, чтобы они появлялись в том месте, где я кликаю мышью?

@x00 · 21.08.2013, 17:47

HTML5
1
<script type="text/javascript" src="http://yourjavascript.com/32180881153/memo-regions.js"></script>

Незначительно уменьшил отступ слева. Если все равно будет съезжать не так как нужно, то самостоятельно зайдите по этой ссылке, скопируйте текст скрипта в блокнот и найдите строчку

JavaScript
1
r-=250;t-=135;

скрипт такой неразборчивый стал потому что я его слегка сжал в размерах (был 6 кб стал 3 кб).
r можно не трогать это отступ сверху, он вроде как нормальный. А вот с t можете поэксперементировать.
Это отступ слева. Если картинки уезжают вправо, то делаем значение больше, например 140.
но это конечно ужасные костыли :-)

@sunday24 · 21.08.2013, 23:07 **[ТС]**

Спасибо вам огромное!!

Все получилось.

Добавлено через 5 часов 0 минут
Только сейчас заметила, на других компьютерах по-разному эти окна располагаются :/
На некоторых сползают довольно далеко....жалко, думала, что наконец-то все получилось!

@sunday24 · 24.08.2013, 07:47 **[ТС]**

А возможно сделать так, чтобы расположение элемента было относительно фоновой картинки например, вместо левого и верхнего края страницы? Тогда на разных экранах не возникало бы проблем.

Новые блоги и статьи Все статьи Все блоги /
Ритм жизни kumehtar 27.02.2026 Иногда приходится жить в ритме, где дел становится всё больше, а вовлечения в происходящее — всё меньше. Плотный график не даёт вниманию закрепиться ни на одном событии. Утро начинается с быстрых,. . .	[В процессе разработки] SDL3 для Web (WebAssembly): Сборка библиотек SDL3 и Box2D из исходников с помощью CMake и Emscripten 8Observer8 27.02.2026 Недавно вышла версия 3. 4. 2 библиотеки SDL3. На странице официальной релиза доступны исходники, готовые DLL (для x86, x64, arm64), а также библиотеки для разработки под Android, MinGW и Visual Studio. . . .	SDL3 для Web (WebAssembly): Реализация движения на Box2D v3 - трение и коллизии с повёрнутыми стенами 8Observer8 20.02.2026 Содержание блога Box2D позволяет легко создать главного героя, который не проходит сквозь стены и перемещается с заданным трением о препятствия, которые можно располагать под углом, как верхнее. . .	Конвертировать закладки radiotray-ng в m3u-плейлист damix 19.02.2026 Это можно сделать скриптом для PowerShell. Использование . \СonvertRadiotrayToM3U. ps1 <path_to_bookmarks. json> Рядом с файлом bookmarks. json появится файл bookmarks. m3u с результатом. # Check if. . .
Семь CDC на одном интерфейсе: 5 U[S]ARTов, 1 CAN и 1 SSI Eddy_Em 18.02.2026 Постепенно допиливаю свою "многоинтерфейсную плату". Выглядит вот так: https:/ / www. cyberforum. ru/ blog_attachment. php?attachmentid=11617&stc=1&d=1771445347 Основана на STM32F303RBT6. На борту пять. . .	Камера Toupcam IUA500KMA Eddy_Em 12.02.2026 Т. к. у всяких "хикроботов" слишком уж мелкий пиксель, для подсмотра в ESPriF они вообще плохо годятся: уже 14 величину можно рассмотреть еле-еле лишь на экспозициях под 3 секунды (а то и больше),. . .	И ясному Солнцу zbw 12.02.2026 И ясному Солнцу, и светлой Луне. В мире покоя нет и люди не могут жить в тишине. А жить им немного лет.	«Знание-Сила» zbw 12.02.2026 «Знание-Сила» «Время-Деньги» «Деньги -Пуля»

@sunday24 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 12
	20.08.2013, 23:23 [ТС]
	Огромное вам спасибо, но, к сожалению, не помогло может быть проблема именно в том, что это blogger ? мне еще вот подсказали что нужно сверить css исходной страницы и переделанной, но не объяснили, как это делается... Когда пробовала менять разные параметры самой страницы, размещать картинку посередине, эти всплывающие окна все равно смещались всегда вниз и направо. Добавлено через 15 минут Попробовала сделать в другом блоге, но тоже на платформе blogger, та же проблема...картинки смещены вправо и вниз. Добавлено через 6 минут Вот ссылка на страницу переделанную, может быть так вам будет проще помочь мне http://tuaimesparlerfrancais.b... es_19.html 0

@sunday24 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 12
	21.08.2013, 12:12 [ТС]
	Спасибо большое! Вы мне очень помогли! Теперь стало намного лучше, единственное что, картинки до сих пор сползают направо...Как сделать так, чтобы они появлялись в том месте, где я кликаю мышью? 0

@sunday24 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 12
	21.08.2013, 23:07 [ТС]
	Спасибо вам огромное!! Все получилось. Добавлено через 5 часов 0 минут Только сейчас заметила, на других компьютерах по-разному эти окна располагаются :/ На некоторых сползают довольно далеко....жалко, думала, что наконец-то все получилось! 0

@sunday24 0 / 0 / 0 Регистрация: 19.08.2013 Сообщений: 12
	24.08.2013, 07:47 [ТС]
	А возможно сделать так, чтобы расположение элемента было относительно фоновой картинки например, вместо левого и верхнего края страницы? Тогда на разных экранах не возникало бы проблем. 0