Идея скрипта: расставь слова по позициям
В предыдущей заметке мне пришла в голову идея:
Картинку - фоном, накидать div'ов на гроссов и вперёд
Чтобы не откладывать кота в долгий ящик, реализуем её непосредственно в этой заметке блога :)
На самом деле, это и шаблон для любой игры в стиле "разместить объекты по позициям", написанной практически без кода и на чистом HTML5/CSS.
Настроив общие для всего документа и всех разделов свойства, в частности, общее абсолютное позиционирование,
сделаем нужную картинку фоном документа (у вас она, конечно, будет называться не 1.jpg
из текущей папки, как в листинге, показанном ниже, а иначе).
Каждая позиция, куда (и откуда) можно будет перетаскивать, описывается схожим образом:
#div1 { top: 30px; left: 40px; }
- в стиле (для простоты размеры всех div'ов в документе одинаковы) и
<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag1">1 </span> </div>
- в разметке (атрибуты id
перетаскиваемых элементов <span>
нужны, а то не будет работать Javascript).
А обеспечивает перетаскивание несложный Javascript-код, взятый прямо из стандарта HTML5:
<script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <noscript>You need Javascript to do it!</noscript>
Абсолютное позиционирование разделов в HTML/XML-документе - вещь нелёгкая, но если вдумчиво почитать и располагать элементы в естественном порядке "слева направо и сверху вниз", то их расположение нетрудно подобрать, меняя стили в любимом текстовом редакторе и обновляя формируемую страничку в браузере. Следите только, чтобы абсолютные позиции div'ов не накладывались друг на друга, это создаёт дополнительные проблемы.
Мне показалось, в любом случае приятнее, чем составлять Imagemap :) При необходимости, положение текста над нужными частями картинки можно подкорректировать атрибутами text-align
классов #div
.
Всё описание пользовательской работы указано на странице скрипта:
Перетащите фамилии на правильные места 1...18, места помечены зелёными рамками.
Сделайте копию полученного экрана клавишей Print Screen, вставьте в графический редактор (Paint) рисунок из Буфера обмена, сохраните его и отправьте полученный файл на адрес E-mail pers@mail.ru.
Обновить и начать заново - клавиша F5. Если мелко, нажмите при зажатой Ctrl серый "+" справа.
А теперь решите эту задачу - "кто есть кто на картинке" и пришлите ответ мне, я, как и писал, узнаю только троих-четверых :)
Расставить гроссмейстеров по позициям
Расставить гроссмейстеров по позициям, файл скрипта .html (скачать через меню по правой кнопке мыши) (9 Кб)
Полный листинг приложения (с учётом сказанного о пути к фоновой картинке):
<!DOCTYPE HTML> <html> <head> <meta charset="utf-8"> <style type="text/css"> body { background-color: transparent; background-image: url(1.jpg); background-repeat: no-repeat; border:0; margin: 0; padding: 0; } div { position: fixed; width: 114px; height: 20px; margin: 2px; padding: 2px; border: 1px dotted green; } span { left: 2px; top: 2px; color: red; font-weight: bold; } p { margin: 2px; padding: 2px; } [draggable=true] { cursor: move; } #div1 { top: 30px; left: 40px; } #div2 { top: 30px; left: 160px; text-align: center; } #div3 { top: 30px; left: 320px; } #div4 { top: 35px; left: 460px; } #div5 { top: 70px; left: 60px; text-align: right; } #div6 { top: 70px; left: 200px; text-align: center; } #div7 { top: 70px; left: 320px; text-align: center; } #div8 { top: 70px; left: 460px; text-align: right; } #div9 { top: 120px; left: 90px; } #div10 { top: 120px; left: 200px; text-align: right; } #div11 { top: 120px; left: 320px; } #div12 { top: 120px; left: 440px; text-align: center; } #div13 { top: 160px; left: 20px; } #div14 { top: 160px; left: 140px; } #div15 { top: 170px; left: 260px; text-align: right; } #div16 { top: 170px; left: 390px; } #div17 { top: 200px; left: 400px; text-align: right; } #div18 { top: 230px; left: 460px; text-align: right; } #div101 { top: 360px; left: 0px; } #div102 { top: 360px; left: 120px; } #div103 { top: 360px; left: 240px; } #div104 { top: 360px; left: 360px; } #div105 { top: 360px; left: 480px; } #div106 { top: 390px; left: 0px; } #div107 { top: 390px; left: 120px; } #div108 { top: 390px; left: 240px; } #div109 { top: 390px; left: 360px; } #div110 { top: 390px; left: 480px; } #div111 { top: 420px; left: 0px; } #div112 { top: 420px; left: 120px; } #div113 { top: 420px; left: 240px; } #div114 { top: 420px; left: 360px; } #div115 { top: 420px; left: 480px; } #div116 { top: 450px; left: 0px; } #div117 { top: 450px; left: 120px; } #div118 { top: 450px; left: 240px; } #div0 { top: 480px; left: 0px; width: 600px; height: 100px; } </style> <script type="text/javascript"> function allowDrop(ev) { ev.preventDefault(); } function drag(ev) { ev.dataTransfer.setData("text", ev.target.id); } function drop(ev) { ev.preventDefault(); var data = ev.dataTransfer.getData("text"); ev.target.appendChild(document.getElementById(data)); } </script> <noscript>You need Javascript to do it!</noscript> </head> <body> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag1">1 </span> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag2">2 </span> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag3">3 </span> </div> <div id="div4" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag4">4 </span> </div> <div id="div5" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag5">5 </span> </div> <div id="div6" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag6">6 </span> </div> <div id="div7" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag7">7 </span> </div> <div id="div8" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag8">8 </span> </div> <div id="div9" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag9">9 </span> </div> <div id="div10" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag10">10 </span> </div> <div id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag11">11 </span> </div> <div id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag12">12 </span> </div> <div id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag13">13 </span> </div> <div id="div14" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag14">14 </span> </div> <div id="div15" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag15">15 </span> </div> <div id="div16" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag16">16 </span> </div> <div id="div17" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag17">17 </span> </div> <div id="div18" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag18">18 </span> </div> <div id="div101" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag101">Спасский</span> </div> <div id="div102" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag102">Карпов</span> </div> <div id="div103" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag103">Петросян</span> </div> <div id="div104" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag104">Полугаевский</span> </div> <div id="div105" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag105">Корчной</span> </div> <div id="div106" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag106">Кузьмин</span> </div> <div id="div107" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag107">Геллер</span> </div> <div id="div108" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag108">Григорян</span> </div> <div id="div109" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag109">Керес</span> </div> <div id="div110" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag110">Тайманов</span> </div> <div id="div111" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag111">Савон</span> </div> <div id="div112" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag112">Таль</span> </div> <div id="div113" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag113">Тукмаков</span> </div> <div id="div114" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag114">Рашковский</span> </div> <div id="div115" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag115">Смыслов</span> </div> <div id="div116" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag116">Аверкин</span> </div> <div id="div117" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag117">Свешников</span> </div> <div id="div118" ondrop="drop(event)" ondragover="allowDrop(event)"> <span draggable="true" ondragstart="drag(event)" id="drag118">Белявский</span> </div> <div id="div0"> <p> Перетащите фамилии на правильные места 1...18, места помечены зелёными рамками. <br> Сделайте копию полученного экрана клавишей Print Screen, вставьте в графический редактор (Paint) рисунок из Буфера обмена, сохраните его и отправьте полученный файл на адрес E-mail <a href="mailto:pers@mail.ru">pers@mail.ru</a>. <br> Обновить и начать заново - клавиша F5. Если мелко, нажмите при зажатой Ctrl серый "+" справа. </p> </div> </body> </html>
Сейчас проверил в новой "Лисе" и IE11, сработало, остальных браузеров под рукой нету :) Вероятнее всего, "Хромой" будет чо-нить коверкать и где-нибудь фамилия не влезет в строчку :)
P.S. Г-н Вячеслав Дурасов, он же abaza-tupik с Immorlal Chess (ссылка видна только авторизованным пользователям ресурса) оперативно и правильно решил задачу, прислав вот такую картинку:
Решение задачи о 18 гроссмейстерах (170 Кб)
Получается, я с ходу угадал всё же 5 человек :)
Картинка в тему: турецкий художник Serkan Ergün, "World Chess Champions" (2014). Кто второй слева в ряду стоящих? :)
World Chess Champions
29.09.2017, 21:22 [2698 просмотров]