Посоветуйте библиотеку или язык для игр
Хочу на своем сайте учителя сделать небольшие игры, для зарегистрированных пользователей. Игры (тесты) простые, типа перетащи слова в нужные места, или соедени линиями или выбери перевод ну и в таком духе, смысл что надо что-то правильно перетащить по экрану. Это должно работать в браузере и желательно использовать html+css+js, чтобы в конце можно было отправить как обычную html форму, я проверю это все дело на php и запишу результаты в базу.
Сам вопрос, на чем это можно делать? html+css+php я знаю довольно не плохо, но этого не достаточно, js знаю плохо, но насколько я понимаю там нельзя зделать всю эту кухню с перетаскиваниями элементов по экрану и чтобы они прилипали к блокам, возможно для этого есть какая-то библиотека. Хотябы одну сделать и потом напишу под нее админку, чтобы на ее основе можно было тупо менять слова и собирать новые игры (тесты). Еще раз чтобы было понятнее, формы я могу сделать любые, с чекбоксами, выпадающими списками и стилизовать их как угодно, мне нужна интерактивность, вот ее не знаю как сделать. Пример, слева 3 разноцветных замка, справа 3 таких же цветов ключа, все ключи можно схватить и дотащить до любого замка, после отправки формы те которые совпали откроются, а остальные нет и вот типа такого. После я поменяю замки и ключи на животных и их еду или другие подобные вещи) Готов рассмотреть все предложения. |
Гуглите по "drag and drop" и выбирайте библиотеку по вкусу.
|
Что-то получается, пока не могу решить чтобы если уже есть слово, второе туда нельзя перетащить было или они менялись бы местами:
<!DOCTYPE HTML> <html> <head> <style> #div1, #div2, #div3 { display: inline-block; width: 100px; margin: 10px; padding: 10px; border: 1px solid black; } #div1 input, #div2 input, #div3 input { width: 100%; display: block; text-align: center; vertical-align: middle; background: #006696; color: #fff; } .mesto { height: 20px; min-width: 70px; border: 1px solid #000; display: inline-block; vertical-align: middle; background: #006696; } .mesto input { width: fit-content; background: #006696; padding: 0 10px; color: #fff; border: none; vertical-align: middle; text-align: center; min-width: 50px; height: inherit; } p { display: block; float: none; clear: both; margin-top: 50px;} </style> <script> 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> </head> <body> <h2>Расставь пропущенные слова в предлоежнии</h2> <div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"> <input type="text" disabled draggable="true" ondragstart="drag(event)" value="Магазин" id="drag1"> </div> <div id="div2" ondrop="drop(event)" ondragover="allowDrop(event)"> <input type="text" disabled draggable="true" ondragstart="drag(event)" value="Молоко" id="drag2"> </div> <div id="div3" ondrop="drop(event)" ondragover="allowDrop(event)"> <input type="text" disabled draggable="true" ondragstart="drag(event)" value="Хлеб" id="drag3"> </div> <p> Он пошел в <span class="mesto" id="div11" ondrop="drop(event)" ondragover="allowDrop(event)"></span> , чтобы купить <span class="mesto" id="div12" ondrop="drop(event)" ondragover="allowDrop(event)"></span> и свежий <span class="mesto" id="div13" ondrop="drop(event)" ondragover="allowDrop(event)"></span> на ужин. </p> </body> </html> // Сори, не получилось чтобы внизу была кнопка с запуском(( |
[HTML run] - чтоб был запуск.
Не рекомендую использовать нативный d&d - слишком много ручной работы, граблей и подводных камней для чего угодно кроме "базовых примеров". Найдите жирную библиотеку с поддержкой всего-всего и заюзайте. Если когда-нибудь захочется оптимизировать всё в натив - тогда уже спокойно сможет ковыряться в этом не рискуя закончить не начав. |
Цитата:
Leon2110, у вас разметка определённо усложнена... Вот ваш пример (только разметка, достаточно указать, что должно перетаскиваться (атрибут draggable="true"), в какой элемент, можно перетаскивать (атрибут dropzone), также вы можете захотеть, чтобы определённые dropzone могли принимать более чем один элемент (можно сделать, например, при помощи собственного атрибута data-multiple, это вы для себя решаете, что по умолчанию dropzone принимает только один элемент, а при указании data-multiple — сколько угодно)) Вот ваш пример в более читаемом виде... <section id="game-1"> <h1>Расставь пропущенные слова в предложении</h1> <ul dropzone data-multiple> <li draggable="true">Магазин</li> <li draggable="true">Молоко</li> <li draggable="true">Хлеб</li> </ul> <p> Он пошел в <span dropzone></span>, чтобы купить <span dropzone></span> и свежий <span dropzone></span> на ужин. </p> </section> В принципе, оперируя атрибутами draggable="true", dropzone и data-multiple можно описать игры в слова, типа «заполнить пропуски», «расставить буквы», а также «собрать пазл» и пр. подобное. При отпускании элемента с атрибутом draggable="true" над элементом с атрибутом dropzone происходит всплывающее событие drop (вообще-то оно происходит везде, но вас интересуют только взаимодействие элементов с атрибутами draggable="true" и dropzone) Отслеживая это событие, вы сможете, например, когда определённые ячейки в игре будут заполнены, проверить правильность заполнения (даже при помощи серверной программы!) Также вас наверняка интересует область видимости, т. е. чтобы в случае нескольких игр на странице, нельзя было элементы от одной игры перетаскивать в другие игры. (В скрипте, который я вам приведу, область видимости ограничивается ближайшим элементом с селектором section или .task) Стили вы можете применить ко всем этим элементам, возможности безграничны! Теперь рабочий пример. Вот к вашему примеру ещё «пазл», чтобы было видно, как работает область видимости — https://codepen.io/Malleys/pen/GRgXqJW?editors=1010 |
Malleys,
:thanks: |
Malleys, спасибо, это просто бомба, то что нужно) :dance:
Ай да js)) Замечательные примеры, буду повторять у себя, придумаю как сделать валидацию, правильно ли задание было выполнено и надо писать какую-то мини админку через которую обычный учитель без знаний программирования сможет собирать подобные тесты. |
Часовой пояс GMT +3, время: 15:50. |