Question

我一直致力于基于文本的游戏供个人使用，以便更好地使用JavaScript。通过该游戏，用户回答所写的问题（如故事/选择游戏）。这是我的代码......

<!DOCTYPE HTML>
<html>

<head>
<!--<script type="text/javascript" src="gamescript.js"></script>-->

<style>
body {
  font-family: Calibri, sans-serif;
}

#mspace {
  padding: 10px 20px;
  background: #ff0;
}

.hideThis {
  display: none;
}

button {
  margin: 10px;
}

</style>


<script>

function myFunction(){
    var door = document.getElementById("myInput").value;
    if (door == "Door 1" || door == "door 1"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else if (door == "Door 2" || door == "door 2"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else{
        document.getElementById("door").innerHTML = "You must enter a door!"
    }
}

function myFunction2(){
    var choice1 = document.getElementById("myInput2").value;
    if (choice1 == "enter passageway" || choice1 == "passageway"){
        document.getElementById("choice1").innerHTML = "You entered the" + choice1;
     }else if (choice1 == "continue searching"){
        document.getElementById("choice1").innerHTML = "You " + choice1;    
    }else{
        document.getElementById("choice1").innerHTML = "You must choose an option!"
    }
}

// JS for BOSS level
// starting variable for the boss
var stamina = 10;

// starting message
var msg = "A huge, threatening monster wants to fight you! What do you do?";
// run a function that is below
document.getElementById("mspace")

// click a button to execute a function
// NOTE: no parentheses after the function name in these cases
window.onload = function(){
    document.getElementById("fight").onclick = fightResponse;
    document.getElementById("run").onclick = runResponse;
}

function runResponse() {
  if (stamina > 8) {
    msg = "The monster swings his long arm and -- GAME OVER!";
    hideButtons();
  } else if (stamina > 3) {
    msg = "Well, that's one way to end a fight ...";
    hideButtons();
  } else {
    msg = "Keep fighting! The monster is almost dead!";
  }
  writeMessage();
}

function fightResponse() {
  if (stamina > 8) {
    msg = "The monster is strong! It resists your attack!";
  } else if (stamina > 5) {
    msg = "With a loud screech, the monster stands firm.";
  } else if (stamina > 3) {
    msg = "Your attack seems to be having an effect! The monster stumbles!";
  } else if (stamina > 0) {
    msg = "This monster is about to fall! It staggers and reels!";
  } else {
    msg = "With a final swing! The monster has been defeated! You have triumphed!";
    hideButtons();
  }
  // create new random number from 0 to 5
  var damage = Math.floor(Math.random() * 6);
  // subtract it from stamina
  stamina -= damage;
  writeMessage();
}

function hideButtons() {
  // changes the class on the div - see the CSS pane 
  document.getElementById("game").className = "hideThis";
}

window.onload = function writeMessage() {
  // write message into the yellow paragraph
  document.getElementById("mspace").innerHTML = msg;
}

</script>
</head>

<body>

<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<!---- Question 1 ---->
<p id ="choice1">Behind Door 1 is an empty room. Whilst searching the room for clues, you see a hidden passageway. Do you wish to enter the passageway or continue searching?</p>

<input id="myInput2" type="text">

<button onclick="myFunction2()">Enter</button>


<!---- Boss ---->
<h1>Fight the Monster!</h1>

<p id="mspace"></p>

<div id="game">

  <button id="fight">Fight</button>
  <button id="run">Run</button>

</div>


</body>
</html>

当问题出现时，虽然它按照我想要的方式进行，但我想要它，以便当用户为第一个问题输入“Door 1”或“Door 2”时，第二个问题出现在它之后。在我的代码中，它就像一个带有文本框的问题列表。它看起来不太好，我不知道如何改变它。

对于“最终老板”代码，它似乎没有工作，我不知道为什么。我检查了F12开发人员工具，没有显示任何错误。

所有的帮助表示赞赏，谢谢！

Answer 1

你必须停止放置＆＃34; window.onload＆＃34;在事情之前...... 也许这个例子有更好的效果..

另一个好的编码实践是将内容脚本放在关闭正文标记之前。他们赢得了很多onload问题。

＆＃13;

function myFunction(){
    var door = document.getElementById("myInput").value;
    if (door == "Door 1" || door == "door 1"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else if (door == "Door 2" || door == "door 2"){
        document.getElementById("door").innerHTML = "You have entered" + door;
    }else{
        document.getElementById("door").innerHTML = "You must enter a door!"
    }
}

function myFunction2(){
    var choice1 = document.getElementById("myInput2").value;
    if (choice1 == "enter passageway" || choice1 == "passageway"){
        document.getElementById("choice1").innerHTML = "You entered the" + choice1;
     }else if (choice1 == "continue searching"){
        document.getElementById("choice1").innerHTML = "You " + choice1;    
    }else{
        document.getElementById("choice1").innerHTML = "You must choose an option!"
    }
}

// JS for BOSS level
// starting variable for the boss
var stamina = 10;

// starting message
var msg = "A huge, threatening monster wants to fight you! What do you do?";
// run a function that is below

// click a button to execute a function
// NOTE: no parentheses after the function name in these cases

document.getElementById("fight").onclick = fightResponse;
document.getElementById("run").onclick = runResponse;

function runResponse() {
  if (stamina > 8) {
    msg = "The monster swings his long arm and -- GAME OVER!";
    hideButtons();
  } else if (stamina > 3) {
    msg = "Well, that's one way to end a fight ...";
    hideButtons();
  } else {
    msg = "Keep fighting! The monster is almost dead!";
  }
  writeMessage();
}

function fightResponse() {
  if (stamina > 8) {
    msg = "The monster is strong! It resists your attack!";
  } else if (stamina > 5) {
    msg = "With a loud screech, the monster stands firm.";
  } else if (stamina > 3) {
    msg = "Your attack seems to be having an effect! The monster stumbles!";
  } else if (stamina > 0) {
    msg = "This monster is about to fall! It staggers and reels!";
  } else {
    msg = "With a final swing! The monster has been defeated! You have triumphed!";
    hideButtons();
  }
  // create new random number from 0 to 5
  var damage = Math.floor(Math.random() * 6);
  // subtract it from stamina
  stamina -= damage;
  writeMessage();
}

function hideButtons() {
  // changes the class on the div - see the CSS pane 
  document.getElementById("game").className = "hideThis";
}

function writeMessage() {
  // write message into the yellow paragraph
  document.getElementById("mspace").innerHTML = msg;
}
writeMessage();

＆＃13;

<!DOCTYPE HTML>
<html>

<head>
<!--<script type="text/javascript" src="gamescript.js"></script>-->
</head>

<body>

<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<!---- Question 1 ---->
<p id ="choice1">Behind Door 1 is an empty room. Whilst searching the room for clues, you see a hidden passageway. Do you wish to enter the passageway or continue searching?</p>

<input id="myInput2" type="text">

<button onclick="myFunction2()">Enter</button>


<!---- Boss ---->
<h1>Fight the Monster!</h1>

<p id="mspace"></p>

<div id="game">

  <button id="fight">Fight</button>
  <button id="run">Run</button>

</div>


</body>
</html>

＆＃13;

Answer 2

您需要根据需要为特定元素设置可见性hidden和visible。对于第二个问题，您不应在window.onload上创建writeMessage函数。以下是更新后的代码以及其他一些格式更正。

＆＃13;

document.getElementById("choice1").style.visibility = "hidden";
document.getElementById("question2").style.visibility = "hidden";
document.getElementById("question3").style.visibility = "hidden";

function myFunction(){
    var door = document.getElementById("myInput").value;
    if (door == "Door 1" || door == "door 1"){
        document.getElementById("door").innerHTML = "You have entered " + door;
        document.getElementById("choice1").style.visibility = "visible";
document.getElementById("question2").style.visibility = "visible";
    }else if (door == "Door 2" || door == "door 2"){
        document.getElementById("door").innerHTML = "You have entered " + door;
        document.getElementById("choice1").style.visibility = "visible";
document.getElementById("question2").style.visibility = "visible";
    }else{
        document.getElementById("door").innerHTML = "You must enter a door!"
    }
}

function myFunction2(){
    var choice1 = document.getElementById("myInput2").value;
    if (choice1 == "enter passageway" || choice1 == "passageway"){
        document.getElementById("choice1").innerHTML = "You entered the " + choice1;
        document.getElementById("question3").style.visibility = "visible";
     }else if (choice1 == "continue searching"){
        document.getElementById("choice1").innerHTML = "You " + choice1; 
        document.getElementById("question3").style.visibility = "visible";
    }else{
        document.getElementById("choice1").innerHTML = "You must choose an option!"
    }
}

// JS for BOSS level
// starting variable for the boss
var stamina = 10;

// starting message
var msg = "A huge, threatening monster wants to fight you! What do you do?";
// run a function that is below
document.getElementById("mspace").innerHTML = msg;

// click a button to execute a function
// NOTE: no parentheses after the function name in these cases
window.onload = function(){
    document.getElementById("fight").onclick = fightResponse;
    document.getElementById("run").onclick = runResponse;
}

function runResponse() {
  if (stamina > 8) {
    msg = "The monster swings his long arm and -- GAME OVER!";
    hideButtons();
  } else if (stamina > 3) {
    msg = "Well, that's one way to end a fight ...";
    hideButtons();
  } else {
    msg = "Keep fighting! The monster is almost dead!";
  }
  writeMessage();
}

function fightResponse() {
  if (stamina > 8) {
    msg = "The monster is strong! It resists your attack!";
  } else if (stamina > 5) {
    msg = "With a loud screech, the monster stands firm.";
  } else if (stamina > 3) {
    msg = "Your attack seems to be having an effect! The monster stumbles!";
  } else if (stamina > 0) {
    msg = "This monster is about to fall! It staggers and reels!";
  } else {
    msg = "With a final swing! The monster has been defeated! You have triumphed!";
    hideButtons();
  }
  // create new random number from 0 to 5
  var damage = Math.floor(Math.random() * 6);
  // subtract it from stamina
  stamina -= damage;
  writeMessage();
}

function hideButtons() {
  // changes the class on the div - see the CSS pane 
  document.getElementById("game").className = "hideThis";
}

function writeMessage() {
  document.getElementById("mspace").innerHTML = msg;
}

＆＃13;

<!DOCTYPE HTML>
<html>

<head>

</head>

<body>

<p id ="door"> Which door do you wish to enter? Door 1 or Door 2? </p>

<input id="myInput" type="text">

<button onclick="myFunction()">Enter</button>

<!---- Question 1 ---->
<p id ="choice1">Behind Door 1 is an empty room. Whilst searching the room for clues, you see a hidden passageway. Do you wish to enter the passageway or continue searching?</p>

<div id="question2">
<input id="myInput2" type="text">

<button onclick="myFunction2()">Enter</button>
</div>


<!---- Boss ---->
<div id="question3">
<h1>Fight the Monster!</h1>

<p id="mspace"></p>

<div id="game">

  <button id="fight">Fight</button>
  <button id="run">Run</button>

</div>
</div>


</body>
</html>

＆＃13;

Answer 3

由于浏览器通常自上而下处理代码（HTML，CSS或Javascript），window.onload用于确保在加载整个页面后执行函数，这有助于避免引用错误。但是，在您的代码中，window.onload被多次分配，这意味着只会执行最后一次分配。您可以通过将所有onload功能合并到一个家长中来解决此问题。函数，或通过类似的东西，允许您将函数追加到onload事件（更多信息可以找到here）：

function addLoadEvent(func) 
{ 
      var oldonload = window.onload; 
      if (typeof window.onload != 'function') { 
        window.onload = func; 
      } else { 
        window.onload = function() { 
          if (oldonload) { 
            oldonload(); 
          } 
          func(); 
        } 
      } 
} 
addLoadEvent(nameOfSomeFunctionToRunOnPageLoad); 
addLoadEvent(function() { 
      /* more code to run on page load */ 
    });

当按照@KKK的建议顺序显示问题时，您可能需要查看可见性属性并相应地进行设置。但是，如果您想要更多动态功能，那么您将需要使用document.getElementById()及其相关功能来编辑，追加和删除页面上的元素。 This应该是一个很好的起点。

顺便说一句，在if语句中添加多个条件时要小心。由于Operator Precedence，您的代码应该可以正常运行，但正确使用括号可以确保它按预期运行，同时提高代码可读性。

包含If语句的JavaScript代码

3 个答案: