以任何方式将JQuery输入限制为以前未输入的唯一字符

时间:2016-02-16 23:58:57

标签: javascript jquery input user-input keypress

我有一个简单的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);

但这并不起作用,因为我的游戏内部运作,重复的输入字符仍然显示和放大搞砸了赢家的方式输入是松散的(即使我计算胜利w /我创建的额外数组的总和,以处理一个单词重复多次的字母)。我已经在游戏的各个部分/各种功能中尝试了很多不同的东西,我发现解决这个问题的最简单方法是以某种方式阻止玩家输入字符。他们已经在游戏过程中输入了这个函数:

$(".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);
    }
  }

});

1 个答案:

答案 0 :(得分:1)

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

检查按下的键是否包含在wrongGuess或rightGuess数组中,以及是否提醒用户。

$(".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.");

        }
      });