我在我的 Hangman 游戏中通过 J Query 以图形方式表示我的一些数据遇到了一些问题 - 现在我正在研究我的 play(space( 函数的最后一部分,以考虑一个单词中是否有多个正确猜到的字母并显示该字母的所有实例 - 我创建了一个函数来循环从拆分单词创建的数组, 我得到了这些字母的正确索引,我只是有点卡在如何通过 J Query 正确地在我的表中的这些索引上显示这些字母,我有点卡住了......我一直在控制台.log - 我的数据和我得到了正确的数据(我的数组中该字母的字母和索引(,我现在只需要弄清楚如何在我的 html 表中以与表对应的正确索引显示这些字母(我感觉有点卡住了,想知道这是否有可能挽救 - 我相信一定有一种方法可以做到这一点, 我只是还没有弄清楚 - 我不确定我是否应该创建一个字典对象来配对数组中带有索引的正确字母,以使用 .each(( 循环以图形方式表示在我的表中,或者是否有一种方法可以按原样以图形方式表示它/数据(。我真的很感激任何帮助。
这是我的代码:JS/JQuery:
var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var y = 0;
var i = 1;
$(document).ready(function() {
function randomWord() {
var random = Math.floor(Math.random() * wordBank.length);
var toString = wordBank[random];
console.log(toString);
word = toString.split("");
console.log(word);
}
randomWord();
function wordSpaces() {
for (var i = 0; i < word.length; i++) {
$(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
}
}
wordSpaces();
function play(space) {
//indexOf()==inArray()
var lIndex = jQuery.inArray(space, word);
console.log(lIndex);
if (lIndex == -1) {
wrongGuesses.push(space);
var wrong = wrongGuesses.length;
console.log('wrong ' + wrong);
$('.wrongLetters tbody tr td:nth-of-type(' + wrong + ')').text(space);
// $(this).css("background-color", "#ff4500").fadeIn(300).delay(800).fadeOut(300);
$(images[i - 1]).hide();
$(images[i]).show();
i++;
$("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
console.log(word);
} else {
console.log(word + "word");
console.log(space + "space");
function getInstances(word,space) {
var indexes = [], w;
for(w=0; w<word.length;w++ )
if (word[w] === space)
indexes.push(w);
return indexes;
}
console.log(word + "word");
console.log(space + "space");
var indexes = getInstances(word, space);
console.log(indexes);
rightGuesses.push(space);
console.log(rightGuesses);
$(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');
// rightGuesses.push(space);
}
}
$(".form-control").keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
var space = $(this).val();
play(space);
$(this).val('');
endGame();
return false;
}
});
function endGame() {
if (wrongGuesses.length >= 10 || rightGuesses.length == word.length) {
$("body").css("background-color", "#ff4500");
$(".form-control").prop('disabled', true);
}
}
});
html:
<header>
<h2 style="font-family:paganini;">
Hangman
</h2>
</header>
<main style="font-family:paganini;">
<figure class="hangman">
<img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top">
<img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;">
<img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;">
<img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;">
<img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;">
<img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;">
<img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;">
<img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;">
</figure>
<table class="word-spaces">
<caption>Your Word is: </caption>
<tbody>
<tr>
</tr>
</tbody>
</table>
<br/>
<fieldset class="guessIn">
<legend>
Guess a Letter
</legend>
<label for="form">Type a Letter then Click <b>Enter</b></label>
<input type="text" id="form" class="form-control" placeholder="guess">
</fieldset>
<table class="wrongLetters">
<caption>Letters Guessed Wrong:</caption>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</main>
<footer>
</footer>
请注意,当您进行选择时,您会在控制台中收到以下错误:
未捕获的错误:语法错误,无法识别的表达式::第 n 种类型
那是因为这行:
$(".word-spaces tbody tr td:nth-of-type(" + indexes + ")").css('color', 'black');
由于正确的猜测可以设置多个索引,因此您需要使用循环进行正确的猜测,如下所示:
$.each(indexes,function(e,i){
$(".word-spaces tbody tr td:nth-of-type(" + i + ")").css('color', 'black');
})
<小时 />另外,我认为这一行是错误的:
$(".word-spaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
您可能打算使用我喜欢的值:
$(".word-spaces > tbody > tr").append('<td data-idx='+i+'>' + word[i] + '</td>')
(尽管您根本不需要 data-idx 属性,因为它始终与 tr 标签中的子索引相同,并且您无论如何都会使用它来获取单元格(
这是一个工作的小提琴
我自己想通了(我有点惊慌失措(:首先我创建了一个 .forEach 循环来循环遍历单词,然后问题是 JS 和 html/css 中的 btwn 数组连接的差异......我创建了索引变量,并在括号外添加一个加号......所以,这解决了问题:
indexes.forEach(function(index( { $(".word-space tbody tr td:nth-of-type(" + (index + 1( + "("(.css('color', 'black'(; });
好的,它现在可以做所有事情。除了第一个版本的功能外,版本 2 还具有以下功能:
-
如果一个字母多次被猜错,警报会通知玩家这样做并忽略它。
-
如果一个正确的猜测有多个字母,所有字母都会被暴露出来。
-
通过消息改进了
endGame()
功能,但它需要再修复一个,我会把那个留给你;-(
普伦克
<!doctype>
<html>
<head>
<meta charset="utf-8">
<title>35387864</title>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet" />
<style>
html {
font: 400 16px/1.428 'Verdana';
}
main {
padding: 20px;
}
footer,
header {
padding: 5px 20px;
}
footer {
border-top: 2px ridge #666;
}
header {
border-bottom: 2px ridge #666;
}
.wordSpaces,
.wrongLetters {
border: 1px ridge grey;
table-layout: fixed;
border-collapse: collapse;
margin: 10px 0;
}
.wordSpaces td,
.wrongLetters td {
border: 2px inset #BBB;
width: 3ch;
height: 1.5rem;
padding: 1px;
text-align: center;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
color: white;
}
.wrongLetters td {
color: red;
}
.form-control {
width: 10ch;
text-align: center;
}
ul {
font-size: 1rem;
list-style: none;
padding-left: 0;
}
.msg {
font-size: 0;
color: #000;
text-align: center;
}
</style>
</head>
<body>
<header>
<h2> Hangman </h2>
</header>
<main>
<figure class="hangman"> <img src="https://i.imgur.com/gSxmkUf.gif" id="gallows" align="middle top"> <img src="https://i.imgur.com/Mb4owx9.gif" id="head" align="middle top" style="display:none;"> <img src="https://i.imgur.com/xkXISte.gif" id="body" align="middle top" style="display:none;"> <img src="https://i.imgur.com/U44ReUi.gif" id="armL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/49kkaQF.gif" id="handL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/tqtNazW.gif" id="armR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/ydnz7eX.gif" id="handR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/dlL7Kek.gif" id="legL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/3AQYFV9.gif" id="footL" align="middle top" style="display:none;"> <img src="https://i.imgur.com/j9noEN7.gif" id="legR" align="middle top" style="display:none;"> <img src="https://i.imgur.com/kJofX7M.gif" id="footR" align="middle top" style="display:none;"> </figure>
<table class="wordSpaces">
<caption>
Your Word is:
</caption>
<tbody>
<tr>
</tr>
</tbody>
</table>
<br/>
<h1 class="msg">
</h1>
<fieldset class="guessIn">
<legend> Guess a Letter </legend>
<label for="form">Type a Letter then Click <kbd>Enter</kbd></label>
<input type="text" id="form" class="form-control" placeholder="guess" maxlength="1" required/>
</fieldset>
<table class="wrongLetters">
<caption>
Letters Guessed Wrong:
</caption>
<tbody>
<tr>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</main>
<footer>
<ul>
<li><a href="https://stackoverflow.com/questions/35387864/hangman-gameplay-in-javascript">Hangman Gameplay in JavaScript</a></li>
<li><a href="https://jsfiddle.net/zer00ne/0fa56t3s/">jsFiddle</a></li>
</ul>
</footer>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.4/jquery-ui.min.js"></script>
<script>
var wordBank = ["modernism", "situationalist", "sartre", "camus", "hegel", "lacan", "barthes", "baudrillard", "foucault", "debord", "baudrillard"];
/*var wordBank = ["xxxbnvkllyyybns"];*/
var word = [];
var wrongGuesses = [];
var rightGuesses = [];
var images = [gallows, head, body, armL, handL, armR, handR, legL, footL, legR, footR];
var img = 1;
$(document).ready(function() {
function randomWord() {
var random = Math.floor(Math.random() * wordBank.length);
var toString = wordBank[random];
console.log(toString);
word = toString.split("");
console.log(word);
}
randomWord();
function wordSpaces() {
for (var i = 0; i < word.length; i++) {
$(".wordSpaces > tbody > tr").append('<td data-idx=i>' + word[i] + '</td>')
}
}
wordSpaces();
function play(letter) {
var wIdx = jQuery.inArray(letter, word);
var wrong = wrongGuesses.length;
if (wIdx === -1) {
if (wrong === 0) {
wrongGuesses.push(letter);
$('.wrongLetters tbody tr td:first-of-type').text(letter);
hangman();
} else {
for (var j = 0; j < wrong; j++) {
if (wrongGuesses[j] === letter) {
alert('The "' + letter + '" has already beem played.nPlease try again.');
return true;
}
console.log('wrong' + wrong);
}
wrongGuesses.push(letter);
$('.wrongLetters tbody tr td:nth-of-type(' + (wrong + 1) + ')').text(letter);
hangman();
}
} else {
for (var w = 0; w < word.length; w++) {
if (word[w] === letter) {
W = w + 1;
$(".wordSpaces tbody tr td:nth-of-type(" + W + ")").css("color", "black");
rightGuesses.push(letter);
}
}
}
}
$(".form-control").keypress(function(event) {
var keycode = (event.keyCode ? event.keyCode : event.which);
if (keycode == 13) {
var letter = $(this).val();
play(letter);
$(this).val('');
endGame();
return false;
}
});
function hangman() {
$(images[img - 1]).hide();
$(images[img]).show();
img++;
$("html").css("background-color", "#ff4500").fadeIn(300).delay(300).fadeOut(300).fadeIn(100);
}
function endGame() {
if (rightGuesses.length == word.length) {
$("body").css("background-color", "rgba(0, 185, 41, .3)");
$(".msg").text(word + " is correct!nYou win!").css("font-size", "24px");
$(".form-control").prop('disabled', true);
} else if (wrongGuesses.length === 10) {
$("body").css("background-color", "rgba(227, 0, 0, .3)");
$(".msg").text(word + " was the answer.nYou lose.").css("font-size", "24px");
$(".form-control").prop('disabled', true);
} else return false;
}
});
</script>
</body>
</html>