'How do I use a for loop to manage increments of an object property in JavaScript?

I’m doing a rockPaperScissors project. Here’s the published link: https://george-swift.github.io/rockPaperScissors/. I want to add a first to 5 feature to put an end score to the game. If either the player or computer reaches 5, I'll have a message declare a winner (I know how to manipulate the message). Attached is a snippet for clarity.

//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>

Solution 1:^[1]

From what I see, the incrementing is working as expected. You only need to put in a condition to check for 5 after the winner score has been incremented.

And then add the check to your current code.

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. 
    } 
}

Then you can add the extra function to the js file:

function renderEndGame () {
    // Display end game message and score
    // maybe an alert message
}

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	Shell Code

'How do I use a for loop to manage increments of an object property in JavaScript?

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]