當按下錯誤的按鍵時，javascript減計數？

Question

我正在製作一款遊戲，每次按下錯誤的按鍵時，我都需要將計數功能減1。

這裏是到目前爲止我的代碼：

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; 
} 

//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); 

    display(charStr); // call when typing 
}); 

display(); // call onload 

我知道我需要把attempt--某處循環，但我只能讓它減去字母的所有長度時錯鍵被按下。

例如：如果選擇的名稱是Adam Red和key z被按下，則代替attempt = attempt - 1，它給我attempt = attempt - 7（Adam Red中的字母總數）。

Answer 1

我已經寫了另一個代碼部分來做同樣的工作。我試圖使用一些ES6代碼，如lambda functions。

我寫的代碼可以做下面的事情;

• 當按下鍵檢查信件是在名稱
• 所有按鍵被允許按一次僅
• 顯示嘗試計數
• 說你贏了！當你找到名字
• 說你迷路了！如果你不能找到嘗試計數器變爲零

之前的代碼是這樣的：

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

 
const chosenName = []; 
 
const letterTried = []; 
 

 
let checkWin =() => chosenName.filter(val => val.isLetter).map(val => val.isFound).reduce((a, b) => a && b, true); 
 
let toText =() => chosenName.map(val => val.valueFound).reduce((a, b) => a + " " + b, ""); 
 

 
nameSplit.forEach(function(val, i) { 
 
    chosenName.push({ 
 
    isLetter: val.match(/[a-z]/i) ? true : false, 
 
    isFound: false, 
 
    value: val, 
 
    valueFound: val == " " ? "-" : "_", 
 
    index: i 
 
    }); 
 
}); 
 

 
function check(charStr) { 
 
    if (letterTried.includes(charStr)) 
 
    return false; 
 

 
    letterTried.push(charStr); 
 

 
    chosenName.filter(val => !val.isFound && val.isLetter).forEach(function(val, i) { 
 
    if (charStr.toLowerCase() === val.value.toLowerCase()) { 
 
     val.valueFound = val.value; 
 
     val.isFound = true; 
 
    } 
 
    }); 
 

 
    if (!chosenName.map(val => val.value.toLowerCase()).includes(charStr.toLowerCase())) 
 
    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); 
 

 
    check(charStr); 
 
    document.getElementById("nameDisplay").innerHTML = toText(); 
 
    document.getElementById("attempt").innerHTML = attempt; 
 

 
    if (checkWin()) 
 
    document.getElementById("attempt").innerHTML = "You Win!"; 
 

 
    if (attempt <= 0) 
 
    document.getElementById("attempt").innerHTML = "You Lost!"; 
 
}); 
 

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

<div id="nameDisplay"></div> 
 
Attempts: <span id="attempt"></span>

Answer 2

從您的代碼看起來您​​可以訪問全球的nameChosen和attempt。如果確實如此，你就可以更新你的事件偵聽器的方法：

document.addEventListener('keypress', function(evt) { 
    evt = evt || window.event; 
    var charCode = evt.keyCode || evt.which; 
    var charStr = String.fromCharCode(charCode); 

    if (nameChosen.includes(charStr)) 
     display(charStr); // call when typing 
    else 
     attempts--; 
}); 

基本上我所做的改變是使用方法String.includes()覈實，如果所選擇的名稱中包含字符串更新之前增加一個檢查UI。你也可以爲玩家添加一些UI反饋，以知道他的嘗試次數正在下降。

希望它有幫助。

Answer 3

給出的解決方案使用包括它是ES6的一部分。如果你想支持舊版本的瀏覽器，那麼這裏就是使用indexOf的解決方案。

var updated = new Array(nameSplit.length).join('_'); 
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 = []; 

    var indexAt = nameSplit.indexOf(char); 
    if(indexAt !== -1) { 
     // to avoid in next search 
     nameSplit[indexAt] = null; 
     updated[indexAt] = char; 
    } else { 
     attempt--; 
    } 
    document.getElementById("nameDisplay").innerHTML = nameDisplayed; 
}