pScore = 0;
cScore = 0;
tie = 0;
//UI. When play is clicked make R.P.S buttons appear
const startGame= () => {
intro = document.querySelector('.intro');
playBtn = document.querySelector(".playBtn");
match = document.querySelector('.match');
playBtn.addEventListener('click', e => {
match.classList.add("fadeIn");
playBtn.remove();
});
}
//When "rock", "paper", or "scissors" is clicked generate random
//option for computer selection then compare to see who wins
const playGame= () => {
button = document.querySelectorAll('.buttons button');
choices= ["rock", "paper", "scissors"];
choiceDisplay = document.querySelector('.matchContainer');
playerDisplay = document.querySelector('.playerDisplay');
button.forEach(button => {
button.addEventListener('click', function(e) {
//generate random computerSelection
computerSelection = choices[ Math.floor((Math.random() *choices.length))];
//display computer and player selection on UI
playerSelection = this.textContent;
playerDisplay.textContent = " "+ ` Player: ${playerSelection}`;
choiceDisplay.textContent = ` Computer: ${computerSelection } ` + " ";
compareSelection(playerSelection, computerSelection);
});
});
}
const compareSelection = ( playerSelection, computerSelection) => {
//compare player and computer choice
if (playerSelection === computerSelection){ console.log("tie");
tie++;
game();
return;
} else if ( playerSelection === "rock" && computerSelection === "scissors" ||
playerSelection === "scissors" && computerSelection === "paper" ||
playerSelection === "paper" && computerSelection === "rock" ){
console.log (`You win! ${playerSelection} beats ${computerSelection}`);
pScore++;
game();
return;
} else {
console.log(`You lose! ${computerSelection} beats ${playerSelection}`);
cScore++;
game();
return;
}
}
const game = () => {
playerScore = document.querySelector('.playerScore');
computerScore = document.querySelector('.computerScore');
tieScore = document.querySelector('.tieScore');
playerScore.textContent = pScore;
computerScore.textContent = cScore;
tieScore.textContent = tie;
// for( i=0; i<5; i++){
// playGame[i++];
// }
}
startGame();
playGame();body{
background-color: #844141;
}
.intro, .buttons {
text-align: center;
}
div.fadeOut{
opacity: 0;
}
div.fadeIn{
opacity: 3;
}
.match{
opacity: 0%;
transition: .5s ease;
}
.score-list, .score-list2, .winSection{
font-size: 20px;
display: flex;
justify-content: center;
align-items: center;
margin: 20px;
}
.computerTitle, .playerTitle, .tieTitle, .winnerTitle{
margin: 10px;
font-size: 30px;
}
.winnerTitle{
font-size: 50px;
}
.playBtn{
font-size: 70px;
font-family: "Time New Roman", times, serif;
background-color: #4c586b;
border-radius: 5px;
padding: 12px;
transition-duration: 1s;
}
/* .reset{
font-size: 70px;
font-family: "Time New Roman", times, serif;
background-color: #4c586b;
border-radius: 5px;
padding: 12px;
transition-duration: 1s;
opacity: 10;
} */
.matchContainer, .playerDisplay{
display: flex;
align-items: center;
justify-content: center;
margin: 15px
}
.displayHolder{
display: flex;
justify-content: center;
}
.rockBtn, .paperBtn, .scissorsBtn{
font-size: 50px;
background-color:#555d5f;
margin: 15px;
border-radius: 5px;
font-family: "Time New Roman", times, serif;
}
.rockBtn:hover, .paperBtn:hover, .scissorsBtn:hover, .playBtn:hover{
background-color: #3c3e3f;
transition: .7s;
}
.title{
font-size: 45px;
}
.titleStatement{
font-size: 30px;
}
span{
font-size: 25px;
}
img{
margin: 10px;
width: 45px;
height: 50px;
opacity: 0;
transition-duration: 1s;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="style.css">
<script src="rps.js" defer="defer"></script>
</head>
<body>
<div id="container">
<div class="intro">
<h1 class="title">Rock Paper Scissors</h1>
<h2 class="titleStatement">Challenge the computer five rounds of R.P.S to see who wins!</h2>
<button class="playBtn">Play!!</button> <!--once this is pressed the screen will transition to everything below -->
</div>
<div class="match">
<div class="buttons">
<button class="rockBtn">rock</button>
<button class="paperBtn">paper</button>
<button class="scissorsBtn">scissors</button>
</div>
<div class="displayHolder">
<div class="playerDisplay"></div>
<div class="matchContainer"></div>
</div>
<div class="score-list">
<p class="playerTitle">Player Score: </p>
<span class="playerScore">0</span>
<p class="computerTitle">Computer Score:</p>
<span class="computerScore">0</span>
</div>
<div class="score-list2">
<p class="tieTitle">Tie: </p>
<span class="tieScore">0</span>
</div>
<div class="winSection">
<h3 class="winnerTitle">Winner: </h3>
<span class="theWinner">?</span>
<img src="/trophy.png" alt="trophy image">
</div>
</div>
</div>
</body>
</html>我有麻烦的思考一种方法为函数playGame()发挥5轮。我正在考虑在game()函数中设置for循环playGame()但不递增- -
我尝试在函数playGame()中增加compareSelection()，但是按下一个按钮就能打5个回合，但我并不想这么做
。
看起来您可以访问所有函数pScore,cScore和tie中的这三个变量。你可以通过检查pScore + cScore + tie来知道你已经达到了5局，如果没有，你再调用playgame吗?
if (pScore + cScore + tie < 5) playGame()
一个选项是为您的单击事件设置一个count变量。当计数总和为5时，你的加载可以调用一个方法来重置游戏或加载初始ui。
另一种方法是检查分数计数(pScore + cScore + tie)的总和是否达到5。然后你可以重新设置游戏或加载初始ui。