Question

我正在创建一个简单的游戏，其中有两个门，一个包含奖品，另一个不包含（随机生成）。用户可以点击其中任何一个，并在获胜/失败时收到通知。当我运行以下代码时，结果总是“Boo you lose”。我怀疑它与之有关：

if ("door1Selection" === "randomDoor"){

$(document).ready(function() {

  let doors = ["door1", "door2"]

  function selectDoor() {
    const randomDoor = doors[Math.round(Math.random())]
    return randomDoor
  }

  const $door1 = $('.door1')
  const $door2 = $('.door2')

  $door1.click(function() {
    const door1Selection = $door1.attr('class');
    if ("door1Selection" === "randomDoor") {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })

  $door2.click(function() {
    var door2Selection = $door2.attr('class');
    if ("door2Selection" === "randomDoor") {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="door1">button 1</button>
<button class="door2">button 2</button>

Answer 1

您的变量不应该用引号括起来。这使它成为一个字符串，所以你要比较永远不会是真的字符串door2Selection === randomDoor。

你想：

if (door1Selection === randomDoor)

和

if (door2Selection === randomDoor)

您还需要将randomDoor的声明拉出函数。将其与doors声明一起使用（并将其设为let）：

let doors = [ /* stuff */ ];
let randomDoor;

function selectDoor() {
  randomDoor = doors[Math.round(Math.random())]
  return randomDoor;
}

Answer 2

比较变量时，不应将变量放在引号中。当您将它们放在引号中时，您将比较变量名称本身而不是变量值。

if ("door1Selection" === "randomDoor"){

应该是

if (door1Selection === randomDoor) {

但是，有几个方面可以改进：

变量randomDoor在selectDoor方法中作为const创建，但是当函数返回其值时它会超出范围，因此以后不能用于比较。因此，您应该在函数外部设置randomDoor变量，或者只是去掉它并在if语句中调用selectDoor。
即使在所有带有一类门的按钮上，您也可以轻松地将点击事件方法合并到一次点击。

进行以下更改会产生以下结果：

$(document).ready(function() {
    let doors = ["door1", "door2"]

    function selectDoor() {
        return doors[Math.round(Math.random())]
    }

    $('.door').click(function() {
        if ($(this).hasClass(selectDoor())) {
            alert("Yay you win")
        } else {
            alert("Boo you lose")
        }
    });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="door door1">Door 1</button>
<button class="door door2">Door 2</button>

Answer 3

您要比较文字字符串而不是变量。
您需要调用函数selectDoor()来获取随机索引。变量randomDoor范围关闭以选择门锁。

$(document).ready(function() {

  let doors = ["door1", "door2"]

  function selectDoor() {
    const randomDoor = doors[Math.round(Math.random())]
    return randomDoor
  }

  const $door1 = $('.door1')
  const $door2 = $('.door2')

  $door1.click(function() {
    const door1Selection = $door1.attr('class');
    if (door1Selection === selectDoor()) {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })

  $door2.click(function() {
    var door2Selection = $door2.attr('class');
    if (door2Selection === selectDoor()) {
      alert("Yay you win")
    } else {
      alert("Boo you lose")
    }
  })
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="door1">button 1</button>
<button class="door2">button 2</button>

Javascript - 帮助调试简单的游戏？

3 个答案: