表示 html 表中各种数组的字符，w/JQuery/JavaScript
representing a character at various array in an html table w/JQuery/JavaScript
我在我的 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>相关文章：
- 如何为jQuery屏蔽输入插件创建一个允许字母数字、空格和重音字符的掩码
- 如何用jquery替换字符串中可能变化的字符
- 一个jquery验证器方法，它不接受纯数字或纯特殊字符，但接受上面是否有字母
- JQuery根据连字符前的首字母对列表进行排序
- jQuery-Regex以防止任何特殊字符
- 如何使用JQuery检查输入(电子邮件）字段是否包含特殊字符
- 带有连字符的 Jquery 表排序器编号
- Rails:使用Jquery进行Text_Area字符计数
- 使用jQuery.css(）方法时，是否需要转义任何字符
- 使用jquery删除href中的特定字符或标记
- 仅替换 iframe 的编码字符 Jquery
- 如何仅验证文本、英文字符和非英文字符 jquery validater
- 如何删除span中的连字符?(jQuery）
- 不允许使用特殊字符jQuery
- 限制键入无效字符-jquery validate
- 删除下一个字符jQuery(没有给出html元素）
- 将字符串从字符jquery的第n个词根拆分为两个子字符串
- 如何验证字符串仅为非字母字符jquery验证
- 限制用户编辑字符后的特殊字符- Jquery
- 在数据值字符串中动态添加连字符jQuery
