时间戳

首页 > 解决方案 > 试图隐藏我的游戏元素，直到满足条件

javascript - 试图隐藏我的游戏元素，直到满足条件

问题描述

我已经完成了如何禁用选项卡和启用。但现在我想隐藏元素，这样当玩家解锁某些东西时会更有回报。

我试过这个：

<div id="turtle" style="visibility: hidden;">
                <label class="radio">
                    <input type="radio" name="turtle">
                </label><img src="turtle.jpg" alt="Smiley face" 
height="42" width="42"></div>
            <br />

使宠物消失：

在此处输入图像描述

然后在每只宠物解锁时用 JavaScript 编写脚本，以便它们变得可见但无法正常工作。

我想既然重生是 4（这样做是为了测试它是否正常工作从 0 开始），我的乌龟将是唯一一个被揭示的乌龟。

这是我的 JavaScript 代码：

 rebirths = 4

function checkUnlock() {
    if (rebirths >= 4) {
        document.getElementById("turtle").visibility = "visible";
    } else {
        document.getElementById("turtle").visibility = "hidden";
    }

    if (Magiclv >= 10) {
        document.getElementById("lizard").visibility = "visible";
    } else {
        document.getElementById("lizard").visibility = "hidden";
    }

    if (wolf >= 1) {
    document.getElementById("wolf").visibility = "visible";
    } else {
        document.getElementById("wolf").visibility = "hidden";
    }

  function Turtlepassive(){
      if (rebirths >= 3){


      }
  }

我的 HTML 代码的其余部分：

   <div class="main_container">
        <p>This is the Pets
            <br />
            <br />
            <div id="turtle" class="control">
                <label class="radio">
                    <input type="radio" name="turtle">
                </label><img src="turtle.jpg" alt="Smiley face" height="42" 
width="42"></div>
            <br />
            <br />
            <div id="lizard" class="control">
                <label class="radio">
                    <input type="radio" name="lizard">
                </label><img src="lizard.png" alt="Smiley face" height="42" 
width="42"></div>
            <br />
            <div id="wolf" class="control">
                <label class="radio">
                    <input type="radio" name="wolf">
                </label><img src="wolf.png" alt="Smiley face" height="60" 
width="60"></div>
            <br />

            <script type="text/javascript" src="Pets.js"></script>

        </p>
    </div>

我希望宠物被隐藏起来，直到满足它们的条件。HTML 新手，对可见性如何工作感到困惑。但实际的输出是它们都被揭示并且不受条件限制。

标签： javascripthtml

解决方案

你快搞定了，但你需要打电话document.getElementById('turtle').style.visibility = 'hidden';

一件事：你不需要document.getElementById每次都调用，你可以将宠物定义为变量：

const turtle = document.getElementById('turtle');
const lizard = document.getElementById('lizard');
...

if (rebirths >= 4) {
  turtle.style.visibility = 'visible'
} else {
  turtle.style.visibility = 'hidden'
}

...并且您可以使用三元组进一步缩短它：

turtle.style.visibility = rebirths >= 4 ? 'visible' : 'hidden';

推荐阅读