Question

我是JavaScript新手并且一直在尝试编写这个Hangman游戏的代码，但我遇到了问题。我所要做的就是以下内容：

我的HTML：

<div class="col-md-4">
    <div id="placeHolder">_ _ _ _ _ _</div>
    <div id="gamestatus"></div>
    <input type="text" size="1" id="letterGuess" maxlength="1">
    <button id="button" onclick="guess()">Press to start</button>
</div>

我的JavaScript：

var dictionary = ['music', 'mountain', 'forest', 'florida', 'sweden', 'golf'];
var wordUsed, input, placeHolder; 

function startGame()
{
    placeHolder = "";
    var totalGuesses = 10;
    wordUsed = dictionary[Math.floor(Math.random() * dictionary.length)];
    console.log(wordUsed);

    var buttonText = document.getElementById("button").innerHTML = "Guess";

    for(var i = 0; i < wordUsed.length; i++)
    {
        placeHolder += "_ ";
    }

    document.getElementById("placeHolder").innerHTML = placeHolder;
    document.getElementById("gamestatus").innerHTML = "Game is in progress.";

}

function guess()
{
    var correctGuess = false;
    var ip = document.getElementById("letterGuess");
    input = ip.value;

    for(var i = 0; i < wordUsed.length; i++)
    {
        if(input == wordUsed.substring(i, i + 1))
        {
            correctGuess = true;
            placeHolder = placeHolder.substring(0, i) + input + placeHolder.substring(i + 1, placeHolder.length + 1);
            document.getElementById("placeHolder").innerHTML = placeHolder;
        }
    }
    if(!correctGuess)
    {
        totalGuesses--;
    }
    if(placeHolder == wordUsed)
    {
        alert("You WIN!");
    }
    if(totalGuesses == 0)
    {
        alert("You LOSE!")
        startGame();
    }
}
startGame();
document.getElementById("button").onclick = guess;

因此代码正确选择一个单词并在字母的位置放置正确数量的下划线;但是当我运行我的代码时没有任何反应。我可能已经过度看了一些非常简单的东西，如果有人能指出代码/逻辑有什么问题，我会非常感激。

此外，任何有关如何改进代码/逻辑的其他提示将不胜感激！谢谢。

Answer 1

代码中的最后一行：

document.getElementById("button").onclick = letterGuess;

您尚未将letterGuess()声明为函数。你可能想要这样的东西：

document.getElementById("button").addEventListener("click", guess);

这将在按钮上的每次单击时执行guess()功能。此外，您可以/应该从onclick=""

中删除<button>属性

这是一个有效的jsfiddle。您的html设置是否正确，是否实际加载了脚本？

你的HTML应该是这样的：

<!DOCTYPE html>
<html>
<head></head>

<body>
    <!-- your game html -->
    <script type="text/javascript" src="game.js"></script>
</body>
</html>

如果letterGuess只是一个拼写错误，请在console.log()函数中添加guess()内容，以确保在点击按钮后执行该操作。

Answer 2

您没有名为letterGuess的功能，但您在点击时调用它。将该调用更改为guess会让您到达某个地方

Answer 3

将您的Totalguesses更正为全局变量。它是startGame()函数的本地。

工作正常，猜猜信需要小写。

使用JSFiddle here

点击刽子手游戏的触发功能

3 个答案: