Javascript - 拖曳字母（重新排列） [英] Javascript - drag letters in word (Rearrange)

问题描述

我目前正在研究一个名为

解决方案

以下是使用 jquery-ui可排序的 e和 Fisher-Yates shuffle algorithm ：

  $（function（）{$（＃wordblock）。sortable（）; $（ ＃wordblock）disableSelection（）。 const word ='example';让d_word = word.split（''）;洗牌（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 + = $这个）.text（）;}）; if（r_word == word）{console.log（你发现它！+ r_word）;} else {console.log（Keep try！）;}}， 0）;}）;}）;函数shuffle（a，b，c，d）{c = a.length;而（c）b = Math.random（）*（--c + 1）| 0，d = a [c]，a [c] = a [b]，a [b] = d}  

  #wordblock {list-style-type：none;保证金：0;填充：0; / *防止文字选择* / -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）;颜色：白色;}  

 < script src =https ：//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js>< / script>< link rel =stylesheethref =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>  

I am currently working on a browsergame called "WordShuffle".
(words are german at the moment for test purpose, if you want to play)

My progress is going on pretty well, but I decieded to change the way how you play the game. At the moment you have to quess the word by typing your guess into a textfield.
So my idea is now that people are able to rearrange the letters in a word by draging and dropping it in the right order instead of typing it into a textfield.

Since I am not good at javascript (and I think this should work best with javascript) I need help by that.
However, I must be able to get a value out of it to be able to compare it to the correct word.
A submit button should pass the value.

I made a concept art to get a better idea of it:

解决方案

Here is a working example using 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 - 拖曳字母（重新排列）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！