javascript 函数 if else.皮科费米百吉饼游戏

Question

我得到的不是“你赢了”，而是“Pico Pico Pico？？”为什么响应返回 pico pico pico 而不是 You win.. 因为最后一个语句是 you win......这就是游戏规则......计算机生成一个三位数，其中每个数字必须是唯一的。您可以无限轮次来猜测数字。计算机可以针对每个猜测给出以下提示:

           Pico: One digit is correct but in the wrong place
            Fermi: One digit is correct and in the right place
            Bagels: No digits are correct

// global V
var compChoice1, compChoice2, compChoice3;
var number1, number2, number3;
var response;
//functions to create random numbers
function getRandomNum() {
    return Math.floor(Math.random() * 10)
}

function startGame(){
    do{
        compChoice1 = getRandomNum();
        compChoice2 = getRandomNum();
        compChoice3 = getRandomNum();
    }
    while (compChoice1 == compChoice2 || compChoice1 == compChoice3 || compChoice2 == compChoice3);
}


//here we'll get the usr Numnber
function userNum(){
  number1 = document.getElementById('guessNum1').value;
  number2 = document.getElementById('guessNum2').value;
  number3 = document.getElementById('guessNum3').value;
    console.log(number1,number2,number3);
}

    // Compare Usr numbers vs computer ramdom nums
    function compareUsrvsCom(){

        var response = "";


        if (number1 == compChoice1) response += "pico  ";
        else if (number1 == compChoice2 || number1 == compChoice3) response += "fermi  ";


        if (number2 == compChoice2) response += "pico  ";
        else if (number2 == compChoice1 || number2 == compChoice3) response += "fermi  ";


        if (number3 == compChoice3) response += "pico  ";
        else if (number3 == compChoice1 || number3 == compChoice2) response += "fermi  ";


        if (number1 === compChoice1 && number2 === compChoice2 && number3 === compChoice3) response += "You win";
        else if (response == "" ) return ("beagls   ")


        return response;
        // return response;
    }
       //Start game Btn
document.getElementById('startGame').addEventListener('click', function() {
       startGame();
       console.log(compChoice1,compChoice2, compChoice3);
   });

   document.getElementById("guessButn").addEventListener("click", function() {
     userNum();
     compareUsrvsCom();
     console.log(compareUsrvsCom());
       document.getElementById("demoBagel").innerHTML = compareUsrvsCom();
     });

Answer 1

== 与 ===

不同

问题是您尝试比较两种类型。与

number1 = document.getElementById('guessNum1').value;

您正在获取一个字符串，您可以通过以下方式查看它

console.log(typeof number1);

使用compChoice1，您将获得一个数字。你可以看到

console.log(typeof Math.floor(Math.random() * 10));

您正在混合使用两个比较运算符 == 和 ===。 == 运算符不太严格。

5 == "5" 为 true，但 5 === "5" 为 false。

这就是为什么你的“你赢了”if 语句失败了。您几乎应该始终使用 === 运算符并确保比较相同的类型。

因此，我们希望将 guessNum1 的值解析为整数，您可以使用 parseInt 来完成此操作.

使用parseInt将用户输入转换为number类型

function userNum(){
   number1 = parseInt(document.getElementById('guessNum1').value);
   number2 = parseInt(document.getElementById('guessNum2').value);
   number3 = parseInt(document.getElementById('guessNum3').value);
   console.log(number1,number2,number3, typeof number1);
}

这将为您提供所有number类型。

优先选择 === 而不是 ==

因此转换compareUsrvsCom中的比较运算符

function compareUsrvsCom(){

   var response = "";

   if (number1 === compChoice1) response += "pico  ";
   else if (number1 === compChoice2 || number1 === compChoice3) response += "fermi  ";

   if (number2 === compChoice2) response += "pico  ";
   else if (number2 === compChoice1 || number2 === compChoice3) response += "fermi  ";

   if (number3 === compChoice3) response += "pico  ";
   else if (number3 === compChoice1 || number3 === compChoice2) response += "fermi  ";

   if (number1 === compChoice1 && number2 === compChoice2 && number3 === compChoice3) response += "You win";
   else if (response == "" ) return ("beagls   ")

   return response;
}