如何处理javascript hang子手游戏中的重复字母 [英] how to deal with repeated letters in a javascript hangman game
问题描述
我是html，css和javascript的初学者，并且我使用它们来创建此子手游戏，该游戏适用于每个字母具有单个实例的单词，但是当一个字母重复出现在同一字母中时，似乎会遇到问题字。我创建了一个函数来检查单词中每个字母的实例，但是我不知道如何使用它，因此如果单词中出现重复的字母，则可以同时显示它们。任何帮助，将不胜感激。谢谢！
I am a beginner to html, css and javascript, and I am creating this hangman game using these, which works fine for words with single instances of each letter but it seems to run into problems when a letter occurs repeatedly in the same word. I have created a function to check the instances of each letter in the word but I can't figure out how to use it so that repeated letters are shown at the same time if they occur in the word. Any help would be appreciated. Thanks!
这是我的代码：
HTML：
<body>
<div id="container">
<div id="hangman">
<div id="stand"></div>
<div id="face"></div>
<div id="body"></div>
<div id="left-arm"></div>
<div id="right-arm"></div>
<div id="left-leg"></div>
<div id="right-leg"></div>
</div>
<div id="alphabet">
</div>
<div id="gameOver"><p>Game Over!<br>PS: I am not "actually" being hanged</p>
</div>
<div id="beingGuessedWord"></div>
</div>
</body>
CSS：
#container {
height:450px;
width:600px;
border:2px solid grey;
border-radius:5px;
background-color:hsla(115, 100%, 16%, 1);
position:relative;
}
#stand {
background-image:url('http://i59.tinypic.com/sbll48.png');
height:220px;
width:200px;
}
#face {
background-image:url('http://i59.tinypic.com/6dx0ee.png');
height:60px;
width:60px;
position:relative;
top:-175px;
left:155px;
visibility:hidden;
}
#body {
background-image:url('http://i61.tinypic.com/27ywcg.png');
background-repeat: no-repeat;
position:relative;
height:50px;
top:-175px;
left:155px;
visibility:hidden;
}
#left-arm {
background-image:url('http://i58.tinypic.com/2evvvac.png');
background-repeat: no-repeat;
position:relative;
height:70px;
width:40px;
top:-240px;
left:150px;
visibility:hidden;
}
#right-arm{
background-image:url('http://i58.tinypic.com/vfuhyp.png');
background-repeat: no-repeat;
position:relative;
height:70px;
width:40px;
top:-300px;
left:190px;
visibility:hidden;
}
#left-leg{
background-image:url('http://i57.tinypic.com/t4u5na.png');
background-repeat: no-repeat;
position:relative;
height:60px;
width:60px;
top:-335px;
left:135px;
visibility:hidden;
}
#right-leg{
background-image:url('http://i61.tinypic.com/2dqplzb.png');
background-repeat: no-repeat;
position:relative;
height:50px;
width:60px;
top:-385px;
left:180px;
visibility:hidden;
}
#alphabet {
height:100px;
width:250px;
position:relative;
top:-450px;
left:300px;
text-align:center;
}
#alphabet a {
font-size:20px;
text-decoration:none;
margin:5px;
font-family: 'Crafty Girls', cursive;
font-weight:bold;
color:grey;
}
#beingGuessedWord {
height:70px;
width:300px;
position:relative;
top:-500px;
left:80px;
padding-top:50px;
}
.letterp {
border:2px solid black;
font-family:"Crafty Girls", cursive;
font-size:20px;
margin:10px;
font-weight:bold;
padding:5px;
border-radius:5px;
}
#dash {
padding:5px;
margin:5px;
font-weight:bold;
font-family:serif;
}
#gameOver {
border:3px solid grey;
font-family:'Crafty Girls', cursive;
font-size:15px;
font-weight:bold;
position:relative;
top:-670px;
left:300px;
height:70px;
width:280px;
border-radius:5px;
text-align:center;
visibility:hidden;
}
JavaScript：
var totalIncorrectClicks = 0;//Global variable
var clickLetter = function() {
var clickedLetter = document.getElementById(this.id);
var tempWord = localStorage["wordGuess"];
/////////////
var word = new String();
for (var k=0; k<tempWord.length;k++)
{
if (k%2 ==0 )
{
word = word + tempWord[k];
}
}
var compareSuccess = false;
for (var i = 0; i < word.length; i++) {
if (word[i] == clickedLetter.innerHTML)
{
var pId = "pid" + (i+1);
var pNode = document.getElementById(pId);
pNode.style.visibility = "visible";
compareSuccess = true;
}
}
if (compareSuccess == false)
{
totalIncorrectClicks++;
}
if (compareSuccess == false && totalIncorrectClicks <=7)
{
if (totalIncorrectClicks == 1)
{
var face = document.getElementById('face');
face.style.visibility = "visible";
}
if (totalIncorrectClicks == 2)
{
var body = document.getElementById('body');
body.style.visibility = "visible";
}
if (totalIncorrectClicks == 3)
{
var leftArm = document.getElementById('left-arm');
leftArm.style.visibility = "visible";
}
if (totalIncorrectClicks == 4)
{
var rightArm = document.getElementById('right-arm');
rightArm.style.visibility = "visible";
}
if (totalIncorrectClicks == 5)
{
var leftLeg = document.getElementById('left-leg');
leftLeg.style.visibility = "visible";
}
if (totalIncorrectClicks == 6)
{
var rightLeg = document.getElementById('right-leg');
rightLeg.style.visibility = "visible";
}
if (totalIncorrectClicks == 7)
{
var gameOver = document.getElementById('gameOver');
gameOver.style.visibility = "visible";
}
}
}
////////////////
var checkLetterInstance = function(word, letter) {
var instance = 0;
for (var i = 0; i < word.length; i++)
{
if (word[i] == letter)
{
instance++;
}
}
return instance;
}
/////////////////
var createAlphabets = function () {
var alphabets = ['a', 'b', 'c', 'd', 'e', 'f', 'g', 'h', 'i', 'j', 'k', 'l', 'm', 'n', 'o', 'p', 'q', 'r', 's', 't', 'u', 'v', 'w', 'x', 'y', 'z'];
for (var i = 0; i < alphabets.length; i++)
{
var anchorNode = document.createElement('a');
var idanch = "id" + (i+1);
anchorNode.setAttribute('id', idanch);
anchorNode.innerHTML = alphabets[i];
anchorNode.setAttribute('href', "#");
var alphaDiv = document.getElementById('alphabet')
alphaDiv.appendChild(anchorNode);
if (i == 11 || i == 22)
{
alphaDiv.innerHTML = alphaDiv.innerHTML + "<br>"
}
}
}
var selectWord = function() {
var wordArray = ["air", "clouds", "sun"];
var randomWord = wordArray[Math.floor(Math.random() * wordArray.length)];
var splitRandomWord = randomWord.split('');
return splitRandomWord;
}
var displayWord = function(word) {
for (var i = 0; i < word.length; i++) {
var dispWordDiv = document.getElementById('beingGuessedWord');
var pNode = document.createElement('p');
pNode.innerHTML = word[i];
var id = "pid" + (i+1);
pNode.setAttribute('id', id);
pNode.setAttribute('class', "letterp");
pNode.style.visibility = "hidden";
pNode.style.display = "inline-block";
dispWordDiv.appendChild(pNode);
}
var dispWordDiv = document.getElementById('beingGuessedWord');
dispWordDiv.innerHTML = dispWordDiv.innerHTML + "<br>";
for (var i = 0; i < word.length; i++) {
var dispWordDiv = document.getElementById('beingGuessedWord');
var empty = document.createElement('p');
empty.setAttribute('id', 'dash');
empty.innerHTML = "___";
empty.style.display = "inline";
dispWordDiv.appendChild(empty);
}
}
var word = selectWord();
createAlphabets();
displayWord(word);
for (var i = 0; i < 27 ; i++) {
var id = "id" + ( i + 1 );
var anchor = document.getElementById(id);
localStorage["wordGuess"] = word;
anchor.onclick = clickLetter;
}
我在代码中具有以下功能：
I have these functions in the code:
-
createAlphabets（）列出要选择的字母网格。
createAlphabets() that lists the grid of alphabets to be chosen.
selectWord（ ）选择单词的函数。
selectWord() function that selects the word.
displayWord（）函数创建p个元素，这些元素包含上述所选单词的字母及其显示属性设置为无。
displayWord() function that creates p elements that are made to contain the letters of the above word selected, and their display property set as "none".
clickLetter（）函数，当单击任意一个字母时会调用该字母，并将该字母与选定的单词
clickLetter() function that is called upon when any of the letter is clicked, and this letter is compared with the letters in the selected word
checkLetterInstance（）函数，用于检查单词中每个字母的实例
checkLetterInstance() function which checks the instance of each letter in the word
JFiddle链接： http://jsfiddle.net/h_i_r_a/ 5rtwed1d / 14 /
JFiddle Link: http://jsfiddle.net/h_i_r_a/5rtwed1d/14/
推荐答案
您可以尝试使用jquery删除您的字母
否则，您可以在函数内添加以下代码：
Otherwise you could just add inside your function this piece of code:
clickedLetter.style.display = "none";
更新：等等，我想你是在问被点击后如何隐藏被点击的字母...至于显示字母，您的代码应该做到这一点。而且不用担心字母会同时出现。
Update: wait, I thought you were asking how to hide the clicked letters after being clicked... As for showing the letters your piece of code should do just that. And don't worry the letters will "appear" at the same time.
这篇关于如何处理javascript hang子手游戏中的重复字母的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
