JavaScript - 需要指导 : Guess word using clickable shuffled letters (game)

Question

我是 stackoverflow 的新手，目前正在学习编码的第二周。我正在寻找一些指导，因为我正在创建一个基本的 JavaScript 游戏，用户必须使用一组打乱的字母来猜测电影的标题。

正如您在图像中看到的，底部的打乱(乱序)字母 div 由电影标题和其他字母组成。我希望有 13 个字母可供选择，例如。 “星球大战”混杂在其他随机字母中。我希望该字母在单击时隐藏并显示在上面的电影标题 div 中。当字母的顺序正确并拼出正确的标题时，玩家就会转到下一个单词。

我不确定自己是否走在正确的道路上。

var Movie1 = 'Star Wars' (each letter being in an array maybe?)

~title.letter[] = display.none

if (letter == title.letter[]) {

return title.letter[] == display.true;

} 

//我想我需要创建一个随机字母数组，将其添加到打乱顺序的电影标题数组中，这样每个问题总共有 13 个字母。

//那么也许可以为每部电影添加fisher-yates shuffle 算法？

Answer 1

您的主要问题是在用户单击时识别正确的字母，并将其放在前端，其余的只是非常基本的(随机排列字母，然后显示到用户单击，单击的每个字母都会进入电影标题右侧的框)。 Fisher-Yates shuffle in javascript already has a version here in Stack ，不同之处在于，如果你想像你想要的那样保护你的前端，你需要每个字母的正确组合，对此我推荐一个数组，其中第一个维度是字母本身的维度。因此，在底部的算法中，我需要首先用正确的字母顺序填充数组，以便在安装前端空框时，每个框中都有一个数据属性，告诉与他对应的字母，或者只采用分割的数组并在创建框时在 forEach 中使用它，通过 javascript 创建它们或使用后端创建它们，然后用正确的分割填充每个框:

 Outside Shuffle function:

         //here you'll need to create the multidimensional array before shuffle him
    movietitle = title.split("");
    //in jquery
    i = 0; 
    //certify you will have a right number of boxes
    boxes.each(function(){
         $(this).data('letter', movietitle[i]);
         i++;
    });


String.prototype.shuffle = function () {
    var a = this.split(""),
        n = a.length;     

    for(var i = n - 1; i > 0; i--) {
        var j = Math.floor(Math.random() * (i + 1));
        var tmp = a[i];
        a[i] = a[j];
        a[j] = tmp;
    }
    return a.join("");
}
console.log("the quick brown fox jumps over the lazy dog".shuffle());
//-> "veolrm  hth  ke opynug tusbxq ocrad ofeizwj"

console.log("the quick brown fox jumps over the lazy dog".shuffle());
//-> "o dt hutpe u iqrxj  yaenbwoolhsvmkcger ozf 

  console.log(movietitle.shuffle());
//-> "movietitleshuffled

PS:您不需要隐藏字母，使用数据属性来识别它们在电影标题容器中的正确位置并将其附加到空框中。与电影标题不对应的字母只需将数据属性设置为空，您的算法将过滤将红色边框放入选定的错误字母和内容中；