Javascript

Question

我目前正在开发一款名为“WordShuffle”的浏览器游戏。
（如果你想玩的话，目前的单词是德语，用于测试目的）

我的进步很顺利，但我决定改变你玩游戏的方式。目前，您必须通过在文本字段中输入您的猜测来查询单词。
所以我的想法是现在人们可以通过以正确的顺序拖放单词而不是将其键入文本字段来重新排列单词中的字母。

因为我不擅长javascript（我认为这应该最适合javascript）我需要帮助。
但是，我必须能够从中得到一个值才能将它与正确的词进行比较。
提交按钮应传递值。

我制作了概念图以更好地了解它：

Answer 1

您可以使用 jQuerys 可排序 (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();
});

http://jsfiddle.net/dbp2988e/

然后你需要做的就是遍历单词 div 中的 div 并获取每个 div 的内部 HTML（或通过jQuery.html())。然后制作一个字符串并根据密码验证它。

Answer 2

这是一个使用 jquery-ui sortable e and Fisher-Yates shuffle algorithm 的工作示例：

$(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>

Javascript - 在 word 中拖动字母（重新排列）

Javascript - drag letters in word (Rearrange)

drag-and-drop

word