将新按钮应用于游戏

Applying new buttons to the game

本文关键字：应用于 游戏 按钮 新按钮      更新时间：2023-12-30

在我和朋友进行的一次游戏文本冒险中，一旦玩家穿过某条路径，他/她就会在途中发现一根棍子和一些石头。

当你找到这些石头和棍子时，我想在声明下面添加两个按钮，说："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>

根据我的理解，使用以下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';
}

并使用此entirediv:

<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中添加了两个div，div f和div e，在javascript中添加了函数five()和函数six()。

相关文章：