How do I change amount of game moves for different game difficulties?

user_17559810 0
Viewed 33

I'm very new to Javascript and have made a game of rock paper scissors. The game itself works but is never ending. I have attempted to add varying degrees of difficulty by having different moves allowed per difficulty setting. However I'm now out of ideas on how to do this. I have tried a few different things and am now completely stuck, anything else I seem to try just makes more of a mess. Any help would be appreciated,

Thanks

function selectDifficulty() {
    let difficultyRating = ["easy", "normal", "hard"];
    let easyMoves = 7;
    let normalMoves = 5;
    let hardMoves = 3;

    if (difficultyRating == "easy") {
        movesCounter = easyMoves;
    } else if (difficultyRating == "hard") {
        movesCounter = hardMoves;
    } else movesCounter = normalMoves;

    document.getElementById("moves-counter").innerHTML = movesCounter;
}
  <!-- choose difficulty  -->
        <div class="difficulty-area">
            <h2>Choose Difficulty</h2>
            <button onclick="selectDifficulty('easy')" class="btn btn-easy" aria-label="Easy Difficulty">
                <p id="easy">Easy</p>
            </button>
            <button onclick="selectDifficulty('normal')" class="btn btn-normal" aria-label="Normal Difficulty">
                <p id="medium">Normal</p>
            </button>
            <button onclick="selectDifficulty('hard')" class="btn btn-hard" aria-label="Hard Difficulty">
                <p id="hard">Hard</p>
            </button>
        </div>

        <!-- moves remaining until game over -->
        <div class="moves-remaining">
            <p> Moves remaining : 
                <span id="moves-counter">0</span>
            </p>
        </div>

if-statement onclick javascript
1 Answers

Your function calls use parameters, but your function definition doesn't catch them.

Add a parameter to the function definition (and remove the now defunct array), and your code works.

function selectDifficulty(difficultyRating) {
    let easyMoves = 7;
    let normalMoves = 5;
    let hardMoves = 3;

    if (difficultyRating == "easy") {
        movesCounter = easyMoves;
    } else if (difficultyRating == "hard") {
        movesCounter = hardMoves;
    } else movesCounter = normalMoves;

    document.getElementById("moves-counter").innerHTML = movesCounter;
}
  <!-- choose difficulty  -->
        <div class="difficulty-area">
            <h2>Choose Difficulty</h2>
            <button onclick="selectDifficulty('easy')" class="btn btn-easy" aria-label="Easy Difficulty">
                <p id="easy">Easy</p>
            </button>
            <button onclick="selectDifficulty('normal')" class="btn btn-normal" aria-label="Normal Difficulty">
                <p id="medium">Normal</p>
            </button>
            <button onclick="selectDifficulty('hard')" class="btn btn-hard" aria-label="Hard Difficulty">
                <p id="hard">Hard</p>
            </button>
        </div>

        <!-- moves remaining until game over -->
        <div class="moves-remaining">
            <p> Moves remaining : 
                <span id="moves-counter">0</span>
            </p>
        </div>

user_43619990
Related