[英]Javascript - drag letters in word (Rearrange)
我目前正在开发一个名为“ WordShuffle ”的浏览器游戏。
(如果您想玩,此刻德语是测试用的单词)
我的进步很顺利,但是我决定改变您玩游戏的方式。 目前,您必须通过在文本字段中输入猜测来查询单词。
因此,我现在的想法是,人们可以通过按正确的顺序拖放单词来重新排列单词中的字母,而不用将其键入文本字段中。
由于我不擅长javascript(我认为这应该最适合javascript),因此我需要帮助。
但是,我必须能够从中获得一个价值,以便能够将其与正确的单词进行比较。
提交按钮应该传递值。
您可以使用jQuerys Sortable( https://jqueryui.com/sortable/ )。
这样,您可以创建一个可排序的单词,其中每个字母实际上都位于一个单独的div中。 例如这样:
HTML:
<div class="word">
<div>E</div>
<div>X</div>
<div>A</div>
<div>M</div>
<div>P</div>
<div>L</div>
<div>E</div>
</div>
JS:
$(function () {
$(".word").sortable();
});
然后,您需要做的就是遍历div单词中的div并获取每个div的innerHTML(或通过jQuery .html())。 然后将其制成单个字符串,并针对秘密单词进行验证。
这是一个使用jquery-ui可排序 e和Fisher-Yates随机算法的工作示例:
$(function() { $("#wordblock").sortable(); $("#wordblock").disableSelection(); const word = 'example'; let d_word = word.split(''); shuffle(d_word); const lis = []; for (let i = 0; i < d_word.length; i++) { lis.push('<li class="ui-state-default">' + d_word[i] + '</li>') } $('#wordblock').html(lis.join('')); $('#wordblock').mouseup(function() { setTimeout(() => { let r_word = ''; $('#wordblock>li').each(function(e) { r_word += $(this).text(); }); if (r_word == word) { console.log("YOU FOUND IT! : " + r_word); } else { console.log("Keep trying!"); } }, 0); }); }); function shuffle(a, b, c, d) { c = a.length; while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d }
#wordblock { list-style-type: none; margin: 0; padding: 0; /* prevent text selection */ -webkit-touch-callout: none; -webkit-user-select: none; -khtml-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } #wordblock li { margin: 3px 3px 3px 0; padding: 1px; width: 40px; float: left; font-size: 3em; text-align: center; cursor: pointer; font-family: arial; background-color: rgb(0,100,155); color: white; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.css" /> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.js"></script> <ul id="wordblock"> </ul>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.