当游戏结束时,如何禁止新游戏的开始

How to disallow start of new game when game is over?

本文关键字:新游戏 游戏 开始 禁止 游戏结束 何禁止      更新时间:2023-09-26

当玩家输了或赢了时,我不知道如何结束游戏。我做错了什么?这就是我到目前为止所拥有的。任何建议都会很有帮助,谢谢!

<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>

我只是在学习这一点,所以请在回复中保持简单。谢谢

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

或者,您可以隐藏表单中有按钮的部分,并显示一条消息:

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';
}
<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>

附带说明:当页面加载时,出现JavaScript错误

第30行中未定义document.game

这是因为在脚本运行时DOM尚未加载。要解决此问题,请将script标签向右移动到body标签的末尾:

<body>
   ... 
   <script>
       // all your code
   </script>
</body>