我被要求创建一个简单的“刽子手”＆＃39;对于Tafe的任务，但我遇到了两个问题。
一个是说明书要求我掩盖＆＃39;数组中的单词，以便在玩家猜测字母时更容易更新，但我不确定如何执行此操作。 我目前拥有它，以便将单词拆分，并将其每个字母保存到一个名为letterArray的数组中，以及保存到toBeGuessed中的完整单词。我已经达到了这样的程度，我必须更新******，以便在每次猜到一封信时更像是这个词。
在查看类似问题时，我发现了以下建议：
保留2个字符串，单词和混淆的副本（一个 包含＆＃39; - ＆＃39;）（最好是char数组或字符串构建器）。当一个 用户猜出一个字母，搜索所有的非混淆版本 那封信的实例。每次找到匹配项时，请更改“＆＃39; - ＆＃39; 在混淆的字符串中的索引到正确的字母。
但我不确定如何做到这一点。有人能指出我正确的方向吗？
我遇到的另一个问题是每次按“播放”时间。所有的＆＃39;字母＆＃39;变得无法点击，但我可以点击它们然后播放＆＃39;被点击了吗？ 我尝试删除游戏＆＃39;按钮全部在一起，但这些字母根本没有响应。
My current code（由于某种原因，它不能在JSFiddle上工作）
var listOfWords = ["aardvarks", "determine", "different", "greatness", "miserable", "trappings", "valuables", "xylophone"];
var toBeGuessed = listOfWords[Math.floor(Math.random() * listOfWords.length)];
var lettersArray = toBeGuessed.split('');
var guesses = 0;
var playerguess = 'dunno';
$(document).ready(function() {
$('#input').hide();
$('#guessIt').hide();
$('#play').click(function() {
$('#theWord').html(toBeGuessed);
for (var i = 1; i < toBeGuessed.length + 1; i++) {
$('#masked').append('* ');
}
$('#play').hide();
});
$('.letter').click(function() {
value = this.value;
guesses += 1;
found = $.inArray(value, lettersArray) > -1;
if (found === true) {
this.style.color = 'green';
} else {
this.style.color = 'red';
}
if (guesses === 5) {
alert('Your five guesses are up! What do you think the word is?');
$('#input').show();
$('#guessIt').show();
}
});
$('#guessIt').click(function() {
playerguess = document.getElementById("input").value.toLowerCase();
if (playerguess === toBeGuessed) {
alert('Congrats! You win!');
} else {
alert('I\'m sorry, but that\'s not correct. It was ' + toBeGuessed + '! You lose.');
$('#hangman').html('<p>___________<br> |/ |<br> | (_)<br> | /|\\ <br> | |<br> | / \\<br> |<br> _|___</p>');
}
});
});
任何帮助将不胜感激！
答案 0 :(得分：1)
尝试
$(document).ready(function() {
var listOfWords = ["aardvarks", "determine", "different", "greatness", "miserable", "trappings", "valuables", "xylophone"];
var toBeGuessed = listOfWords[Math.floor(Math.random() * listOfWords.length)];
var lettersArray = toBeGuessed.split('');
var guesses = 0;
var playerguess = 'dunno';
$('#input').hide();
$('#guessIt').hide();
$('#play').click(function() {
// "mask" `toBeGuessed`
var val = toBeGuessed.replace(/[a-z]/gi, "*")
$('#theWord').html(val);
//for (var i = 1; i < toBeGuessed.length + 1; i++) {
// $('#masked').append('* ');
// }
$('#play').hide();
});
$('.letter').click(function() {
value = this.value;
guesses += 1;
found = $.inArray(value, lettersArray) > -1;
if (found === true) {
this.style.color = 'green';
// if `value` in `toBeGuessed` ,
// "unmask" single `value` (letter) in "masked" `toBeGuessed`
if (toBeGuessed.indexOf(value) != -1) {
$('#theWord').text(function(i, letter) {
var _letter = letter.split("")
// if selected letter previously selected ,
// apply `firstLetter`
, test = new RegExp(value, "i").test(letter)
// "unmask" first letter in `toBeGuessed` ,
// when letter selected
, firstLetter = toBeGuessed.indexOf(value)
// "unmask" 1n+2 letters ,
// in `toBeGuessed`
// when _same_ letter selected more than once
, nextLetters = $.inArray(value,toBeGuessed,letter.lastIndexOf(value) +1);
_letter.splice(test ? nextLetters : firstLetter, 1, toBeGuessed.charAt(test ? nextLetters : firstLetter));
// return "mask" , with selected letters "unmasked"
return _letter.join("")
});
}
} else {
this.style.color = 'red';
}
if (guesses === 5) {
alert('Your five guesses are up! What do you think the word is?');
$('#input').show();
$('#guessIt').show();
}
});
$('#guessIt').click(function() {
playerguess = document.getElementById("input").value.toLowerCase();
if (playerguess === toBeGuessed) {
alert('Congrats! You win!');
} else {
alert('I\'m sorry, but that\'s not correct. It was ' + toBeGuessed + '! You lose.');
$('#hangman').html('<p>___________<br> |/ |<br> | (_)<br> | /|\\ <br> | |<br> | / \\<br> |<br> _|___</p>');
}
});
});
jsfiddle http://jsfiddle.net/guest271314/g5z5b4qy/
$(document).ready(function() {
var listOfWords = ["aardvarks", "determine", "different", "greatness", "miserable", "trappings", "valuables", "xylophone"];
var toBeGuessed = listOfWords[Math.floor(Math.random() * listOfWords.length)];
var lettersArray = toBeGuessed.split('');
var guesses = 0;
var playerguess = 'dunno';
$('#input').hide();
$('#guessIt').hide();
$('#play').click(function() {
// "mask" `toBeGuessed`
var val = toBeGuessed.replace(/[a-z]/gi, "*")
$('#theWord').html(val);
//for (var i = 1; i < toBeGuessed.length + 1; i++) {
// $('#masked').append('* ');
// }
$('#play').hide();
});
$('.letter').click(function() {
value = this.value;
guesses += 1;
found = $.inArray(value, lettersArray) > -1;
if (found === true) {
this.style.color = 'green';
if (toBeGuessed.indexOf(value) != -1) {
$('#theWord').text(function(i, letter) {
var _letter = letter.split("")
// if selected letter previously selected ,
// apply `first`
, test = new RegExp(value, "i").test(letter)
// "unmask" first letter in `toBeGuessed` ,
// when letter selected
, firstLetter = toBeGuessed.indexOf(value)
// "unmask" 1n+2 letters ,
// in `toBeGuessed`
// when _same_ letter selected more than once
, nextLetters = $.inArray(value,toBeGuessed,letter.lastIndexOf(value) +1);
_letter.splice(test ? nextLetters : firstLetter, 1, toBeGuessed.charAt(test ? nextLetters : firstLetter));
// return "mask" , with selected letters "unmasked"
return _letter.join("")
});
}
} else {
this.style.color = 'red';
}
if (guesses === 5) {
alert('Your five guesses are up! What do you think the word is?');
$('#input').show();
$('#guessIt').show();
}
});
$('#guessIt').click(function() {
playerguess = document.getElementById("input").value.toLowerCase();
if (playerguess === toBeGuessed) {
alert('Congrats! You win!');
} else {
alert('I\'m sorry, but that\'s not correct. It was ' + toBeGuessed + '! You lose.');
$('#hangman').html('<p>___________<br> |/ |<br> | (_)<br> | /|\\ <br> | |<br> | / \\<br> |<br> _|___</p>');
}
});
});body {
background-color: #081208;
color: white;
}
#hangman {
background: url('#');
width: 29%;
height: 80%;
font-size: 40px;
float: left;
}
#masked {
position: relative;
color: white;
font-family: Walter Turncoat;
font-size: 64px;
}
#play {
border: none;
background: none;
color: white;
font-family: Walter Turncoat;
font-size: 50px;
}
#play:hover {
color: gray;
}
#guessIt {
border: none;
background: none;
color: white;
font-family: Walter Turncoat;
font-size: 20px;
}
#guessIt:hover {
color: gray;
}
#letters {
float: right;
width: 70%;
height: 80%;
font-size: 60px;
}
.letter {
border: none;
background: none;
text-decoration: none;
font-family: Walter Turncoat;
color: white;
font-size: 60px;
outline:none
}
.letter:hover {
color: gray;
}
input {
width:230px;
font-family:Walter Turncoat;
background: none;
border: none;
color: white;
height: 35px;
font-size: 25px;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="hangman"><p>___________
<br> |/ |
<br> | <!-- head -->
<br> | <!-- arms -->
<br> | <!-- body -->
<br> | <!-- feet -->
<br> |
<br> _|___</p></div>
<div id="letters">
<button class="letter" id="a" value="a">A</button>
<button class="letter" id="b" value="b">B</button>
<button class="letter" id="c" value="c">C</button>
<button class="letter" id="d" value="d">D</button>
<button class="letter" id="e" value="e">E</button>
<button class="letter" id="f" value="f">F</button>
<button class="letter" id="g" value="g">G</button>
<button class="letter" id="h" value="h">H</button>
<br>
<button class="letter" id="i" value="i">I</button>
<button class="letter" id="j" value="j">J</button>
<button class="letter" id="k" value="k">K</button>
<button class="letter" id="l" value="l">L</button>
<button class="letter" id="m" value="m">M</button>
<button class="letter" id="n" value="n">N</button>
<button class="letter" id="o" value="o">O</button>
<button class="letter" id="p" value="p">P</button>
<br>
<button class="letter" id="q" value="q">Q</button>
<button class="letter" id="r" value="r">R</button>
<button class="letter" id="s" value="s">S</button>
<button class="letter" id="t" value="t">T</button>
<button class="letter" id="u" value="u">U</button>
<button class="letter" id="v" value="v">V</button>
<button class="letter" id="w" value="w">W</button>
<button class="letter" id="x" value="x">X</button>
<br>
<button class="letter" id="y" value="y">Y</button>
<button class="letter" id="z" value="z">Z</button>
</div>
<center>
<div id="masked"></div>
<button id="play">Play!</button>
<div id="theWord"></div>
<input type="text" name="input" id="input" placeholder="What's the word?" />
<button id="guessIt">Guess the Word!</button>
</center>