javascript停止键不再被使用

Question

My goals are to stop printing out the key if it's been used before, and to stop the game when all the letters are displayed (game won).

SOLVED: For those who have the same problem: Adding this function will do the job:

 //check if key is used function checkKey(charStr) { if (keyStore.includes(charStr)) { return false; } else { //record pressed key keyStore.push(charStr); if (nameChosen.toLowerCase().includes(charStr)) { display(charStr); } else { attempt--; //print out wrong-guess key document.getElementById("wrongGuess").innerHTML = document.getElementById("wrongGuess").innerHTML + charStr + " "; } } }

and put the function inside the keypress event.

Here's my old code:

var names = ["Adam Red", "Bob Green", "Chris Blue"];
var nameChosen = names[Math.floor(Math.random() * names.length)];
var nameSplit = nameChosen.split("");
var updated = [];
var attempt = nameChosen.length - 2;

function display(char) {
    //replace each of the letters with underscore and space with dash
    char = char || "_"; // set to default when no char given
    var nameDisplayed = [];

    for (var i = 0; i < nameSplit.length; i++) {
        if (updated[i] || (char.toLowerCase() === nameSplit[i].toLowerCase())) {
            nameDisplayed += nameSplit[i] + " ";
            updated[i] = true;
        }
        else if (nameSplit[i] == " ") {
            nameDisplayed += "- ";
        } 
        else {
            nameDisplayed += "_ ";
        }
    }

    document.getElementById("nameDisplay").innerHTML = nameDisplayed;
}

// need function for game won <===============

function gameLost() {
    document.getElementById("container").style.backgroundColor = "red";
    document.getElementById("notice").innerHTML = "SORRY, YOU'VE LOST THE GAME!";
    document.getElementById("notice").style.fontWeight = "bold";
    document.getElementById("notice").style.color = "white";
}

document.getElementById("attempt").innerHTML = attempt;

//get key pressed by user
document.addEventListener("keypress", function(evt) {
    evt = evt || window.event;
    var charCode = evt.keyCode || evt.which;
    var charStr = String.fromCharCode(charCode);

    console.log("key pressed: ", charStr);

    if (nameChosen.toLowerCase().includes(charStr)) {
        display(charStr);
    }
    else {
        attempt--;
        document.getElementById("wrongGuess").innerHTML = document.getElementById("wrongGuess").innerHTML + charStr + " ";
         // print out key pressed continuously <==================
    };

    if (attempt == 0) {
        gameLost();
    };

    document.getElementById("attempt").innerHTML = attempt;
});

display(); // call onload

I've tried: add new var and set it true/false and put in the loop, create a new function but still can't make it happen.

Answer 1

It looks like you're building a game of hang man?

Try searching through the nameDisplayed variable and see if any of its characters match '_'

if they don't, you've revealed all the characters and won the game! if it does still have a '_' character, there must be another character left to find.

Keeping a global array of keys pressed, and searching through that once a new key is pressed can help with the repetitive keys.

As for stopping key input when you win, do some research into the removeEventListener function, which you can remove the key stroke even listener with.

Hope that helped!

Answer 2

Solution to close the question:

//check if key is used
function checkKey(charStr) {  
  if (keyStore.includes(charStr)) {
      return false;
  }
  else {
      //record pressed key
      keyStore.push(charStr); 

      if (nameChosen.toLowerCase().includes(charStr)) {
          display(charStr);
      }
      else {
          attempt--;

          //print out wrong-guess key
          document.getElementById("wrongGuess").innerHTML = document.getElementById("wrongGuess").innerHTML + charStr + " ";
      }
  }
}