简体   繁体   English

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

[英]Trigger function on click for hangman game

I'm new to JavaScript and have been trying to code up this Hangman game, but am running into issues. 我是JavaScript的新手,一直试图编写这个Hangman游戏的代码,但我遇到了问题。 What I have to far is the following: 我所要做的就是以下内容:

My HTML: 我的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>

My JavaScript: 我的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;

So the code is correctly selecting a word and placing the correct amount of underscores in places of the letters; 所以代码正确地选择一个单词并在字母的位置放置正确数量的下划线; but nothing happens when I run my code. 但是当我运行我的代码时没有任何反应。 I might've over-looked something really simple and would really appreciate if someone could point out what is wrong with the code/logic. 我可能已经过度看了一些非常简单的东西,如果有人能指出代码/逻辑有什么问题,我会非常感激。

Also, any other tips on how to improve the code/logic will be appreciated! 此外,任何其他关于如何改进代码/逻辑的技巧将不胜感激! Thanks. 谢谢。

The last line in your code: 代码中的最后一行:

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

You have not declared letterGuess() as a function. 您尚未将letterGuess()声明为函数。 You probably want something like this: 你可能想要这样的东西:

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

This will execute your guess() function on every click on the Button. 这将在Button上的每次单击时执行guess()函数。 In addition you can/should remove the onclick="" attribute from the <button> 此外,您可以/应该从<button>删除onclick=""属性

Here is a jsfiddle that works. 这是一个有效的jsfiddle Is your html set up correctly and do you actually load the script? 你的html设置是否正确,你真的加载脚本吗?

Your html should look something like this: 你的HTML应该是这样的:

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

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

If letterGuess was just a typo, please console.log() something in your guess() function, to make sure it's being executed after clicking the button. 如果letterGuess只是一个拼写错误,请在你的guess()函数中letterGuess console.log() ,以确保在点击按钮后执行它。

You do not have a function called letterGuess , but you're calling it on click. 你没有一个名为letterGuess的函数,但是你在点击时调用它。 Changing that call to guess will get you somewhere 将该调用改为guess会让你到达某个地方

Correct your Totalguesses to be a global variable. 将您的Totalguesses更正为全局变量。 It is local to the startGame() function. 它是startGame()函数的本地。

It is working fine, just the guess letter needs to be in lowercase. 它工作正常,只需要猜测小写字母。

Working JSFiddle here 在这里工作JSFiddle

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM