如何使用javascript打印刽子手游戏中已经猜到的字母？

Question

我知道编程以及 javascript，并且正在为我的第一个 js 项目开发刽子手游戏。我似乎无法弄清楚如何在 UI 中向用户显示他们已经猜到的字母。我想出了 onkeyup 函数来显示最近选择的字母，但不是全部。有什么建议么？

 var alphabet = 
 ['a','b','c','d','e','f','g','h','g','h','i','j','k','l','m','n','o','p','q','r','s',
't','u','v','w','x','y','z'];
document.onkeyup = function(event) {
     var key_press = String.fromCharCode(event.keyCode);
     console.log(key_press);
     document.getElementById('guessed-letters').innerHTML = key_press;
};

Answer 1

拿走这里的东西

var alphabet = ['a','b','c','d','e','f','g','h','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];

document.onkeyup = function(event) {

  var key_press = String.fromCharCode(event.keyCode);
  console.log(key_press);
  document.getElementById('guessed-letters').innerHTML = key_press;
};

然后这样做：

var alphabet = ['a','b','c','d','e','f','g','h','g','h','i','j','k','l','m','n','o','p','q','r','s','t','u','v','w','x','y','z'];
var usedChars = [];

document.onkeyup = function(event) {

  var key_press = String.fromCharCode(event.keyCode);
  console.log(key_press);
  usedChars.push(key_press)
  document.getElementById('guessed-letters').innerHTML = usedChars.toString();
};

Answer 2

改变这一行：

document.getElementById('guessed-letters').innerHTML = key_press;

到这里：

document.getElementById('guessed-letters').innerHTML += key_press;

应该达到你想要的。您将追加到现有的 HTML 而不是替换它。

Answer 3

var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
var outputElement = document.getElementById('guessed-letters');
var guessedLetters = []; // stores the letters the user guessed

document.addEventListener('keyup', function (event) {
  var key = event.key.toLowerCase();
  if (alphabet.indexOf(key) !== -1) {
    // the key is a letter in the alphabet
    if (guessedLetters.indexOf(key) === -1) {
      // the key has not been guessed
      guessedLetters.push(key);
      var string = guessedLetters.join(''); // join the letters together to one single string
      outputElement.textContent = string;
    }
  }
});

<span id="guessed-letters"></span>

或者使用 jQuery：

var alphabet = 'abcdefghijklmnopqrstuvwxyz'.split('');
var outputElement = $('#guessed-letters');
var guessedLetters = []; // stores the letters the user guessed

$(document).on('keyup', function (event) {
  var key = event.key.toLowerCase();
  if (alphabet.indexOf(key) !== -1) {
    // the key is a letter in the alphabet
    if (guessedLetters.indexOf(key) === -1) {
      // the key has not been guessed
      guessedLetters.push(key);
      var string = guessedLetters.join(''); // join the letters together to one single string
      outputElement.text(string);
    }
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="guessed-letters"></span>