如何在游戏结束时禁止开始新游戏？

时间：2016-07-19 22:47:06

标签： javascript

当玩家失败或获胜时，我无法想象如何让游戏结束。我究竟做错了什么？这就是我到目前为止所拥有的。任何建议都会有所帮助，谢谢！

<HTML>
<HEAD>
<TITLE>Hangman</TITLE>
<SCRIPT LANGUAGE="JavaScript"><!--
gallows = new Array("--------\n|      |\n|\n|\n|\n|\n=====",
"--------\n|      O\n|\n|\n|\n|\n=====",
"--------\n|      O\n|      |\n|\n|\n|\n=====",
"--------\n|      O\n|     \\|\n|\n|\n|\n=====",
"--------\n|      O\n|     \\|/\n|\n|\n|\n=====",
"--------\n|      O\n|     \\|/\n|      |\n|\n|\n=====",
"--------\n|      O\n|     \\|/\n|      |\n|     /\n|\n=====",
"--------\n|      O\n|     \\|/\n|      |\n|     / \\\n|\n=====")
guessChoices = new
Array("summertime")
    {
 guesses = 0
 max = gallows.length-1
 guessed = " "
 len = guessChoices.length - 1
 toGuess = guessChoices[Math.round(len*Math.random())].toUpperCase()
 displayHangman()
 displayToGuess()
 displayGuessed()
}
function stayAway() {
 document.game.elements[3].focus()
 alert("Don't mess with this form element!")
}
function displayHangman() {
 document.game.status.value=gallows[guesses]
}
function displayToGuess() {
 pattern=""
 for(i=0;i<toGuess.length;++i) {
  if(guessed.indexOf(toGuess.charAt(i)) != -1)
   pattern += (toGuess.charAt(i)+" ")
  else pattern += "_ "
 }
 document.game.toGuess.value=pattern
}
function displayGuessed() {
 document.game.guessed.value=guessed
}
function badGuess(s) {
 if(toGuess.indexOf(s) == -1) return true
 return false
}
function winner() {
 for(i=0;i<toGuess.length;++i) {
  if(guessed.indexOf(toGuess.charAt(i)) == -1) return false
 }
 return true
}
function guess(s){
 if(guessed.indexOf(s) == -1) guessed = s + guessed
 if(badGuess(s)) ++guesses
 displayHangman()
 displayToGuess()
 displayGuessed()
 if(guesses >= max){
 alert("You're dead.")
 }
 if(winner()) {
  alert("You won!")
 }
}
// --></SCRIPT>
</HEAD>
<BODY>
<H1>Hangman</H1>
<FORM NAME="game">
<PRE>
<TEXTAREA NAME="status" ROWS="7" COLS="16"
 ONFOCUS="stayAway()"></TEXTAREA>
</PRE><P>
<INPUT TYPE="TEXT" NAME="toGuess"
 ONFOCUS="stayAway()"> Enter this word in the promo code box!<BR>
<INPUT TYPE="TEXT" NAME="guessed"
 ONFOCUS="stayAway()"> Letters you have guessed.<BR>
<P>Enter your next guess.</P>
<INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="guess('A')">
<INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="guess('B')">
<INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="guess('C')">
<INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="guess('D')">
<INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="guess('E')">
<INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="guess('F')">
<INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="guess('G')">
<INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="guess('H')">
<INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="guess('I')">
<INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="guess('J')">
<INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="guess('K')">
<INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="guess('L')">
<INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="guess('M')">
<INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="guess('N')">
<INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="guess('O')">
<INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="guess('P')">
<INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="guess('Q')">
<INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="guess('R')">
<INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="guess('S')">
<INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="guess('T')">
<INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="guess('U')">
<INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="guess('V')">
<INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="guess('W')">
<INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="guess('X')">
<INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="guess('Y')">
<INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="guess('Z')"><P>

</FORM>
</BODY>
</HTML>

我只是在学习这个，所以请在回复中简单一点。谢谢！

1 个答案:

答案 0 :(得分：0)

在alert之后，您可以使用location.reload(true)重新加载页面，这将归结为开始新游戏：

if(guesses >= max){
    alert("You're dead. Press OK to start new game.")
    location.reload(true);
}
if(winner()) {
    alert("You won! Press OK to start new game.")
    location.reload(true);
}

或者，您可以隐藏包含按钮的表单部分并显示消息：

＆＃13;
＆＃13; 
var gallows = new Array("--------\n|      |\n|\n|\n|\n|\n=====",
                        "--------\n|      O\n|\n|\n|\n|\n=====",
                        "--------\n|      O\n|      |\n|\n|\n|\n=====",
                        "--------\n|      O\n|     \\|\n|\n|\n|\n=====",
                        "--------\n|      O\n|     \\|/\n|\n|\n|\n=====",
                        "--------\n|      O\n|     \\|/\n|      |\n|\n|\n=====",
                        "--------\n|      O\n|     \\|/\n|      |\n|     /\n|\n=====",
                        "--------\n|      O\n|     \\|/\n|      |\n|     / \\\n|\n=====")
var guessChoices = new Array("summertime")
var guesses = 0
var max = gallows.length-1
var guessed = " "
var len = guessChoices.length - 1
var toGuess = guessChoices[Math.round(len*Math.random())].toUpperCase()
displayHangman()
displayToGuess()
displayGuessed()

