БлогNot. Идея скрипта: расставь слова по позициям

Идея скрипта: расставь слова по позициям

В предыдущей заметке мне пришла в голову идея:

Картинку - фоном, накидать 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
World Chess Champions

29.09.2017, 21:22 [2698 просмотров]


теги: javascript html шахматы css браузеры игра

К этой статье пока нет комментариев, Ваш будет первым