CODEWITHSUNDEEP
javascripthtml
Alexis
Alexis

Reputation: 97

Javascript Score Counter not increasing

I'm creating a simple card game that when a player wins the score should increase per win. But whenever I run this code it keeps resetting the score back to 0. How can I make it so the scores keep increasing +1 if the corresponding player wins?

I've tried the below and it's unfortunately not working with what I have

$(document).ready(function(){

 //storing our images, separating them out by suit. Orderimg from lowest to highest cards.
    arrClubs=['2_of_clubs.png','3_of_clubs.png', '4_of_clubs.png', '5_of_clubs.png', '6_of_clubs.png', '7_of_clubs.png', '8_of_clubs.png', '9_of_clubs.png', '10_of_clubs.png', 'jack_of_clubs.png','queen_of_clubs.png', 'king_of_clubs.png', 'ace_of_clubs.png']
    arrDiamonds=['2_of_diamonds.png','3_of_diamonds.png', '4_of_diamonds.png', '5_of_diamonds.png', '6_of_diamonds.png', '7_of_diamonds.png', '8_of_diamonds.png', '9_of_diamonds.png', '10_of_diamonds.png', 'jack_of_diamonds.png','queen_of_diamonds.png', 'king_of_diamonds.png', 'ace_of_diamonds.png']
    arrHearts=['2_of_hearts.png','3_of_hearts.png', '4_of_hearts.png', '5_of_hearts.png', '6_of_hearts.png', '7_of_hearts.png', '8_of_hearts.png', '9_of_hearts.png', '10_of_hearts.png', 'jack_of_hearts.png','queen_of_hearts.png', 'king_of_hearts.png', 'ace_of_hearts.png']
    arrSpades=['2_of_spades.png','3_of_spades.png', '4_of_spades.png', '5_of_spades.png', '6_of_spades.png', '7_of_spades.png', '8_of_spades.png', '9_of_spades.png', '10_of_spades.png', 'jack_of_spades.png','queen_of_spades.png', 'king_of_spades.png', 'ace_of_spades.png']
    //console.log(arrClubs);
    var player1Score = 0;
    var player2Score = 0;

    //get random suit. 1 = Clubs, 2 = Diamonds, 3 = Hearts, 4 = Spades. 
    var suitType = Math.ceil(Math.random() * 4)
    var card = Math.floor(Math.random() * 12)
    var selectedCard //storing selected card
    console.log(suitType)

    if (suitType == "1"){
       
        console.log(arrClubs[card])
        selectedCard = arrClubs[card]

    } else if(suitType == "2"){

        console.log(arrDiamonds[card])
        selectedCard = arrDiamonds[card]

    } else if (suitType == "3"){

        console.log(arrHearts[card])
        selectedCard = arrHearts[card]
     
    } else {
       
        console.log(arrSpades[card])
        selectedCard = arrSpades[card]
     
    }
    document.getElementById('p1Card').src = "./images/cards/" + selectedCard

    //Player 2 Randomly Selected Card:
    var suitType = Math.ceil(Math.random() * 4)
    var card2 = Math.floor(Math.random() * 12)
    var selectedCard //storing selected card
    console.log(suitType)

    if (suitType == "1"){
       
       // console.log(arrClubs[card2])
        selectedCard = arrClubs[card2]

    } else if(suitType == "2"){

       // console.log(arrDiamonds[card2])
        selectedCard = arrDiamonds[card2]

    } else if (suitType == "3"){

        //console.log(arrHearts[card2])
        selectedCard = arrHearts[card2]
     
    } else {
       
        //console.log(arrSpades[card2])
        selectedCard = arrSpades[card2]
     
    }
    document.getElementById('p2Card').src = "./images/cards/" + selectedCard;
    
    if (card < card2){
        player2Score++;
        document.getElementById('player2Results').value = player2Score;
       // alert("Player 2 Wins")

    } else if (card > card2){
        player1Score++;
        document.getElementById('player1Results').value = player1Score;
       // alert("Player 1 wins")

    } else {
       // alert("TIE!")
       console.log('Tie!');
    }


   

})
<!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>War</title>
</head>
<body>
    <div> Game</div>
    <img src="./images/cards/black_joker.png" id="p1Card">
    <img src="./images/cards/red_joker.png" id="p2Card">

    <input type="text" readonly id="player1Results"/>
    <input type="text" readonly id="player2Results"/>
<button id="play">Play</button>
<script src="https://code.jquery.com/jquery-3.6.1.min.js" integrity="sha256-o88AwQnZB+VDvE9tvIXrMQaPlFFSUTR+nldQm1LuPXQ=" crossorigin="anonymous"></script>
<script src="./js/index.js"></script>
</body>
</html>

Upvotes: 0

Views: 59

Answers (1)

dave
dave

Reputation: 64657

Most likely you are setting player1Score and player2Score back to 0 each time you run it. Here's a working example:

const runGame = (() => {
    var player1Score = 0;
    var player2Score = 0;
    return () => {
        const card = Math.random();
        const card2 = Math.random();
        if (card < card2){
            player2Score++;
            console.log('Player 2 Wins! Score: ' + player2Score);
            document.getElementById('p2').value = player2Score;
        } else if (card > card2){
            player1Score++;
            console.log('Player 1 Wins! Score: ' + player1Score);
            document.getElementById('p1').value = player1Score;
        } else {
            console.log('Tie!');
        }
    }
})();
   

document.getElementById('play').addEventListener('click', runGame);
<div id="player1Results"></div>
<div id="player2Results"></div>

<input type="text" readonly id="p1"/>
<input type="text" readonly id="p2"/>
<button id="play">Play</button>

Upvotes: 1

Related Questions