function stayAway() {
  document.game.elements[3].focus()
  alert("Don't mess with this form element!")
}
function displayHangman() {
  document.game.status.value=gallows[guesses]
}
function displayToGuess() {
  pattern=""
  for(i=0;i<toGuess.length;++i) {
    if(guessed.indexOf(toGuess.charAt(i)) != -1)
      pattern += (toGuess.charAt(i)+" ")
      else pattern += "_ "
        }
  document.game.toGuess.value=pattern
}
function displayGuessed() {
  document.game.guessed.value=guessed
}
function badGuess(s) {
  if(toGuess.indexOf(s) == -1) return true
  return false
}
function winner() {
  for(i=0;i<toGuess.length;++i) {
    if(guessed.indexOf(toGuess.charAt(i)) == -1) return false
      }
  return true
}
function guess(s){
  if(guessed.indexOf(s) == -1) guessed = s + guessed
  if(badGuess(s)) ++guesses
  displayHangman()
  displayToGuess()
  displayGuessed()
  if(guesses >= max){
    gameOver(0);
  }
  if(winner()) {
    gameOver(1);
  }
}
function gameOver(outcome) {
  // Make appropriate message visible, and only that one (you won, you lost)
  document.querySelectorAll('.result')[outcome].style.display = '';
  document.querySelectorAll('.result')[1-outcome].style.display = 'none';
  // Show game-over message area and hide buttons
  document.querySelector('#gameover').style.display = '';
  document.querySelector('#playing').style.display = 'none';
}
＆＃13; 
<FORM NAME="game">
  <PRE>
    <TEXTAREA NAME="status" ROWS="7" COLS="16"
     ONFOCUS="stayAway()"></TEXTAREA>
  </PRE>
  <P>
    <INPUT TYPE="TEXT" NAME="toGuess"
     ONFOCUS="stayAway()"> Enter this word in the promo code box!<BR>
    <INPUT TYPE="TEXT" NAME="guessed"
     ONFOCUS="stayAway()"> Letters you have guessed.<BR>
  </P>   
  <div id="playing">
    <P>Enter your next guess.</P>
    <INPUT TYPE="BUTTON" VALUE=" A " ONCLICK="guess('A')">
    <INPUT TYPE="BUTTON" VALUE=" B " ONCLICK="guess('B')">
    <INPUT TYPE="BUTTON" VALUE=" C " ONCLICK="guess('C')">
    <INPUT TYPE="BUTTON" VALUE=" D " ONCLICK="guess('D')">
    <INPUT TYPE="BUTTON" VALUE=" E " ONCLICK="guess('E')">
    <INPUT TYPE="BUTTON" VALUE=" F " ONCLICK="guess('F')">
    <INPUT TYPE="BUTTON" VALUE=" G " ONCLICK="guess('G')">
    <INPUT TYPE="BUTTON" VALUE=" H " ONCLICK="guess('H')">
    <INPUT TYPE="BUTTON" VALUE=" I " ONCLICK="guess('I')">
    <INPUT TYPE="BUTTON" VALUE=" J " ONCLICK="guess('J')">
    <INPUT TYPE="BUTTON" VALUE=" K " ONCLICK="guess('K')">
    <INPUT TYPE="BUTTON" VALUE=" L " ONCLICK="guess('L')">
    <INPUT TYPE="BUTTON" VALUE=" M " ONCLICK="guess('M')">
    <INPUT TYPE="BUTTON" VALUE=" N " ONCLICK="guess('N')">
    <INPUT TYPE="BUTTON" VALUE=" O " ONCLICK="guess('O')">
    <INPUT TYPE="BUTTON" VALUE=" P " ONCLICK="guess('P')">
    <INPUT TYPE="BUTTON" VALUE=" Q " ONCLICK="guess('Q')">
    <INPUT TYPE="BUTTON" VALUE=" R " ONCLICK="guess('R')">
    <INPUT TYPE="BUTTON" VALUE=" S " ONCLICK="guess('S')">
    <INPUT TYPE="BUTTON" VALUE=" T " ONCLICK="guess('T')">
    <INPUT TYPE="BUTTON" VALUE=" U " ONCLICK="guess('U')">
    <INPUT TYPE="BUTTON" VALUE=" V " ONCLICK="guess('V')">
    <INPUT TYPE="BUTTON" VALUE=" W " ONCLICK="guess('W')">
    <INPUT TYPE="BUTTON" VALUE=" X " ONCLICK="guess('X')">
    <INPUT TYPE="BUTTON" VALUE=" Y " ONCLICK="guess('Y')">
    <INPUT TYPE="BUTTON" VALUE=" Z " ONCLICK="guess('Z')">
  </div>
  <div id="gameover" style="display:none">
    <div><span class="result">You're dead.</span><span class="result">You won!</span></div>
    <div>Thanks for playing... try again tomorrow!</div>
  </div>
</FORM>
＆＃13;
＆＃13;
＆＃13;

旁注：页面加载时出现JavaScript错误

  

document.game在第30行未定义

这是因为脚本运行时尚未加载DOM。要解决此问题，请将script标记移至body标记的末尾：

<body>
   ... 
   <script>
       // all your code
   </script>
</body>
相关问题
最新问题