javascript - 尝试比较两个数组并对其中之一重新排序

Question

我有两个数组，一个是随机生成的字符串，另一个是通过将用户输入推送到其中生成的。

两者都是空白的。

我需要将用户生成的数组与原始数组的长度和顺序进行比较，然后使用用户生成的数组来匹配原始数组。我研究了几种比较它们的可能性，但到目前为止对我来说还没有成功。

变量(在函数上方声明)

    var rightLtrsArr = [];
    var randWord;
    var randWordArr =[];

// step 1: set variables
// need variables for wins, losses, maxGuessCount, guessCount, wordsArr, wrongLtrsArr, rightLtrsArr,

var wins = 0;
var losses = 0;
var maxGuessCount = 10;
var guessCount = 0;
var words = ["evaluate", "leader", "glory", "thanks", "pit", "sign", "neighborhood", "twist", "beneficiary", "giant", "bargain", "analyst", "embark", "competition", "bench", "impress", "tick", 
            "elegant", "wing", "spring", "rider", "romantic", "confuse", "arrange", "critic", "quiet", "raise", "paradox", "inject", 
            "gallery", "scheme", "commerce", "museum", "computer", "fastidious", "impulse", "stand", "story", "pig", "oyster", "grim", 
            "speaker", "listen", "dense", "mass", "thin", "fat", "keys", "phone", "wallet", "money", "campaign",
            "mutter", "butterfly", "salmon", "occupation", "contempt", "landowner", "detector", "kidney", "faux", "require", "glass", "jug",
            "plastic", "overwhelm", "blackmail", "headquarters", "assignment", "competence"
        ];
var rightLtrsArr = [];
var randWord;
var randWordArr =[];


// START GAME FUNCTION
// _______________________________________________
function startGame() {
    // setting our win count/loss count box
    $('#winCountBox').html(wins);
    $('#lossCountBox').html(losses);

    // clearing the wrong guesses list box
    $('#wrongGuessList').empty();

    // disabling user input until a new word is called
    $('#userInput').attr('disabled', true);

    // clearing out guessCount box
    $('#guessesLeftBox').empty();

    // guesses alloted box
    $('#maxGuessCountBox').html(maxGuessCount);

    // clear wordbox
    $('#wordBox').empty();

}


// RESET GAME FUNCTION
// _______________________________________________

function resetGame() {

    // 2. resets win/loss record
    wins = 0;
    losses = 0;
    // 1. calls start game function
   startGame();
}

// GET WORD FUNCTION
// _______________________________________________
function getWord() {

    // clears the randWordArr of any previous words
    randWordArr.length = 0;

    // 2. generates a new word & pushes it into the randWordArray
    randWord = words[Math.floor(Math.random() * words.length)];
    var randWordLngth = randWord.length;
    randWordArr.push(randWord);
    console.log(randWordArr);
    console.log('The random word is ' + randWord + " and the length is " + randWordLngth);

    // 3. generates the blank spaces for the word
    var tempSpace = '';
    for (var i = 0; i < randWordLngth; i++) {
        tempSpace = tempSpace + ' ___ ';
    }

    $('#wordBox').html(tempSpace);

    // 4. resets maxGuessCount & guessCount
    guessCount = 0;
    maxGuessCount = 10;
    $('#guessesLeftBox').html(maxGuessCount);

    // 5. empties the list of wrongly guessed characters in html box
    $('#wrongGuessList').empty();

    // 6. allowing user to enter data into input field
    $('#userInput').attr('disabled', false);
}



// START GAME CLICK EVENT
// _______________________________________________
$('#startGameBTN').on('click', function(){
    startGame();
});



// NEW WORD CLICK EVENT
// _______________________________________________

$('#getWordBTN').on('click', function(){
    getWord();
});



// RESET GAME CLICK EVENT
// _______________________________________________

$('#resetGameBTN').on('click', function(){
    resetGame();
});



