Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 15.01.2020, 22:33
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 53

Посоветуйте библиотеку или язык для игр
Хочу на своем сайте учителя сделать небольшие игры, для зарегистрированных пользователей. Игры (тесты) простые, типа перетащи слова в нужные места, или соедени линиями или выбери перевод ну и в таком духе, смысл что надо что-то правильно перетащить по экрану. Это должно работать в браузере и желательно использовать html+css+js, чтобы в конце можно было отправить как обычную html форму, я проверю это все дело на php и запишу результаты в базу.
Сам вопрос, на чем это можно делать? html+css+php я знаю довольно не плохо, но этого не достаточно, js знаю плохо, но насколько я понимаю там нельзя зделать всю эту кухню с перетаскиваниями элементов по экрану и чтобы они прилипали к блокам, возможно для этого есть какая-то библиотека.

Хотябы одну сделать и потом напишу под нее админку, чтобы на ее основе можно было тупо менять слова и собирать новые игры (тесты).

Еще раз чтобы было понятнее, формы я могу сделать любые, с чекбоксами, выпадающими списками и стилизовать их как угодно, мне нужна интерактивность, вот ее не знаю как сделать. Пример, слева 3 разноцветных замка, справа 3 таких же цветов ключа, все ключи можно схватить и дотащить до любого замка, после отправки формы те которые совпали откроются, а остальные нет и вот типа такого. После я поменяю замки и ключи на животных и их еду или другие подобные вещи)

Готов рассмотреть все предложения.

Последний раз редактировалось Leon2110, 15.01.2020 в 22:41.
Ответить с цитированием
  #2 (permalink)  
Старый 15.01.2020, 23:06
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,513

Гуглите по "drag and drop" и выбирайте библиотеку по вкусу.
__________________
29375, 35
Ответить с цитированием
  #3 (permalink)  
Старый 16.01.2020, 00:50
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 53

Что-то получается, пока не могу решить чтобы если уже есть слово, второе туда нельзя перетащить было или они менялись бы местами:

<!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>


// Сори, не получилось чтобы внизу была кнопка с запуском((

Последний раз редактировалось Leon2110, 16.01.2020 в 00:55.
Ответить с цитированием
  #4 (permalink)  
Старый 16.01.2020, 01:01
Аватар для Aetae
Любитель
Отправить личное сообщение для Aetae Посмотреть профиль Найти все сообщения от Aetae
 
Регистрация: 02.01.2010
Сообщений: 5,513

[HTML run] - чтоб был запуск.
Не рекомендую использовать нативный d&d - слишком много ручной работы, граблей и подводных камней для чего угодно кроме "базовых примеров". Найдите жирную библиотеку с поддержкой всего-всего и заюзайте. Если когда-нибудь захочется оптимизировать всё в натив - тогда уже спокойно сможет ковыряться в этом не рискуя закончить не начав.
__________________
29375, 35
Ответить с цитированием
  #5 (permalink)  
Старый 16.01.2020, 09:21
Аватар для Malleys
Профессор
Отправить личное сообщение для Malleys Посмотреть профиль Найти все сообщения от Malleys
 
Регистрация: 20.12.2009
Сообщений: 1,442

Сообщение от Aetae
Не рекомендую использовать нативный 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, 16.01.2020 в 09:23.
Ответить с цитированием
  #6 (permalink)  
Старый 16.01.2020, 09:57
Аватар для рони
Профессор
Отправить личное сообщение для рони Посмотреть профиль Найти все сообщения от рони
 
Регистрация: 27.05.2010
Сообщений: 27,540

Malleys,
Ответить с цитированием
  #7 (permalink)  
Старый 17.01.2020, 14:38
Аспирант
Отправить личное сообщение для Leon2110 Посмотреть профиль Найти все сообщения от Leon2110
 
Регистрация: 04.07.2016
Сообщений: 53

Malleys, спасибо, это просто бомба, то что нужно)
Ай да js)) Замечательные примеры, буду повторять у себя, придумаю как сделать валидацию, правильно ли задание было выполнено и надо писать какую-то мини админку через которую обычный учитель без знаний программирования сможет собирать подобные тесты.
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Посоветуйте js библиотеку для реализации анимаций zava75 Events/DOM/Window 2 21.11.2019 17:31
Посоветуйте качественные скрипты для разбора Alpunto Учебные материалы 0 20.11.2015 18:28
Посоветуйте самоучитель или обучающий сайт или видео курсы Seva1986 (X)HTML/CSS 14 26.01.2012 21:03
нужна программа для этого. Чем писать? javascript или php? spam-server Серверные языки и технологии 3 27.08.2009 00:52
Аналог wmode=transparent для Canvas или svg lusever Events/DOM/Window 1 15.06.2009 16:05