Идея скрипта: расставь слова по позициям
В предыдущей заметке мне пришла в голову идея:
Картинку - фоном, накидать 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 [2680 просмотров]