// GAMEPLAY FUNCTIONALITY
// _______________________________________________

// 1. button click event
$('#inputBTN').on('click', function(){

    // startGame();

    // 2. get user input
    var userInput = $('input').val().toLowerCase();
    console.log(userInput);
    $('input').val('');

    // 3. verify if user entered a single character/if not, throw err msg
    function isSingleInput (userInput){
        if(userInput.length === 1) {

            // 4. verify the char is a string and not a number/if not, throw err msg
            function isNumber(x) {
                if (isNaN(x)) {

                // 5. check if input character is in the randWordArr
                    var isCharInWord = randWord.indexOf(userInput);

                    // 6. if char is in the hidden word: print all instances of that letter to the screen surrounded by blank spaces
                    if (isCharInWord >= 0) {

                        rightLtrsArr.push(userInput);

                        // for (var i = 0; i < randWordArr; i++) {
                        //     console.log(randWordArr[i]);
                        // }

                        // var myNewArr = randWordArr.split();
                        // console.log(myNewArr);

                        // console.log(rightLtrsArr + " : " + rightLtrsArr.length);

                        // console.log(randWordArr.length);

                        // if (rightLtrsArr.length === randWordArr.length) {
                        //     console.log('the arrays are equal');
                        // } else {
                        //     console.log('they are not equal');
                        // }

                        // function arraysAreIdentical(rightLtrsArr, randWordArr){

                        //     if(rightLtrsArr.length != randWordArr) {
                        //         console.log("not equal");
                        //     }

                        //     // if (rightLtrsArr.length !== randWordArr.length) return false;
                        //     // for (var i = 0, len = rightLtrsArr.length; i < len; i++){
                        //     //     if (rightLtrsArr[i] !== randWordArr[i]){
                        //     //         console.log("false");
                        //     //     }
                        //     // }
                        //     // console.log("true"); 
                        // }

                        // arraysAreIdentical(randWordArr, randWordArr);

                        // for (var i = 0; i < rightLtrsArr.length; i++) {
                        //     $('#wordBox').html(rightLtrsArr[i]);
                        // }

                    } else {
                        console.log("nope, can't find it");

                    // 7. if char is not in the hidden word: create an array with chars that aren't in the word, print to screen as list, 
                    //      update guess count variable, update guesscount html output to screen

                        $('#wrongGuessList').append("<li class='list-group-item'>" + userInput + "</li>");
                        guessCount ++;
                        $('#guessesLeftBox').html(guessCount + " / " + maxGuessCount);

                    // 8. if user is out of guesses, update lost record, alert user, disable input 
                        if (guessCount === maxGuessCount) {
                            alert("Marty McFly gets shafted :(");
                            losses ++;
                            $('#lossCountBox').html(losses);
                            $('input').attr('disabled', true);
                        }
                    }


                } else {
                    alert("What is we're looking for a letter in the English alphabet for 200, Alex.");
                }
            }

            isNumber(userInput)

        } else if (userInput.length > 1) {
            // if not a single char, prompt user for single char
            alert("Overzealous much? Take it one character at a time. Please and thank you.");
            // need to break out of the function here

        } else {
            console.log("the length is less than one");
        }
    }

    isSingleInput(userInput);


});

Answer 1

看起来它现在可以工作了!请参阅下面的代码段。

var randWord, guessWord, userInput = '',
  wins = 0,
  losses = 0,
  maxGuessCount = 10,
  guessCount = 0,
  words = ["evaluate", "leader", "glory", "thanks", "pit", "sign", "neighborhood", "twist", "beneficiary", "giant", "bargain", "analyst", "embark", "competition", "bench", "impress", "tick", "elegant", "wing", "spring", "rider", "romantic", "confuse", "arrange", "critic", "quiet", "raise", "paradox", "inject", "gallery", "scheme", "commerce", "museum", "computer", "fastidious", "impulse", "stand", "story", "pig", "oyster", "grim", "speaker", "listen", "dense", "mass", "thin", "fat", "keys", "phone", "wallet", "money", "campaign", "mutter", "butterfly", "salmon", "occupation", "contempt", "landowner", "detector", "kidney", "faux", "require", "glass", "jug", "plastic", "overwhelm", "blackmail", "headquarters", "assignment", "competence"];

