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(亚当红中的字母总数(。

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