javascript - 将 JQuery 输入限制为仅先前未输入过的唯一字符的任何方法

Question

我有一个简单的 JQuery/JS Hangman 游戏，我花了很多时间让它工作，但我遇到了一个问题，它扰乱了我的逻辑和游戏的运行 - 当玩家输入重复的字符时(或者对还是错)。

我让游戏工作的方式，从我插入的空数组开始，我认为我可以创建一个函数来仅将唯一的字符插入数组函数

unique(array) {
    var result = [];
    $.each(array, function(i, e) {
        if ($.inArray(e, result) == -1) result.push(e);
    });
    return result;
    }
    var uniqueRightGuesses = unique(rightGuesses);
    var uniqueWrongGuesses = unique(wrongGuesses);

但这不起作用，因为在我的游戏的内部工作原理中，重复的输入字符仍然会显示并且弄乱了获胜和失败的输入方式(即使我正在计算获胜的总和)我创建的一个附加数组是为了处理在一个单词中重复多次的字母)。我在游戏的各个部分/各种功能中尝试了很多不同的事情，并且我发现解决这个问题的最简单方法是以某种方式阻止玩家输入字符(如果他们已经输入了字符)游戏过程中输入，在这个函数中:

$(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val().toLowerCase();
      play(space);
      $(this).val('');
      endGame();
      return false;
    }
  });

我在网上搜索了一种方法来做到这一点，我找到了 jQuery.unique() 但我不认为它在这里工作，因为它只适用于数组中的 DOM 对象(&我只是想要如果玩家已经输入了该字母，则不注册/不允许输入，无论猜测是正确还是错误 - 如果我在游戏中的这个位置处理这个问题，我就不必弄乱我的数组或我正在显示的变量，但我不知道如何简单地执行此操作。如果有人有任何建议或知道这是否可能，我真的很感激 - 我在网上找到了很多关于以这种方式限制特殊字符和数字的信息，但没有关于已经输入的字符和数字，我不知道如果这是可能的(这是我第一次使用 .keypress() 所以我对它有点陌生。任何建议将不胜感激。谢谢!这是我的整个游戏代码:

var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var answer = [];
var wrongGuesses = [];
var rightGuesses = [];
var right = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var y = 0;
var i = 1;
$(document).ready(function() {
  function randomWord() {
    var random = Math.floor(Math.random() * wordBank.length);
    var toString = wordBank[random];
    console.log(toString);
    word = toString.split("");
    console.log(word);
  }
  randomWord();

  function wordSpaces() {
    for (var i = 0; i < word.length; i++) {
      $(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
    }
  }
  wordSpaces();

  function play(space) {
    //indexOf()==inArray() 
    var rightCount = 0;
    var lIndex = jQuery.inArray(space, word);
    console.log(lIndex);
    if (lIndex == -1) {
      wrongGuesses.push(space);
      var wrong = wrongGuesses.length;
      console.log('wrong ' + wrong);
      $('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);

      //      $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
      $(images[i - 1]).hide();
      $(images[i]).show();
      i++;
      $("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
      console.log(word);
    } else {
      var totalRight = 0;
      console.log(word + "word");
      console.log(space + "space");

      function getInstances(word, space) {
        var indexes = [],
          w;
        for (w = 0; w < word.length; w++)
          if (word[w] === space)
            indexes.push(w);

        return indexes;
      }
      console.log(word + "word");
      console.log(space + "space");
      var indexes = getInstances(word, space);
      console.log("indexes", indexes);
      indexes.forEach(function(index) {
        //      answer[index] = space;
        rightCount++
      });
      console.log(rightCount + "rightcount");
      console.log("answer", answer);
      //    rightGuesses.push(space);
      console.log(rightGuesses);
      //    var right = rightGuesses.length;
      indexes.forEach(function(index) {
        $(".word-spaces tbody tr td:nth-of-type(" + (index + 1) + ")").css('color', 'black');
      });
      rightGuesses.push(space);
      right.push(rightCount);
      console.log(right + "right");
      //    rightGuesses.push(space);
      //  totalRight =  totalRight + rightCount;
      // totalRight++;
      //   console.log(totalRight + 'totalRight');
    }
  }
  console.log(right + "right");
  $(".form-control").keypress(function(event) {
    var keycode = (event.keyCode ? event.keyCode : event.which);
    if (keycode == 13) {
      var space = $(this).val().toLowerCase();
      play(space);
      $(this).val('');
      endGame();
      return false;
    }
  });


  function endGame() {
    var sumRight = right.reduce(add, 0);

    function add(a, b) {
      return a + b;
    }
    if (sumRight == word.length) {
      $(images[i]).hide();
      $("#victory").show();
      $("body").css("background-color", "#8AFBFF");
      $(".form-control").prop('disabled', true);
      $("body").animate({
        backgroundColor: "#0C0D86"
      }, 2000);
      $("body").animate({
        backgroundColor: "transparent"
      }, 2000);
    } else if (wrongGuesses.length >= 10) {
      $("body").css("background-color", "#ff4500");
      $(".form-control").prop('disabled', true);
      $("body").animate({
        backgroundColor: "#000000"
      }, 2000);
      $("body").animate({
        backgroundColor: "transparent"
      }, 2000);
    }
  }

});

Answer 1

使用数组。 indexOf() 。不需要 jQuery。

检查按下的按键是否包含在错误的猜测或正确的猜测数组中，以及是否提醒用户。

$(".form-control").keypress(function(event) {
        var keycode = (event.keyCode ? event.keyCode : event.which);
        if (keycode == 13) {
          var space = $(this).val().toLowerCase();

          if (!(wrongGuess.indexOf(space) > -1 || rightGuess.indexOf(space) > -1)) {
            play(space);
            $(this).val('');
            endGame();
            return false;
          }
          else
            window.alert("You already guessed this letter.");

        }
      });