javascript - 我的 switch 语句每次都会打印默认值 - 这是一个简单的石头、剪刀、布游戏

Question

这是我的代码 - 任何人都可以看到我执行的错误。如果我使用“win();”在函数“main”中，分数更新，与“lose();”相同我是一个初学者，只练习了三个月，所以我看不出我哪里出错了。有人可以指点一下吗。我附上了 HTML、CSS 和 Javascript，这样您就可以看到每个函数应该做什么。

let playerScore = 0;
let computerScore = 0;
let playerScore_span = document.getElementById("user-score");
let computerScore_span = document.getElementById("computer-score");
const scoreplace_div = document.querySelector(".score-place");
const rock_div = document.getElementById("ro");
const paper_div = document.getElementById("pa");
const scissors_div = document.getElementById("sc");

function win(player, computer) {
  playerScore++;
  playerScore_span.innerHTML = playerScore;
  computerScore_span.innerHTML = computerScore;
}

function lose(computer, player) {
  computerScore++;
  computerScore_span.innerHTML = computerScore;
  playerScore_span.innerHTML = playerScore;
}

function draw() {
  console.log("draw");
}
let playerSelection;
let computerSelection;

function compChoice() {
  let computerMove;
  const words = ["ro", "pa", "sc"];
  computerMove = words[Math.floor(Math.random() * 3)];
  return computerMove;
}

function game(playerSelection, computerSelection) {
  let computerMove = compChoice();
  switch (playerSelection + computerSelection) {
    case "paro":
    case "rosc":
    case "scpa":
      win();
      break;
    case "ropa":
    case "pasc":
    case "scro":
      lose();
      break;
    case "roro":
    case "papa":
    case "scsc":
      draw();
      break;
    default:
      console.log("it's fudged mate");
  }
}

function main() {
  rock_div.addEventListener('click', function(playerSelection, computerSelection) {
    game("ro");
  })

  paper_div.addEventListener('click', function(playerSelection, computerSelection) {
    game("pa");
  })

  scissors_div.addEventListener('click', function(playerSelection, computerSelection) {
    game("sc");
  })
}

main();
compChoice();
game(playerSelection, computerSelection);
win(playerScore, computerScore);
lose(computerScore, playerScore);

body {
  align-items: center;
  background: black;
}

.container {
  color: red;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.container-2 {
  color: red;
  display: flex;
  justify-content: center;
}

span {
  color: white;
  display: flex;
  justify-content: center;
}

.game-hands {
  display: flex;
  justify-content: space-around;
}

img {
  width: 200px;
  border: solid;
  border-color: black;
  border-radius: 100px;
}

h1 {
  display: flex;
  justify-content: center;
  color: white;
  border: solid;
  border-color: black;
  border-radius: 70px;
  p {
    border: solid;
    border-color: black;
  }
  .option-hover {
    cursor: pointer;
    background: white;
  }

<title>Rock-Paper-Scissors</title>
<meta charset="UTF-8" />
<link href="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="187a77776c6b6c6a7968582d3628362a" rel="noreferrer noopener nofollow">[email protected]</a>/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<link rel="stylesheet" href="styles.css">

<header>

  <h1>Rock, Paper, Scissors!</h1>
</header>


<div class="score-place">

  <div id="user-label" class="badge">User</div>

  <div id="computer-label" class="badge">Computer</div>
  <span id="user-score">0</span>:<span id="computer-score">0</span>
</div>


<section>
  <div class="container-2">

    <h1>Let's Play!</h1>
  </div>

  <div class="game-hands">
    <div class="option" id="ro">
      <img src="images/rock.jpg" alt="Rock">
    </div>
    <div class="option" id="pa">
      <img src="images/paper.jpg" alt="Paper">
    </div>
    <div class="option" id="sc">
      <img src="images/scissors.jpg" alt="Scissors">
    </div>
  </div>

</section>

<script src="https://cdn.jsdelivr.net/npm/<a href="https://stackoverflow.com/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="c9aba6a6bdbabdbba8b989fce7f9e7fb" rel="noreferrer noopener nofollow">[email protected]</a>/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<script src="javascript.js">
  charset = "utf-8" >
</script>

Answer 1

就你的问题而言

你使用了没有传入方法的参数computerSelection，它会输出默认的字符串，这是正常的，因为没有符合条件的字符串

按照原来的条件，实际条件只会有以下字符串:

1. 圆形定义
2. paun 定义
3. sun 定义

但是我看到你的方法有一个computerMove参数， 结合我的预估逻辑和程序内部逻辑，程序应该调整如下:

将switch (playerSelection + ComputerSelection)替换为switch (playerSelection + ComputerMove)