如何解决如何使用for循环来管理JavaScript中对象属性的增量？
我正在做一个rockPaperScissors项目。这是已发布的链接：https://george-swift.github.io/rockPaperScissors/。我想添加第一个到第5个功能来为游戏添加一个结束分数。如果玩家或计算机达到5岁，我将收到一条消息，宣布获胜者（我知道如何操作该消息）。随附的是一个清晰的代码段。
//computer will randomly pick from this array
const RPS = ['rock','paper','scissors']
//object defines the rules of the game for each player selection
const rulesRPS = {
rock: {
beats: "scissors"
},paper: {
beats: "rock"
},scissors: {
beats: "paper"
}
};
//cached elements for scores
const pscore = document.getElementById("player-score");
const tscore = document.getElementById("tie-score");
const cscore = document.getElementById("computer-score");
//declared variables for helper functions
let winner,results,scores;
//for event listeners
document.getElementById("rock-btn").addEventListener('click',pSelectedR);
document.getElementById("paper-btn").addEventListener("click",pSelectedP);
document.getElementById("scissors-btn").addEventListener("click",pSelectedS);
// updates the scores after each game round
function render() {
pscore.innerHTML = scores.player;
tscore.innerHTML = scores.tie;
cscore.innerHTML = scores.computer;
}
function pickRandom () {
const selection = RPS[Math.floor(Math.random() * 3)];
return selection;
}
//handle results after player selection
function manageResults () {
results.computer = pickRandom();
winner = findWinner();
scores[winner]++;
render();
}
//player selections and subsequent action
function pSelectedR () {
results.player = "rock";
manageResults();
}
function pSelectedP () {
results.player = "paper";
manageResults();
}
function pSelectedS () {
results.player = "scissors";
manageResults();
}
//compare selections to find winner
function findWinner() {
results.computer = pickRandom();
if (results.player === results.computer) {
return 'tie';
}
if (rulesRPS[results.player].beats === results.computer) {
return 'player';
}
return 'computer';
}
//instantiates the state of the game
function init() {
scores = {
player: 0,tie: 0,computer: 0,};
results = {
player: 'rock',computer: 'rock'
};
winner = null;
}
init();* {
Box-sizing: border-Box;
}
body {
font-family: 'Judson',serif;
text-align: center;
height: 100vh;
margin: 40px 0px;
}
h1,h2 {
font-family: 'Archivo Black',sans-serif;
}
body,main,aside {
display: flex;
justify-content: space-evenly;
align-items: center;
}
body,main {
flex-direction: column;
}
table {
width: 100%;
}
td {
width: 33.3%;
font-size: 2.5rem;
}
img {
width: 50vh;
height: 50vh;
}
aside {
width: 75vw;
padding: 0.5em 0 0 0;
}
button {
width: 30vw;
margin: 2vw;
background-color: rgb(38,39,39);
color: whitesmoke;
border: rgb(113,125,126) solid 2px;
border-radius: 3px;
padding: 5px;
cursor: pointer;
}
button:hover {
background-color: rgb(112,123,124);
color: black;
transition: 0.5s;
}
button,#link {
font-size: 20px;
}<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<title>Rock Paper Scissors</title>
<link rel="stylesheet" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Archivo+Black|Judson:400,700" rel="stylesheet">
<script defer src="main.js"></script>
</head>
<body>
<header>
<h1>ROCK PAPER SCISSORS- FOR PASTIME</h1>
</header>
<main>
<table>
<caption>
<h2>scores</h2>
<p>Best of 5?</p>
</caption>
<tbody>
<tr>
<th>Player</th>
<th>Tie</th>
<th>Computer</th>
</tr>
<tr>
<td id="player-score">0</td>
<td id="tie-score">0</td>
<td id="computer-score">0</td>
</tr>
</tbody>
</table>
<figure>
<img src="https://res.cloudinary.com/george-swift/image/upload/v1603381143/9d966b99b233a6768b6981b83e43e0f0_hobh0x.jpg"
alt="rock paper scissors illustrated"/>
</figure>
</main>
<aside>
<button id="rock-btn">Rock</button>
<button id="paper-btn">Paper</button>
<button id="scissors-btn">Scissors</button>
</aside>
<nav>
<a href="https://github.com/george-swift" id="link" target="_blank">GitHub</a>
</nav>
</body>
</html>P.S：在大流行之前，我是一名飞机工程师，然后失业。在我的课前学习中，我仅在5周前才开始学习Html，Css和JavaScript，所以我真的很想了解解决方案，而不仅仅是获得答案，因为我必须提交答案。另外，对于此项目和/或其他方面的任何其他相关反馈或提示，我们将不胜感激。
解决方法
从我所看到的，增量正在按预期方式工作。获胜者分数增加后，您只需设置条件即可检查5。
然后将支票添加到当前代码中。
__init__然后，您可以将额外的功能添加到js文件中：
function manageResults () {
results.computer = pickRandom();
winner = findWinner();
scores[winner]++;
render();
if (scores[winner] === 5) {
renderEndGame();
init(); // To reset the scores to 0 for a new game.
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。
