javascript - 石头剪刀布想要在你达到 5 分后让图标无法点击

我有一个石头剪刀布游戏,每当我或电脑打到 5 时,它就会重新加载,但我想要它,所以你不能再玩了,所以现在打到 5 后分数不会上升,如果你打到 5,它会说你输了或者你赢了,5秒后它会重新加载,但你仍然可以在这5秒内点击剪刀,你或电脑的分数会上升我不希望这样

var userScore = 0;
var computerScore = 0;
const userScore_span = document.getElementById("user-score");
const computerScore_span = document.getElementById("computer-score");
const scoreBoard_div = document.querySelector(".score-board");
const result_P = document.querySelector(".result>P ");
const rock_div = document.getElementById("r");
const paper_div = document.getElementById("p");
const scissors_div = document.getElementById("s");
const spock_div = document.getElementById("k");
const lizard_div = document.getElementById("l");


function getComputerChoice() {
  const choices = ['r', 'p', 's', 'k', 'l'];
  const randomNumber = Math.floor(Math.random() * 5);
  return choices[randomNumber];
}

function convertToWord(letter) {
  if (letter === "r") return "Rock";
  if (letter === "p") return "Paper";
  if (letter === "s") return "Scissors";
  if (letter === "k") return "Spock";
  if (letter === "l") return "Lizard";
}


function win(userChoice, computerChoice) {
  userScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  const userChoice_div = document.getElementById(userChoice);
  result_P.innerHTML = `${convertToWord(userChoice)}${smallUserWord} beats ${convertToWord(computerChoice)}${smallCompWord} You win! ?`;
  userChoice_div.classList.add('green-glow');
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove('green-glow')
  }, 900);



}

function draw(userChoice, computerChoice) {
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  const userChoice_div = document.getElementById(userChoice);
  result_P.innerHTML = `${convertToWord(userChoice)}${smallUserWord} is the same as ${convertToWord(computerChoice)}${smallCompWord} its a draww!!`;
  userChoice_div.classList.add('gray-glow');
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove('gray-glow')
  }, 900);


}

function lose(userChoice, computerChoice) {
  computerScore++;
  userScore_span.innerHTML = userScore;
  computerScore_span.innerHTML = computerScore;
  const smallUserWord = "user".fontsize(3).sub();
  const smallCompWord = "comp".fontsize(3).sub();
  const userChoice_div = document.getElementById(userChoice);
  result_P.innerHTML = `${convertToWord(userChoice)}${smallUserWord} loses to ${convertToWord(computerChoice)}${smallCompWord} You lose!?`;
  userChoice_div.classList.add('red-glow');
  setTimeout(function() {
    document.getElementById(userChoice).classList.remove('red-glow')
  }, 900);


}

function game(userChoice) {
  const computerChoice = getComputerChoice();
  switch (userChoice + computerChoice) {
    case "rs":
    case "rl":
    case "pk":
    case "pr":
    case "sp":
    case "sl":
    case "lp":
    case "lk":
    case "ks":
    case "kr":


      win(userChoice, computerChoice);
      break;

    case "rr":
    case "ll":
    case "kk":
    case "pp":
    case "ss":



      draw(userChoice, computerChoice);
      break;


    case "sr":
    case "kp":
    case "rp":
    case "ps":
    case "ls":
    case "pl":
    case "kl":
    case "sk":
    case "rk":


      lose(userChoice, computerChoice);
      break;
  }

  if (userScore === 5) {
    result_P.innerHTML = `You won the game!?`;
    window.setTimeout(function() {
      location.reload()
    }, 5000);
  } else if (computerScore === 5) {
    result_P.innerHTML = `You lost the game!?`;
    lockbuttons();
    window.setTimeout(function() {
      location.reload()
    }, 5000);
  }

}

function main() {
  rock_div.addEventListener('click', function() {
    game("r");
  })
  paper_div.addEventListener('click', function() {
    game("p");
  })
  scissors_div.addEventListener('click', function() {
    game("s");
  })
  spock_div.addEventListener('click', function() {
    game("k");
  })
  lizard_div.addEventListener('click', function() {
    game("l");
  })

}
main();
@import url('https://fonts.googleapis.com/css2?family=Asap&display=swap');
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #24272e;
}