startGame();

// START GAME FUNCTION
// _______________________________________________
function startGame() {
  // setting our win count/loss count box
  $('#winCountBox').html(wins);
  $('#lossCountBox').html(losses);
  $('#maxGuessCountBox').html(maxGuessCount);

  // disabling user input until a new word is called
  $('#userInput').attr('disabled', true);

  // clear wordbox
  $('#wordBox').empty();
  getWord();

}

function showLetters() {
  var tempSpace = [];
  for (var i = 0; i < guessWord.length; i++) {
    tempSpace.push(userInput === randWord[i] ? userInput : guessWord[i]);
  }
  guessWord = tempSpace.join('');
  $('#wordBox').html(tempSpace.join(' '));
  if (guessWord === randWord) {
    alert('You win!');
    ++wins;
    startGame();
  }
  return !!(guessWord.indexOf(userInput) + 1);
}

// GET WORD FUNCTION
// _______________________________________________
function getWord() {
  userInput = '';
  randWord = words[Math.floor(Math.random() * words.length)];
  guessWord = '_'.repeat(randWord.length);
  console.log('The random word is ' + randWord + " and the length is " + randWord.length);

  showLetters();

  // 4. resets maxGuessCount & guessCount
  guessCount = 0;
  $('#guessesLeftBox').html(maxGuessCount);

  // 5. empties the list of wrongly guessed characters in html box
  $('#wrongGuessList').empty();

  // 6. allowing user to enter data into input field
  $('#userInput').attr('disabled', false);
}



// START GAME CLICK EVENT
// _______________________________________________
$('#startGameBTN').on('click', function() {
  startGame();
});

// RESEST GAME CLICK EVENT
// _______________________________________________
$('#resetGameBTN').on('click', function() {
  wins = 0;
  losses = 0;
  startGame();
});

// GAMEPLAY FUNCTIONALITY
// _______________________________________________

// 1. button click event
$('#inputBTN').on('click', function() {

  // 2. get user input
  userInput = $('input').focus().val().trim().toLowerCase();

  if (!userInput) return alert("the length is less than one");
  if (userInput.length > 1) return alert("One character at a time, please and thank you.");
  if (/[^a-z]/.test(userInput)) return alert("Enter an English alphabet letter please.");

  $('input').val('');

  // 5. check if input character is in the randWordArr
  if (!showLetters()) {
    console.log("nope, can't find it");

    $('#wrongGuessList').append(" " + userInput);
    $('#guessesLeftBox').html(maxGuessCount - ++guessCount);

    if (guessCount === maxGuessCount) {
      alert("Marty McFly gets shafted :(");
      ++losses;
      startGame();
    }
  }
});

.counter {
  display: inline-block;margin: 20px 40px
}

.counter span {
  display: inline-block;
  min-height: 20px;
  width: 30px;
  margin: 5px;
  padding: 3px 5px;
  border: solid 1px;
  vertical-align: middle
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>



<div class="counter">
  Count:<br> Wins: <span id="winCountBox"></span> Losses: <span id="lossCountBox"></span>
</div>

<div class="counter">
  Guesses: <b id="wrongGuessList"></b><br> Left: <span id="guessesLeftBox"></span> from <span id="maxGuessCountBox"></span>
</div>

<div>
  <button id="startGameBTN">Start</button>
  <button id="resetGameBTN">Reset</button>
  <!-- <button id="getWordBTN">Word</button> -->
</div>

<h1 id="wordBox"></h1>

<div class="counter">
  <input id="userInput" maxlength="1" pattern="[a-z]"> <button id="inputBTN">Try Letter</button>
</div>