如果语句在 javascript 中的石头剪刀布游戏中不起作用

Question

所以我正在使用 html、css 和 javascript 制作一个石头、纸、剪刀游戏，但它不能正常工作，因为它只说下拉列表，当我选择相同的选项时，它不会说任何东西当我选择不同的选项时，它应该说谁赢了。 这是我的 html 代码：

 $("#game").submit(function(e) { e.preventDefault(); }); function play(cars1, cars2) { let result = document.querySelector('.result'); let player1 = document.getElementById('cars1'); let PLAYER1 = player1.value; let player2 = document.getElementById('cars2'); let PLAYER2 = player2.value; let playeronename = document.getElementById('playeronename') let name1 = playeronename.value; let playertwoname = document.getElementById('playertwoname') let name2 = playertwoname.value; if (PLAYER1 === PLAYER2) { result.textContent = "Draw" } if (PLAYER1 === "Paper") { if (PLAYER2 === "Rock") { result.textContent = `${name1} wins`; } else { if (PLAYER2 === "Scissors") { result.textContent = `${name2} wins`; } } if (PLAYER1 === "Scissors") { if (PLAYER2 === "Rock") { result.textContent = `${name2} wins`; } else { if (PLAYER2 === "Paper") { result.textContent = `${name1} wins`; } } } } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="game"> <table> <tr> <td style="padding:10px"><label style="color:#FF0000">Player one name:</label></td> <td style="padding:10px"><input type="text" name="playeronename" id="playeronename" placeholder="Player one name" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> </td> </tr> <tr> <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or scissors:</label></td> <td style="padding:10px"> <select name="cars1" id="cars1" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> <option value="Rock">Rock</option> <option value="Paper">Paper</option> <option value="Scissors">Scissors</option> </select> </td> </tr> <tr> <td style="padding:10px"><label style="color:#FF0000">Player two name:</label></td> <td style="padding:10px"><input type="text" name="playertwoname" id="playertwoname" placeholder="Player two name" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> </td> <tr> <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or scissors:</label></td> <td style="padding:10px"> <select name="cars2" id="cars2" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> <option value="Rock">Rock</option> <option value="Paper">Paper</option> <option value="Scissors">Scissors</option> </select> </td> </tr> <tr> <td style="padding:10px"><button style="background-color:#D4D4D4; color:#FCFF00; padding:10px 15px 10px 15px;width:70px;border-color:#ff0000;border-width:2px" type="button" onclick="play(cars1,cars2)">Play</button></td> </tr> </table> </form> <div style="color:#FF0000;padding:10px" class="result"></div>

那么我的代码有什么问题？ 我做错了什么？

Answer 1

实际上，您的代码缩进很糟糕。 请参阅下面的答案。

 $("#game").submit(function (e) { e.preventDefault(); }); function play(cars1, cars2) { let result = document.querySelector('.result'); let player1 = document.getElementById('cars1'); let PLAYER1 = player1.value; let player2 = document.getElementById('cars2'); let PLAYER2 = player2.value; let playeronename = document.getElementById('playeronename') let name1 = playeronename.value; let playertwoname = document.getElementById('playertwoname') let name2 = playertwoname.value; if (PLAYER1 === PLAYER2) { result.textContent = "Draw" }else if (PLAYER1 === "Paper") { if (PLAYER2 === "Rock") { result.textContent = `${name1} wins`; }else if(PLAYER2 === "Scissors") { result.textContent = `${name2} wins`; }else result.textContent ="Draw"; }else if(PLAYER1 === "Rock") { if (PLAYER2 === "Scissors") { result.textContent = `${name1} wins`; }else if(PLAYER2 === "Paper") { result.textContent = `${name2} wins`; }else result.textContent ="Draw"; }else{ if (PLAYER2 === "Paper") { result.textContent = `${name1} wins`; }else if(PLAYER2 === "Rock") { result.textContent = `${name2} wins`; }else result.textContent ="Draw"; } }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <form name="game"> <table> <tr> <td style="padding:10px"><label style="color:#FF0000">Player one name:</label></td> <td style="padding:10px"><input type="text" name="playeronename" id="playeronename" placeholder="Player one name" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> </td> </tr> <tr> <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or scissors:</label></td> <td style="padding:10px"> <select name="cars1" id="cars1" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> <option value="Rock">Rock</option> <option value="Paper">Paper</option> <option value="Scissors">Scissors</option> </select></td> </tr> <tr> <td style="padding:10px"><label style="color:#FF0000">Player two name:</label></td> <td style="padding:10px"><input type="text" name="playertwoname" id="playertwoname" placeholder="Player two name" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> </td> <tr> <td style="padding:10px"><label style="color:#FF0000" for="cars">Choose rock,paper or scissors:</label></td> <td style="padding:10px"> <select name="cars2" id="cars2" style="width:150px;box-sizing: border-box;background-color:#D4D4D4; color:#FCFF00;border-color:#ff0000;border-width:2px;padding:10px 15px 10px 15px; "> <option value="Rock">Rock</option> <option value="Paper">Paper</option> <option value="Scissors">Scissors</option> </select></td> </tr> <tr> <td style="padding:10px"><button style="background-color:#D4D4D4; color:#FCFF00; padding:10px 15px 10px 15px;width:70px;border-color:#ff0000;border-width:2px" type="button" onclick="play(cars1,cars2)">Play</button></td> </tr> </table> </form> <div style="color:#FF0000;padding:10px" class="result"></div>

Answer 2

您应该使用代码格式化程序来减少错误。

这是您的格式化代码。

$("#game").submit(function (e) {
  e.preventDefault();
});

function play(cars1, cars2) {
  let result = document.querySelector(".result");
  let player1 = document.getElementById("cars1");
  let PLAYER1 = player1.value;
  let player2 = document.getElementById("cars2");
  let PLAYER2 = player2.value;
  let playeronename = document.getElementById("playeronename");
  let name1 = playeronename.value;
  let playertwoname = document.getElementById("playertwoname");
  let name2 = playertwoname.value;

  // If both are same it is draw
  if (PLAYER1 === PLAYER2) {
    result.textContent = "Draw";
  }

  if (PLAYER1 === "Paper") {
    // If PLAYER 1 === PAPER AND PLAYER 2 === ROCK
    if (PLAYER2 === "Rock") {
      result.textContent = `${name1} wins`;
    } else {
      // If PLAYER 1 === PAPER AND PLAYER 2 === Scissors
      if (PLAYER2 === "Scissors") {
        result.textContent = `${name2} wins`;
      }
    }

    // This if statement is unreachable
    // Because as you see this if statement is covered by PLAYER === PAPER statement
    // So we should move it out of this if statement
    if (PLAYER1 === "Scissors") {
      if (PLAYER2 === "Rock") {
        result.textContent = `${name2} wins`;
      } else {
        if (PLAYER2 === "Paper") {
          result.textContent = `${name1} wins`;
        }
      }
    }
  }
}

我用你的方式实现了。 有很多方法可以更好地做到这一点。 但是为了减轻你的错误，我按照你的方式实施。

$("#game").submit(function (e) {
  e.preventDefault();
});

function play(cars1, cars2) {
  let result = document.querySelector(".result");
  let player1 = document.getElementById("cars1");
  let PLAYER1 = player1.value;
  let player2 = document.getElementById("cars2");
  let PLAYER2 = player2.value;
  let playeronename = document.getElementById("playeronename");
  let name1 = playeronename.value;
  let playertwoname = document.getElementById("playertwoname");
  let name2 = playertwoname.value;

  // If both are same it is draw
  if (PLAYER1 === PLAYER2) {
    result.textContent = "Draw";
  }

  // If PLAYER1 === PAPER
  // PLAYER2 can be Rock or Scissors
  if (PLAYER1 === "Paper") {
    // IF PLAYER2 === ROCK
    // PLAYER1 wins
    if (PLAYER2 === "Rock") {
      result.textContent = `${name1} wins`;

      // IF PLAYER2 === Scissors
      // PLAYER2 wins
    } else {
      result.textContent = `${name2} wins`;
    }

    // If PLAYER1 === Scissors
    // PLAYER2 can be Rock or Paper
  } else if (PLAYER1 === "Scissors") {
      
    // IF PLAYER2 === ROCK
    // PLAYER2 wins
    if (PLAYER2 === "Rock") {
      result.textContent = `${name2} wins`;

      // IF PLAYER2 === PAPER
      // PLAYER1 wins
    } else {
      result.textContent = `${name1} wins`;
    }

    // If PLAYER1 === Rock
    // PLAYER2 can be Scissors or Paper
  } else {

    // IF PLAYER2 === Scissors
    // PLAYER1 wins
    if (PLAYER2 === "Scissors") {
      result.textContent = `${name1} wins`;

      // IF PLAYER2 === Paper
      // PLAYER2 wins
    } else {
      result.textContent = `${name2} wins`;
    }
  }
}

Answer 3

当 player1 选择 Paper 时，您确实只是在评估任何东西。 然而，在无休止的级联 if-else-statements 中评估结果，您应该考虑使用另一种方法，可能像这样：

const winnerMap = {
    'Scissors': 'Paper',
    'Paper': 'Rock',
    'Rock':'Scissors'
}

$("#game").submit(function (e) {
    e.preventDefault();
});


function play(cars1, cars2) {
//...query stuff
if (PLAYER1 === PLAYER2) {
   result.textContent = "Draw"
} else if(winnerMap[PLAYER1] == PLAYER2) {
    result.textContent = `${PLAYER1} wins`;
} else {
    result.textContent = `${PLAYER2} wins`;
}

}

Answer 4

我建议一个更简单的方法

 const m = ['rock', 'scissors', 'paper']; function turn(movep1, movep2) { let result; if (movep1 === movep2) { result = 'Draw'; } else { result = ({ [m[0]]: m[1], [m[1]]: m[2], [m[2]]: m[0] }[movep1] === movep2)? 'Player 1 wins': 'Player 2 wins'; } return result; } /* let's simulate a game of 7 m[0] = rock, m[1] = scissors, m[2] = paper */ /* moves of player 1 */ let mp1 = [m[0], m[1], m[2], m[2], m[0], m[1], m[0]]; /* moves of player 2 */ let mp2 = [m[1], m[2], m[1], m[0], m[0], m[0], m[2]]; let out = ''; for (let i = 0; i < mp1.length; i++) { out += `<h2>P1 [${mp1[i]}] Vs. P2 [${mp2[i]}]</h2>`; out += `<span>${turn(mp1[i], mp2[i])}</span>`; } document.body.innerHTML = out;

 h2 { border-top: 1px #d8d8d8 solid; font: 1.6rem Arial; color: #689; padding-top: 1rem; } span { font: 1rem Arial; color: yellowgreen; }