header {
  background: white;
  padding: 20px;
}

header>h1 {
  color: #24272E;
  text-align: center;
  font-family: Asap, sans-serif;
}

.score-board {
  margin: 20px auto;
  border: 3px solid white;
  width: 200px;
  border-radius: 4px;
  color: white;
  font-size: 46px;
  padding: 15px 20px;
  font-family: Asap, sans-serif;
  position: relative;
  text-align: center;
}

.badge {
  background: #E2584D;
  color: white;
  font-size: 14px;
  font-family: Asap, sans-serif;
}

#user-label {
  position: absolute;
  top: 30px;
  left: -25px;
}

#computer-label {
  position: absolute;
  top: 30px;
  right: -30px;
}

.result {
  font-size: 40px;
  color: white;
}

.result>p {
  text-align: center;
  font-weight: bold;
  font-family: Asap, sans-serif;
}

.choices {
  margin: 50px 0;
  text-align: center;
}

.choice {
  border: 4px solid white;
  border-radius: 50%;
  margin: 0 15px;
  padding: 20px;
  display: inline-block;
  transition: all 0.5s ease;
}

.choice:hover {
  cursor: pointer;
  background: #030303;
}

#action-message {
  text-align: center;
  color: white;
  font-family: Asap, sans-serif;
  font-weight: bold;
  font-size: 20px;
}

.green-glow {
  border: 4px solid #4dcc7d;
  box-shadow: 0 0 10px #31b43a;
}

.red-glow {
  border: 4px solid #a82418;
  box-shadow: 0 0 10px #fa0000;
}

.gray-glow {
  border: 4px solid #9f9f9f;
  box-shadow: 0 0 10px #706f6f;
}
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/html">

<head>
  <meta charset="UTF-8">
  <link href="paper.css" rel="stylesheet">
  <title>rock paper scissors</title>
</head>

<body>
  <header>
    <h1>Rock Paper Scissors Spock Lizard</h1>
  </header>
  <div class="score-board">
    <div id="user-label" class="badge">user</div>
    <div id="computer-label" class="badge">comp</div>
    <span id="user-score">0</span>:<span id="computer-score">0</span>
  </div>

  <div class="result">
    <p>welcome to rock paper spock lizard </p>
  </div>

  <div class="choices">
    <div class="choice" id="r">
      <img src="rockk%20.png" alt="rck">
    </div>
    <div class="choice" id="p">
      <img src="paper.png" alt="ppr">
    </div>
    <div class="choice" id="s">
      <img src="scissors.png" alt="scis">
    </div>
    <div class="choice" id="k">
      <img src="spock.png" alt="spk">
    </div>
    <div class="choice" id="l">
      <img src="lizard.png" alt="lzr">
    </div>
  </div>
  <p id="action-message">page will reset after either user or computer has reached a score of 5</p>
  <script src="rockpapersisscors.js"></script>
</body>

</html>

回答1

您可以添加一个检查每一步得分的功能,以便在游戏结束时重置游戏。只需将它放在 game 函数的开头,以便在必要时重新初始化游戏

function resetIfOver(){
    if(userScore >= 5 || computerScore >= 5){
        userScore = 0;
        computerScore = 0;
    }
}

有更复杂的方法来处理这个问题,但这将涉及重构整个游戏。

相似文章

c++ - 石头剪刀布怎么按顺序输出

创建一个名为Computer的基类,并创建两个从该基类继承的子类。一个子类需要以固定的顺序输出石头、纸、剪刀:纸、剪刀、石头。而另一台子类计算机随机输出石头、纸、剪刀。我已经知道如何让电脑随机输出石头...

python - Python: grammar 在循环中正确

“我正在做以下练习:体操运动员可以从每位裁判那里获得1到10分。打印出一系列句子,“裁判可以给体操运动员_分”。如果您的第一句话是“裁判可以给体操运动员1分”,请不要担心。但是,如果您可以使用for循...

java - Java 时区

我正在使用JavaFX表单和控制器。它也连接到MySQL数据库。我在屏幕上输入数据,其中一个字段是指定date的“开始”和“结束”时间。在数据库中,有一个开始时间戳和结束时间戳。问题是,此应用程序设置...