javascript - 4 位数猜数游戏，语法或逻辑问题？

Question

我是 JavaScript 的新手，我尝试创建一个游戏，您可以在其中猜测随机生成的 4 个数字的组合。您需要输入 4 位数字，并且会根据您的输入显示一些符号:

• × - 如果您猜对了组合中的数字，但不是正确的索引。
• ¤ - 如果您猜到了组合中的数字及其索引。

但是这些符号并没有像我想象的那样显示。 (例如，随机生成的数字是:"3,3,0,3"。当您输入"3,3,0,3"时，输出应该是 ¤¤¤¤，但由于某些原因它是 ¤×¤×)。

代码中，x1、x2、x3、x4为随机生成数所在的变量位于。 xy1、xy2、xy3 和 xy4 是您的输入所在的变量。稍后会比较这些。

现在，语法或逻辑是否存在缺陷？

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

var x1 = (getRandomInt(6));
var x2 = (getRandomInt(6));
var x3 = (getRandomInt(6));
var x4 = (getRandomInt(6));

/// The generated nuber a player needs to guess will show up in console.For testing purposes.
console.log("The generated digits:" + x1 + "," + x2 + "," + x3 + "," + x4);

document.body.innerHTML = ("This program generates 4 random digits (from 0 to 5). The point of this game is to guess what are those 4 digits.");
document.body.innerHTML += ("Symbols:<br> This symbol will show if you guessed a number, but not its index: × <br> This symbol will show if you guessed a number and its index: ¤. <br>If you didn't guess a number right, no symbol will show up.<br>You can press the button 'guess a number' to try again.<br>");

function try1() {
  let xy1 = prompt("Enter first number:");
  if (xy1 == x1) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy1 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  let xy2 = prompt("Enter second number:");
  if (xy2 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x2) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy2 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  let xy3 = prompt("Enter third number:");
  if (xy3 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x3) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy3 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  let xy4 = prompt("Enter fourth number:");
  if (xy4 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x4) {
    document.body.innerHTML += (" ¤ ");
  } else {
    document.body.innerHTML += (" ");
  }

  document.body.innerHTML += ("<br>Your guess:" + xy1 + "," + xy2 + "," + xy3 + "," + xy4 + "<br>");
}

function show() {
  document.body.innerHTML += ("<br>Number generated:" + x1 + "," + x2 + "," + x3 + "," + x4);
}

try1();

Answer 1

对我来说这似乎是一个逻辑错误，但只有当输入中有重复数字时才会出现这种错误(例如 3303，因为 3 的三倍)。所以这部分代码:

let xy2 = prompt("Enter second number:");
if (xy2 == x1) {
    document.body.innerHTML += (" × ");
} else if (xy2 == x2) {
    document.body.innerHTML += (" ¤ ");
} else if (xy2 == x3) {
    document.body.innerHTML += (" × ");
} else if (xy2 == x4) {
    document.body.innerHTML += (" × ");
} else {
    document.body.innerHTML += (" ");
}

导致了这个问题。这是因为它不会在第一个触发后继续检查其余条件。 EG，当数字和答案都是3303时，我们进入第一个分支，因为3(我们第二个输入的数字)等于3(我们第一个生成的数字)，这意味着我们写了一个×.

解决方案是要意识到，如果可能的话，我们应该始终尝试编写一个 ¤，这意味着它必须是我们检查的第一个条件。因此，如果您重新排序您的 if 语句，使 ¤ 始终是第一个分支，这应该可以修复它。看到这个片段:

function getRandomInt(max) {
  return Math.floor(Math.random() * Math.floor(max));
}

// For testing, setting manually to 3303
var x1 = 3 // (getRandomInt(6));
var x2 = 3 // (getRandomInt(6));
var x3 = 0 // (getRandomInt(6));
var x4 = 3 // (getRandomInt(6));

/// The generated nuber a player needs to guess will show up in console.For testing purposes.
console.log("The generated digits:" + x1 + "," + x2 + "," + x3 + "," + x4);

document.body.innerHTML = ("This program generates 4 random digits (from 0 to 5). The point of this game is to guess what are those 4 digits.");
document.body.innerHTML += ("Symbols:<br> This symbol will show if you guessed a number, but not its index: × <br> This symbol will show if you guessed a number and its index: ¤. <br>If you didn't guess a number right, no symbol will show up.<br>You can press the button 'guess a number' to try again.<br>");

function try1() {
  // Already in the correct order
  let xy1 = prompt("Enter first number:");
  if (xy1 == x1) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy1 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy1 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  // Note that the xy2 == x2 is moved to the first condition
  let xy2 = prompt("Enter second number:");
  if (xy2 == x2) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy2 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x3) {
    document.body.innerHTML += (" × ");
  } else if (xy2 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  // Again note the reorder:
  let xy3 = prompt("Enter third number:");
  if (xy3 == x3) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy3 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy3 == x4) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  // And once more:
  let xy4 = prompt("Enter fourth number:");
  if (xy4 == x4) {
    document.body.innerHTML += (" ¤ ");
  } else if (xy4 == x1) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x2) {
    document.body.innerHTML += (" × ");
  } else if (xy4 == x3) {
    document.body.innerHTML += (" × ");
  } else {
    document.body.innerHTML += (" ");
  }

  document.body.innerHTML += ("<br>Your guess:" + xy1 + "," + xy2 + "," + xy3 + "," + xy4 + "<br>");
}

function show() {
  document.body.innerHTML += ("<br>Number generated:" + x1 + "," + x2 + "," + x3 + "," + x4);
}

try1();