如何重置網頁，以及如何在hang子手中贏得勝利

所以我有我的hang子手頁面本質上工作，但我希望調整它。如何重置網頁，以及如何在hang子手中贏得勝利

首先，我的失敗猜測正確合併，並且當您達到6次失敗嘗試時彈出警報。我現在遇到的問題是我無法弄清楚如何重置頁面。我試過了一些「$（'：reset'）;」但到目前爲止，還沒有人爲我工作。目前彈出提醒後，您單擊確定，然後可以繼續猜測，顯然不按預期工作。

其次，我不知道如何識別代碼形式的勝利。當你玩遊戲時，你可以猜出所有正確的字母，但是在猜出最後一個字母時，實際上並沒有發生。我需要找到一種方法讓它認識到所有信件都已被識別。

謝謝你提前！

的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]); 
    }); 
});

來源

2014-12-03 Kyle Schmelzer

我張貼檢測優勝條件，並重置遊戲狀態的解決方案。在這種情況下，Win檢測很容易：只需將傳遞給hangman（）函數的'word'與包含該單詞的元素的'.text（）'屬性進行比較（因爲正確的單詞不會包含破折號）。 – nothingisnecessary 2014-12-03 05:57:13

這是功能派上用場：可重複使用的代碼塊。

固定小提琴：http://jsfiddle.net/2azzvscs/

（向下滾動和「運行片段」嘗試一下，直接在堆棧溢出）

在這種情況下，你應該開始遊戲到一個單獨的函數代碼移動（我在下面的例子中稱其爲newGame()），當你需要在勝利或失敗後開始新遊戲時可以調用它。

也使它檢測到勝利條件，並要求用戶再次玩。

我也推薦使用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>

來源

2014-12-03 05:48:31 nothingisnecessary

哦，男人，你給了我中獎。我不僅在看你的代碼，而且在考慮我能夠在什麼時候做更多的事情，但我非常感謝你如何爲我分解它。 CSS完全沒有必要，但非常感謝。你真的超越了，謝謝你！ – 2014-12-03 06:46:10

也許你可以簡單地重新加載頁面就可以重置遊戲？

location.reload();

來源

2014-12-03 05:27:29

沒錯，那是一個選項。如果可能，我希望在頁面內重置。 – 2014-12-03 06:47:00

您的鬆動消息後只需補充一點：

$("#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爲您提供了一個很好的答案。

來源

2014-12-03 05:35:01 MiChAeLoKGB

感謝您對此事進行澄清。我沒有想到像那樣使用#word和#alpha。簡單但我完全忽略它。我非常感謝邁克爾的幫助！ – 2014-12-03 06:43:14

我很高興幫助你。但是，沒有必要給你一個非常好的答案。太糟糕了，我現在正在一個網絡上工作，所以我沒有時間玩它。無論如何，享受和當你有充分的工作頁面，給我鏈接。我很樂意玩幾場比賽。 – MiChAeLoKGB 2014-12-03 06:58:48

哈哈，不，它很酷。我沒有製作華麗的遊戲，只是瞭解它背後的代碼。所以沒有必要發佈什麼，實質上是我結束了。再次感謝你！ – 2014-12-03 20:23:05

如何重置網頁，以及如何在hang子手中贏得勝利

回答

相關問題