Javascript - Need guidance: Guess word using clickable shuffled letters (game)

Question

I'm new to stackoverflow and currently on week 2 of learning coding. I'm looking for some guidance as I am creating a basic JavaScript game whereby the user has to guess the title of the movie using a group of scrambled letters.

As you can see in the image, the Shuffled(scrambled) Letters div at the bottom, consists of the movie title, shuffled amongst other letters. I'd like there to be 13 letters to choose from with eg. 'Star Wars' scrambled amongst other random letters. I would like the letter to hide on click and show itself in the Movie Title div above. When the letters are in the correct order and spell out the correct title, the player moves on to the next word.

I'm not sure if I'm on the right track.

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

~title.letter[] = display.none

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

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

} 

// I suppose I'd need to create an array of random letters that will be added to the array of the shuffled movie title, so that it totals 13 letters for every question.

// Then perhaps add fisher-yates shuffle algorithm to each movie?

Answer 1

Two arrays:

One for the shuffled letters

One for the selected letters

Use Array.splice to remove the selected item by index.

Use Array.push to add the selected letters to the selected letters array.

Re-render the shuffled letters

Re-render the selected letters

Answer 2

Your main problem is identify the right letters to when user click, put on frontend, the rest it's just pretty basic (shuffle the letters, display then to user clicks, each letter clicked goes to Movie Title right boxes).Fisher-Yates shuffle in javascript already has a version here in Stack, the difference is that you need the right combination of each letter if you want to secure your frontend like you want, to that I recommend an array, where the first dimension is the dimension with the letter itself. So in that algorithm in the bottom, i'll need to fill first the array with the right letters order to when mount the frontend empty boxes have an data-attribute in each box telling the letter that corresponds to him or just take the splited array and uses that in an forEach when creating the boxes by creating them by javascript or creating them with backend and so later filling each box with the right split:

 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: You don't need to hide the letters, use data-attributes to identify the right position of them in the Movie Title container and append that in the empty boxes. The letters that doesn't correspond to the movie title just put with data-attributes empty and your algorithm will filter that putting a red border into selected wrong letter and stuff;