如果已经猜到Javascript，请禁用重复按键

时间：2018-07-18 21:38:45

标签： javascript html

我试图让用户在我的猜字母游戏中两次按下相同的按钮。目标是在计数器运行至0或用户猜测正确答案之前，先猜测9个唯一字母。是否可以将其设置为在已经猜测时关闭按钮，并在游戏重置时重置？ 

// Where the computer picks what it will use as random guess. The split is a method to break up the string and pick one letter at a time. 
var computerChoices = ("abcdefghijklmnopqrstuvwxyz").split("");

//Previous guess array that will populate the failed guesses of user
var previousGuess = [];


// Creating variables to hold the number of wins, losses, and ties. They start at 0.
var wins = 0;
var losses = 0;
var guessLeft = 9;


// This function is run whenever the user presses a key.
document.onkeyup = function(event) {

  // Determines which key was pressed by the user
  var userGuess = event.key;

  //Previous guess is uploaded 
  previousGuess.push(userGuess);

  // //Attempt to cancel out repeat keystrokes
  // var repeat = event.repeat;
  // var KeyboardEvent.repeat(false)


  // Randomly chooses a choice from the options array. This is the Computer's guess.
  var computerGuess = computerChoices[Math.floor(Math.random() * computerChoices.length)];

  if (userGuess === "a" ||
    userGuess === "b" ||
    userGuess === "c" ||
    userGuess === "d" ||
    userGuess === "e" ||
    userGuess === "f" ||
    userGuess === "j" ||
    userGuess === "k" ||
    userGuess === "l" ||
    userGuess === "m" ||
    userGuess === "n" ||
    userGuess === "o" ||
    userGuess === "p" ||
    userGuess === "q" ||
    userGuess === "r" ||
    userGuess === "s" ||
    userGuess === "t" ||
    userGuess === "u" ||
    userGuess === "v" ||
    userGuess === "w" ||
    userGuess === "x" ||
    userGuess === "y" ||
    userGuess === "z") {
    if (userGuess === computerGuess) {
      //If the user matches computer then they gain point
      wins++;
      previousGuess = [];
      guessLeft = 9;

    }
    if (userGuess !== computerGuess) {
      //Subtract a guess when you pick a letter that does not match the computers choice
      guessLeft--;
    }

    if (guessLeft === 0) {
      //Add a point to losses if you run out of points before guessing the right letter
      losses++;
      //Guesses will return to 9 when you run out of guesses
      guessLeft = 9;
      previousGuess = [];
    }
  }


  // Creating a variable to hold our new HTML. Our HTML now keeps track of the user and computer guesses, and wins/losses/ties.
  var html =
    "<h1>The Psychic Game</h1>" +
    "<p>Guess what letter I’m thinking of<p>" +
    "<p>wins: " + wins + "</p>" +
    "<p>losses: " + losses + "</p>" +
    "<p>Guesses Left: " + guessLeft + "</p>" +
    "<p>Your Guesses so far: " + previousGuess.join(", ") + "</p>"


  // Set the inner HTML contents of the #game div to our html string. Updating the page itself
  document.querySelector("#game").innerHTML = html;
}
<!doctype HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <div id="game">
      <h1>The Psychic Game</h1>
      <p>Guess what letter I’m thinking of
        <p>
          <p>Press any letter to get started!</p>
    </div>
  </div>
  <script src="assets/javascript/game.js"></script>
</body>

</html>

2 个答案:

答案 0 :(得分：0)

将其添加到您的keyup事件的顶部：

if(previousGuess.includes(userGuess)) {
  return;
}

如果已经按下该键，将导致事件中止。

// Where the computer picks what it will use as random guess. The split is a method to break up the string and pick one letter at a time. 
var computerChoices = ("abcdefghijklmnopqrstuvwxyz").split("");

//Previous guess array that will populate the failed guesses of user
var previousGuess = [];


// Creating variables to hold the number of wins, losses, and ties. They start at 0.
var wins = 0;
var losses = 0;
var guessLeft = 9;


// This function is run whenever the user presses a key.
document.onkeyup = function(event) {

  // Determines which key was pressed by the user
  var userGuess = event.key;

  if(previousGuess.includes(userGuess)) {
    return;
  }
  //Previous guess is uploaded 
  previousGuess.push(userGuess);

  // //Attempt to cancel out repeat keystrokes
  // var repeat = event.repeat;
  // var KeyboardEvent.repeat(false)


  // Randomly chooses a choice from the options array. This is the Computer's guess.
  var computerGuess = computerChoices[Math.floor(Math.random() * computerChoices.length)];

  if (userGuess === "a" ||
    userGuess === "b" ||
    userGuess === "c" ||
    userGuess === "d" ||
    userGuess === "e" ||
    userGuess === "f" ||
    userGuess === "j" ||
    userGuess === "k" ||
    userGuess === "l" ||
    userGuess === "m" ||
    userGuess === "n" ||
    userGuess === "o" ||
    userGuess === "p" ||
    userGuess === "q" ||
    userGuess === "r" ||
    userGuess === "s" ||
    userGuess === "t" ||
    userGuess === "u" ||
    userGuess === "v" ||
    userGuess === "w" ||
    userGuess === "x" ||
    userGuess === "y" ||
    userGuess === "z") {
    if (userGuess === computerGuess) {
      //If the user matches computer then they gain point
      wins++;
      previousGuess = [];
      guessLeft = 9;

    }
    if (userGuess !== computerGuess) {
      //Subtract a guess when you pick a letter that does not match the computers choice
      guessLeft--;
    }

    if (guessLeft === 0) {
      //Add a point to losses if you run out of points before guessing the right letter
      losses++;
      //Guesses will return to 9 when you run out of guesses
      guessLeft = 9;
      previousGuess = [];
    }
  }


  // Creating a variable to hold our new HTML. Our HTML now keeps track of the user and computer guesses, and wins/losses/ties.
  var html =
    "<h1>The Psychic Game</h1>" +
    "<p>Guess what letter I’m thinking of<p>" +
    "<p>wins: " + wins + "</p>" +
    "<p>losses: " + losses + "</p>" +
    "<p>Guesses Left: " + guessLeft + "</p>" +
    "<p>Your Guesses so far: " + previousGuess.join(", ") + "</p>"


  // Set the inner HTML contents of the #game div to our html string. Updating the page itself
  document.querySelector("#game").innerHTML = html;
}
<!doctype HTML>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">

  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.2/css/bootstrap.min.css" integrity="sha384-Smlep5jCw/wG7hdkwQ/Z5nLIefveQRIY9nfy6xoR1uRYBtpZgI6339F5dgvm/e9B" crossorigin="anonymous">

  <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>

</head>

<body>
  <div class="container">
    <div id="game">
      <h1>The Psychic Game</h1>
      <p>Guess what letter I’m thinking of
        <p>
          <p>Press any letter to get started!</p>
    </div>
  </div>
  <script src="assets/javascript/game.js"></script>
</body>

</html>

答案 1 :(得分：0)

您能否在click或key up事件中使Disabled属性为true？像这样：

$('#my_button').on('click', function()
{
        $('#my_button').attr("disabled", true);
});
相关问题
最新问题