Question

在我与朋友一起制作的游戏文字冒险中，一旦玩家经过某条路径，他/她会在途中找到一根棍子和一些石头。

当你找到这些岩石和木棍时，我想在该声明中添加2个按钮，说："Grab the sticks and rocks"。

然后，旁边的另一个按钮说"Leave it there"。但是，我在这方面遇到了一些麻烦，并希望得到一些帮助。关于如何应用这些新按钮仍然非常困惑..

以下是当前的Javascript代码：

<script>
function one()
{
  var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>';
  var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
  document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
  var myButton = document.getElementById('btnOne');
  myButton.onclick = four;
}

function two()
{
  document.getElementById("b").innerHTML="You pick up the stick. It might be useful for  
something."; 
  document.getElementById("btnTwo").style.display = 'none';
  document.getElementById("btnThree").style.display = 'none';
}

function three()
{
  document.getElementById("c").innerHTML="You leave the stick on the ground and continue on.";
  document.getElementById("btnTwo").style.display = 'none';
  document.getElementById("btnThree").style.display = 'none';
}

function four()
{
  document.getElementById("d").innerHTML="You feel a stick stuck to the wall with something like honey. Next to it is a few rocks.";
}
</script>

HTML代码：

<div style="margin-left:15px; width:200px; margin-top:100px;">
  <button id="btnOne" onclick="one()">Feel around the cave</button>
</div>

<div style="margin-left:255px; width:200px; margin-top:-15px;">
</div>

<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px;height:600px;"> 
  <div id="d"></div>
  <div id="c"></div>
  <div id="b"></div>
  <div id="a"></div>
</div>

Answer 1

根据我的理解，使用此Javascript代码：

function one()
{
  var newButton1 = '<button id="btnTwo" onclick="two()" >Pick up stick</button>';
  var newButton2 = '<button id="btnThree" onclick="three()">Leave it there</button>';
  document.getElementById("a").innerHTML="You feel something on the ground, and you think it's a stick."+newButton1+newButton2;
  var myButton = document.getElementById('btnOne');
  myButton.onclick = four;
}

function two()
{
  document.getElementById("b").innerHTML="You pick up the stick. It might be useful for  
something."; 
  document.getElementById("btnTwo").style.display = 'none';
  document.getElementById("btnThree").style.display = 'none';

}

function three()
{
  document.getElementById("c").innerHTML="You leave the stick on the ground and continue 
on.";
  document.getElementById("btnTwo").style.display = 'none';
  document.getElementById("btnThree").style.display = 'none';
}

function four()
{
  var newButton1 = '<button id="btnFour" onclick="five()" >Grab the sticks and rocks</button>';
  var newButton2 = '<button id="btnFive" onclick="three()">Leave it there</button>';
  document.getElementById("d").innerHTML="You feel a stick stuck to the wall with something like honey. Next to it is a few rocks.";
}

function five()
{
  document.getElementById("e").innerHTML="You did grab the sticks and rocks. It might be useful for something.";
  document.getElementById("btnFour").style.display = 'none';
  document.getElementById("btnFive").style.display = 'none';
}

function six()
{
  document.getElementById("f").innerHTML="You leave the stick on the ground and continue 
on.";
  document.getElementById("btnFour").style.display = 'none';
  document.getElementById("btnFive").style.display = 'none';
}

并使用此entire div：

<div id="entire" style="margin-left:490px; margin-top:-22px; width:400px;  height:600px;"> 
  <div id="f"></div>
  <div id="e"></div>
  <div id="d"></div>
  <div id="c"></div>
  <div id="b"></div>
  <div id="a"></div>
</div>

注意，我在HTML中加了2个div，div f和div e，在javascript上我添加了两个函数，函数five()和函数{{1} }。

将新按钮应用于游戏

1 个答案: