点击器游戏开发：如何在达到指定分数后显示图片按钮？

你的代码存在三个关键问题导致第二个按钮无法显示，以下是问题说明和修正方案：

问题分析 #

1. 分数判断逻辑未触发
   原代码中判断分数是否达标if (score_count >= 10)的代码写在全局作用域，页面加载时就会执行一次，此时score_count初始值为0，不会触发显示按钮的操作。这段判断必须放到addToScore函数内部，每次用户点击加分后立即检查分数。

2. DOM元素获取错误
   document.getElementsByClassName()返回的是HTMLCollection类数组对象，不是单个DOM元素。直接调用pic2.style会报错，需要通过索引（比如pic2[0]）获取集合中的实际元素。

3. 冗余/错误的变量定义
   代码中定义了pic1 = document.getElementsByClassName('btn1')，但HTML里第一个按钮的类是btn btns，并没有btn1类，这个变量完全没用，可以直接删除。

修正后的完整代码 #

JavaScript #

var score_count = 0;
var pic2 = document.getElementsByClassName('btn2');

function addToScore(amount) {
  score_count += amount;
  document.getElementById('score_count').textContent = score_count;
  
  // 每次加分后检查分数，达标则显示第二个按钮
  if (score_count >= 10) {
    pic2[0].style.visibility = 'visible';
  }
}

CSS #

.score {
  font-size: 40px;
}

.btns:active {
  transform: scale(0.98);
  box-shadow: 3px 2px 22px 1px rgba(0, 0, 0, 0.24);
}

.btn2 {
  visibility: hidden;
}

HTML #

<p class="score">Score: <span id="score_count">0</span></p>

<input id="pic1" class="btn btns" type="Image" name="Image1" src="imgs/pic1.jpg" height="256px" width="256px" onclick="addToScore(1)">

<input id="pic2" class="btn2 btns" type="Image" name="Image2" src="imgs/pic2.jpg" height="256px" width="256px" onclick="addToScore(5)">

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

补充说明：用textContent代替innerHTML更新分数更安全，能避免潜在的XSS风险，这里已做替换。

内容的提问来源于stack exchange，提问作者Gal4xy IT