Question

所以我的hangman页面基本上正常工作，但我想调整它。

首先，我的失败猜测正确加起来，当你达到6次尝试失败时，会弹出警报。我现在遇到的问题是我无法弄清楚如何重置页面。我尝试了一些＆＃34; $（＆＃39;：reset＆＃39;）;＆＃34;但到目前为止，没有一个对我有用。弹出警报后，单击“确定”，然后可以继续猜测，这显然无法正常工作。

其次，我不知道如何识别代码形式的胜利。当你玩游戏时，你可以猜出所有正确的字母，但在猜到最后一个字母后，实际上什么都没发生。我需要找到一种方法让它识别出所有字母都已被识别出来。

提前谢谢你！

JSfiddle - http://jsfiddle.net/9mxxwu0o/

Html -

<body>


<form id="form" name="form" method="post" action="">
<input type="button" id="but" value="Start"/>
<div id="hangman-jquery">
    <div id="word"></div>
    <div id="alpha"></div>
</div>
</form>

<div id="win">
</div>

<script src="http://code.jquery.com/jquery-latest.min.js"></script>
<script src="hangman.js"></script>
</body>

JS -

function hangman(word) {
    var trys = 0;
    var guess = 0;
    var alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    $.each(alpha.split(''), function(i, val) {
        $('#alpha').append($('<span class="guess">' + val + '</span>'));
    });
    $.each(word.split(''), function(i, val) {
        $('#word').append($('<span class="letter" letter="' + val + '">-</span>'));
    });
    $('.guess').click(function() {
        var count = $('#word [letter=' + $(this).text() + ']').each(function() {
            $(this).text($(this).attr('letter'));
        }).length;
        $(this).removeClass('guess').css('color', (count > 0 ? 'green' : 'red')).unbind('click');

        if (count > 0) {
        $('#win').text("Correct Guess");
        } else if (count <= 0) {
        trys++;
        $('#win').text("You have tried to guess the word and failed " + trys + " times");
        }
        if (trys == 6) {
        alert("You have guessed six times, you lose");
        trys = 0;
        $("#win").text("");
        $(this).val('');

        }
    });
}

$(document).ready(function() {
    $('#but').click(function() {
        var options = new Array("DOG", "CAT", "BAT", "HORSE", "TIGER", "LION", "BEAR", "LIGER", "DOOM", "SPIDER", "TREES", "LAPTOP");
        var random = 1 + Math.floor(Math.random() * 12);
        hangman(options[random]);
    });
});

Answer 1

请在松散的消息后添加：

$("#word, #alpha").html("");

像这样：

if (trys == 6) {
    alert("You have guessed six times, you lose");
    $("#word, #alpha").html(""); // This
    trys = 0;
    $("#win").text("");
    $(this).val('');
}

以下是工作代码：

http://jsfiddle.net/9mxxwu0o/3/

我只是添加了几个简单的东西，没有修补或者让它运行得更快，如果你想要的话，那么 nothingisnecessary 为你提供了一个很好的答案。

Answer 2

这是函数派上用场的地方：可重用的代码块。

修正小提琴：http://jsfiddle.net/2azzvscs/

（向下滚动并运行“Snippet”以在堆栈溢出内部进行尝试）

在这种情况下，您应该将用于启动游戏的代码移动到单独的函数（我在下面的示例中称为newGame()），当您需要在赢或输之后开始新游戏时，可以调用该函数。 / p>

还使其检测到胜利状态并要求用户再次玩。

我还建议使用html()代替append();我将您的代码转换为使用一个字符串数组，这些字符串将被连接到一个DOM片段中，该片段将替换以前的内容。通常，附加到DOM会重排文档，因此您希望在循环中尽可能少地执行此操作。（这样做也可以让你的游戏状态重新开始，而无需从服务器重新加载页面，在这种情况下完全没有必要）。

function hangman(word) {
    var trys = 0;
    var guess = 0;

    var alpha = 'ABCDEFGHIJKLMNOPQRSTUVWXYZ';
    var strBuilder = [];
    $.each(alpha.split(''), function (i, val) {
        strBuilder[strBuilder.length] = '<span class="guess">' + val + '</span>';
    });
    $('#alpha').html(strBuilder.join(''));
    strBuilder = [];
    $.each(word.split(''), function (i, val) {
        strBuilder[strBuilder.length] = '<span class="letter" letter="' + val + '">-</span>';
    });
    $('#word').html(strBuilder.join(''));

    $('.guess').click(function () {
        var count = $('#word [letter=' + $(this).text() + ']').each(function () {
            $(this).text($(this).attr('letter'));
        }).length;
        $(this).removeClass('guess').css('color', (count > 0 ? 'green' : 'red')).unbind('click');

        if (count > 0) {
            $('#win').text("Correct Guess");
        } else if (count <= 0) {
            trys++;
            $('#win').text("You have tried to guess the word and failed " + trys + " times");
        }
        if ($("#word").text() === word) {
            if (window.confirm("You win! Play again?")) {
                newGame();
                $("#win").text("");
            }
        }
        if (trys == 6) {
            alert("You have guessed six times, you lose");
            $("#win").text("");
            newGame(); // begin new game
        }
    });
}

function newGame() {
    $("#win").text("");
    var options = new Array("DOG", "CAT", "BAT", "HORSE", "TIGER", "LION", "BEAR", "LIGER", "DOOM", "SPIDER", "TREES", "LAPTOP");
    var random = 1 + Math.floor(Math.random() * 12);
    hangman(options[random]);
}

$(document).ready(function () {
    $('#but').click(newGame);
});

.guess
{
    font-family: "Segoe UI", Arial, Sans-serif;
    font-size: 14px;
    padding: 5px;
}
.guess:hover
{
    background-color: #eee;
    cursor: pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<body>
    <form id="form" name="form" method="post" action="">
        <input type="button" id="but" value="Start" />
        <div id="hangman-jquery">
            <div id="word"></div>
            <div id="alpha"></div>
        </div>
    </form>
    <div id="win"></div>
    <script src="http://code.jquery.com/jquery-latest.min.js"></script>
    <script src="hangman.js"></script>
</body>

Answer 3

也许您只需重新加载页面即可重置游戏？

location.reload();

如何重置页面，以及如何在刽子手中获胜

3 个答案: