时间戳

首页 > 解决方案 > Javascript 中的 Hangman 问题

javascript - Javascript 中的 Hangman 问题

问题描述

var words = ['NISSAN', 'LAMBORGHINI', 'AUDI', 'TOYOTA', 'BMW', 'MERCEDES', 'HONDA', 'HYUNDAI', 'VOLKSWAGEN', 'PORSCHE'];
var score = 0;
var fails = 0;
var displayedWord = [];
str2 = "";
usedLetters = "";


var randomItem = words[Math.floor(Math.random()*words.length)];

function startBtn(ScorePastGame) {
document.getElementById("startmessage").value = "";
var inputs = document.getElementsByClassName('enableLetters');
for(var i = 0; i < inputs.length; i++) {
inputs[i].disabled = false;
}
    randomItem = words[Math.floor(Math.random()*words.length)];
    var i = 0;
    newWord = "";

    for (var i = 0; i< randomItem.length; i++) {
        newWord += "#";
    }

    var fails = 0;
    console.log(randomItem);
    document.getElementById("fail").value = fails;
    document.getElementById("hangman").value = newWord;

    if (ScorePastGame && ScorePastGame !=0)
    {
        score = ScorePastGame;
    }
    else
    {
        score = 0;
    }
    fails = 0;
}

function clickButton(letter) {
    var txtRandomword = document.getElementById("hangman").value;
    var WrongLetters = document.getElementById("startmessage").value;
    var liveNum = document.getElementById("fail").value;
    var Fail = true;

    if (randomItem.includes(letter))
    {
        for (var k = 0; k < randomItem.length; k++)
        {
            if(randomItem.charAt(k) == letter)
            {
                newWord = newWord.substr(0,k) + letter + newWord.substr(k + 1);
            }

        }
        document.getElementById("hangman").value = newWord;

        if (!newWord.includes("#"))
        {
    alert("You win!");
    fails = 0;
            score++;
            document.getElementById("score").value = score;
            startBtn(score);
        }

    }
    else
    {
        fails++;
        document.getElementById("fail").value = fails;

        if (fails > 6) {
    alert("You lose!");
    fails = 0;
    usedLetters = "";
            startBtn();
        }
    }
    usedLetters += letter + " ";
    document.getElementById("startmessage").value = usedLetters;
}
table{
  background-color: thistle;
  margin: 0px auto;
  margin-top: 13%;
}
.enableLetters,
#score,
#fail,
#hangman,
#startmessage:disabled {
  background: white;
  color: black;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>
    <link rel="stylesheet" href="styles.css">
    <script src="script.js"></script>
  </head>
  <body>
    <form>
      <table border="1">
        <tr>
          <td colspan="4" style="text-align: right">
            <label for="score">Score: </label>
            <input type="text" id="score" name="score" value="0" size="2" checked="valid()" disabled/><br>
            <label for="fail">Fails (6): </label>
            <input type="text" id="fail" name="fail" value="0" size="2" disabled/>
          </td>
          <td colspan="7" style="text-align: center">
            <label for="hangman"></label>
            <input type="text" id="hangman" name="hangman" value="   ---Hangman---   " disabled/><br>
            <label for="startmessage"></label>
            <input type="text" id="startmessage" name="startmessage" value="Click Start to get a word." disabled/>
          </td>
          <td colspan="2" style="text-align: center">
            <label for="start"></label>
            <input type="button" id="start" name="start" value="Start" onclick="startBtn()"/>
          </td>
        </tr>
        <tr>
          <td style="text-align: center"><input type="button" class="enableLetters" value="A" onClick="clickButton('A')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="B" onClick="clickButton('B')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="C" onClick="clickButton('C')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="D" onClick="clickButton('D')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="E" onClick="clickButton('E')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="F" onClick="clickButton('F')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="G" onClick="clickButton('G')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="H" onClick="clickButton('H')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="I" onClick="clickButton('I')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="J" onClick="clickButton('J')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="K" onClick="clickButton('K')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="L" onClick="clickButton('L')" disabled/></td>
          <td style="text-align: center"><input type="button" class="enableLetters" value="M" onClick="clickButton('M')" disabled/></td>
        </tr>
        <tr>
          <td style="text-align: center"><input type="button" class="enableLetters" value="N" onClick="clickButton('N')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="O" onClick="clickButton('O')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="P" onClick="clickButton('P')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="Q" onClick="clickButton('Q')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="R" onClick="clickButton('R')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="S" onClick="clickButton('S')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="T" onClick="clickButton('T')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="U" onClick="clickButton('U')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="V" onClick="clickButton('V')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="W" onClick="clickButton('W')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="X" onClick="clickButton('X')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="Y" onClick="clickButton('Y')" disabled/></td>
                <td style="text-align: center"><input type="button" class="enableLetters" value="Z" onClick="clickButton('Z')" disabled/></td>
        </tr>
      </table>
    </form>
  </body>
</html>

我正在使用 HTML、CSS 和 JavaScript 编写一个刽子手游戏。在网上搜索后，我仍然无法弄清楚如何解决我面临的问题。所以刽子手游戏的工作原理是用户点击字母，他们点击的字母会显示在上面的框中。我现在的问题是我无法阻止相同的字母出现在盒子上，这会影响失败的次数。

在此处输入图像描述

不知何故，我在赢/输后清除框的代码总是以用户单击的最后一个字母产生。 在此处输入图像描述

请告知我应该如何更改我的代码谢谢！

标签： javascripthtmlcssweb

解决方案

我已经想通了。通过将输出转换为数组，我可以删除重复的字母。一个简单的 .length 新 Set 也可以解决计数超出其应有的错误。

    usedLetters += letter;
    const wrong = usedLetters.split('');
    let duplicateLetters = [...new Set(wrong)];
    document.getElementById("startmessage").value = duplicateLetters;
    document.getElementById("fail").value = duplicateLetters.length;

推荐阅读