javascript - 在游戏中制作任务系统。有没有办法隐藏下一个任务

Question

我正在我的点击游戏中开发任务系统。我不希望每个任务都在页面上显示出来:

我希望用户会说“哦，太酷了，这是隐藏的，只有在完成一定数量的任务后才会显示”。然后我想要一些奖励，比如一把特殊的剑什么的。我主要想知道如何在 HTML 中隐藏屏幕上的内容，直到满足条件为止。

尚未尝试任何新的 HTML/JavaScript

这是我的 HTML 代码:(这部分还没有任何 JavaScript，但如果我能得到一些关于如何隐藏内容的示例，我会很感激)

 Quests
 <br/>
 Click 1000 times <span id="Numberofclicks">0</span>
 <span id="Maxnumberofclicks">1000</span>
 <br/>
 Use skills 50 times <span id="Spelluses">0</span>
 <span id="Maxspelluses">50</span>
 <br/>               

我希望任务:“Numberofclicks”和“Spelluses”保持隐藏，直到这些任务完成或完成一定数量的任务。我的实际输出还没有，因为我不知道如何做到这一点。

Answer 1

好吧，这非常简单。

但是我们可以点击任务并显示奖励。

请注意 CSS 默认情况下如何隐藏 .reward 项目。

const questClicks = {};

const questClick = ({dataset: {count: c, reward : r}}) => {
  questClicks[r] += 1;
  if(questClicks[r] >= c) document.querySelector(`#${r}`).style.display = 'block';
};

document.addEventListener('click', ({target}) => {
  if(target.matches('.quest')) {
    questClick(target);
  }
});

// Init all quests
document.addEventListener('DOMContentLoaded', () => {
  document.querySelectorAll('.quest').forEach(({dataset: { reward: r }}) => questClicks[r] = 0);
});

.clicker {
  border: 1px solid red;
  border-radius: 7px;
  margin: 10px;
  padding: 10px;
}

.reward {
  display: none;
  font-weight: bold;
}

<div id='sword-quest' class='quest' data-count='5' data-reward='sword'>Click Me Lots !!</div>
<div class='reward' id='sword'>Here is a sword</div>

<div id='shield-quest' class='quest' data-count='3' data-reward='shield'>Click Me Lots !!</div>
<div class='reward' id='shield'>Here is a sword</div>