JavaScript猜数字游戏：游戏结束逻辑异常问题求助

我用HTML和JavaScript开发了一款简单的猜数字游戏：用户有10次机会猜测0到50之间的随机数，输入后点击「Sprawdź（检查）」会收到“过高”“过低”或“正确”的反馈。但目前游戏结束逻辑存在问题：

• 猜对数字时无法正确识别胜利状态
• 「Koniec gry（游戏结束）」消息显示异常
• 猜对后本该设置剩余次数为0、清空输入框并显示「Wygrałeś（你赢了）」后终止函数，但实际系统不识别正确猜测，还会提前显示“游戏结束”

完整原始代码 #

JavaScript

var liczba = Math.floor(Math.random() * 50);

function check() {
  let prob = document.getElementById('prob');
  if (prob.value == 0) return;
  let strzal = document.getElementById('liczba');
  let txt = document.getElementById('res');
  if (!strzal.value) txt.innerText = "Wprowadź liczbę!";
  else if (strzal.value == liczba) {
    prob.value = 0;
    strzal.value = '';
    txt.innerText = "Wygrałeś";
    return;
  } else if (strzal.value > liczba) txt.innerText = "Za dużo";
  else if (strzal.value < liczba) txt.innerText = "Za mało";
  prob.value -= 1;
  if (prob.value == 0) txt.innerText = "Koniec gry";
}

function giveUp() {
  document.getElementById('res').innerText = liczba;
  document.getElementById('prob').value = 0;
}

CSS

* {
  margin: 0px auto;
  padding: 0;
  font-family: Helvetica, sans-serif;
}

body {
  background-color: #000066;
}

#main {
  margin-top: 50px;
  width: 500px;
  box-shadow: 5px 5px 7px black;
  border-radius: 10px;
  border: 1px solid #9999ff;
}

#header {
  background-color: #9999ff;
  color: white;
  text-align: center;
  height: 45px;
  line-height: 45px;
  border-radius: 9px 9px 0 0;
  font-size: large;
}

#game {
  background-color: #f0f0f5;
  display: flex;
  flex-direction: column;
  row-gap: 15px;
  padding: 15px;
  border-radius: 0 0 9px 9px;
}

#game>p {
  font-weight: bold;
}

input {
  height: 30px;
  width: 250px;
  text-align: center;
}

button {
  background-color: #0000b3;
  width: 180px;
  height: 30px;
  line-height: 30px;
  color: white;
  text-align: center;
}

#div_res {
  border: 1px solid #40406b;
  height: 150px;
  width: 300px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #800000;
  font-weight: bold;
}

HTML

<!DOCTYPE html>

<body>
  <div id="main">
    <p id="header">Zgadnij liczbę z zakresu od 0-50</p>
    <div id="game">
      <p>Ilość prób</p>
      <input type="number" name="prob" id="prob" value=10>
      <p>Podaj liczbę</p>
      <input type="number" name="liczba" id="liczba">
      <button onclick="check()">Sprawdź</button>
      <button onclick="giveUp()">Poddaję się</button>
      <div id="div_res">
        <p id="res"></p>
      </div>
    </div>
  </div>
</body>

问题定位 #

核心问题是类型不匹配：

• 随机生成的liczba是数字类型，但通过strzal.value获取的用户输入是字符串类型，直接用==比较时，隐式转换会导致部分场景判断错误，正确猜测无法被识别
• 剩余次数prob.value同样是字符串类型，prob.value -= 1虽能隐式转换，但后续判断prob.value == 0也会出现异常

修复方案 #

修改后的JavaScript代码（重点处理类型转换和严格比较）：

var liczba = Math.floor(Math.random() * 50);

function check() {
  let prob = document.getElementById('prob');
  // 将剩余次数转换为数字类型
  let remainingAttempts = Number(prob.value);
  if (remainingAttempts === 0) return;
  
  let strzal = document.getElementById('liczba');
  let txt = document.getElementById('res');
  // 将用户输入转换为数字类型
  let userGuess = Number(strzal.value);
  
  // 判断输入是否为有效数字
  if (isNaN(userGuess)) {
    txt.innerText = "Wprowadź liczbę!";
    return;
  }
  
  // 严格比较用户猜测与目标数字
  if (userGuess === liczba) {
    prob.value = 0;
    strzal.value = '';
    txt.innerText = "Wygrałeś";
    return;
  } else if (userGuess > liczba) {
    txt.innerText = "Za dużo";
  } else if (userGuess < liczba) {
    txt.innerText = "Za mało";
  }
  
  // 更新剩余次数并同步到输入框
  remainingAttempts -= 1;
  prob.value = remainingAttempts;
  if (remainingAttempts === 0) {
    txt.innerText = "Koniec gry";
  }
}

function giveUp() {
  document.getElementById('res').innerText = liczba;
  document.getElementById('prob').value = 0;
}

修改说明 #

• 统一将输入值转换为数字类型，使用===严格比较，彻底避免隐式转换带来的错误
• 用isNaN()判断用户输入是否为有效数字，比空值判断更严谨
• 单独存储剩余次数为数字变量，避免重复转换和字符串操作的异常

内容的提问来源于stack exchange，提问作者Jan Nepomucen