Javascript - 拖放字母（重新排列）

Question

我目前正在研究名爲「WordShuffle」的瀏覽器遊戲。
（如果你想玩的話，現在的話是德語測試）

我的進度很不錯，但我決定改變你玩遊戲的方式。目前，你必須通過在文本框中輸入你的猜測來使這個詞變得簡單。
所以我現在的想法是，人們可以重新排列一個單詞中的字母，然後按照正確的順序拖放它，而不是將它輸入到文本框中。

因爲我不擅長JavaScript（我認爲這應該與JavaScript最好）我需要幫助。
但是，我必須能夠從中獲得價值，才能將其與正確的單詞進行比較。
提交按鈕應該傳遞值。

我做了一個概念藝術得到它一個更好的主意：

Answer 1

下面是使用jquery-ui sortable e和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>

Answer 2

你可以使用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的innerHTML（或通過jQuery .html（））。然後製作一個單一的字符串，並對照這個祕密詞進行驗證。