Home > Enterprise >  Array keeps resetting back to original quantity on click
Array keeps resetting back to original quantity on click

Time：11-20

I'm working on a card game and for the most part its working out. It shuffles, and divides the deck into two (1st 26cards to player 1, the other half to player 2). My problem is when a player wins they are supposed to gain a card from the other player's hand. (player1Cards.push(player2Cards[card])) - This works, but because of the setup of the game every time you click play the entire game resets.

Is there a way I can make it so once the card gets pushed it stays within the winners array without refreshing every time?

I tried putting my shuffle for loop in a function, but then it wont read any of my variables.

function start() {  

    //Deck with ranks:

    let starterDeck = [
        {"img": '2_of_clubs.png',"rank": 1},{"img": '3_of_clubs.png',"rank": 2},{"img": '4_of_clubs.png',"rank": 3},{"img": '5_of_clubs.png',"rank": 4},{"img": '6_of_clubs.png',"rank": 5},{"img": '7_of_clubs.png',"rank": 6},{"img": '8_of_clubs.png',"rank": 7},{"img": '9_of_clubs.png',"rank": 8},{"img": '10_of_clubs.png',"rank": 9},{"img": 'jack_of_clubs.png',"rank": 10},{"img": 'queen_of_clubs.png',"rank": 11},{"img": 'king_of_clubs.png',"rank": 12},{"img": 'ace_of_clubs.png',"rank": 13},    {"img": '2_of_diamonds.png',"rank": 1},{"img": '3_of_diamonds.png',"rank": 2},{"img": '4_of_diamonds.png',"rank": 3},{"img": '5_of_diamonds.png',"rank": 4},{"img": '6_of_diamonds.png',"rank": 5},{"img": '7_of_diamonds.png',"rank": 6},{"img": '8_of_diamonds.png',"rank": 7},{"img": '9_of_diamonds.png',"rank": 8},{"img": '10_of_diamonds.png',"rank": 9},{"img": 'jack_of_diamonds.png',"rank": 10},{"img": 'queen_of_diamonds.png',"rank": 11},{"img": 'king_of_diamonds.png',"rank": 12},{"img": 'ace_of_diamonds.png',"rank": 13},    {"img": '2_of_hearts.png',"rank": 1},{"img": '3_of_hearts.png',"rank": 2},{"img": '4_of_hearts.png',"rank": 3},{"img": '5_of_hearts.png',"rank": 4},{"img": '6_of_hearts.png',"rank": 5},{"img": '7_of_hearts.png',"rank": 6},{"img": '8_of_hearts.png',"rank": 7},{"img": '9_of_hearts.png',"rank": 8},{"img": '10_of_hearts.png',"rank": 9},{"img": 'jack_of_hearts.png',"rank": 10},{"img": 'queen_of_hearts.png',"rank": 11},{"img": 'king_of_hearts.png',"rank": 12},{"img": 'ace_of_hearts.png',"rank": 13},    {"img": '2_of_spades.png',"rank": 1},{"img": '3_of_spades.png',"rank": 2},{"img": '4_of_spades.png',"rank": 3},{"img": '5_of_spades.png',"rank": 4},{"img": '6_of_spades.png',"rank": 5},{"img": '7_of_spades.png',"rank": 6},{"img": '8_of_spades.png',"rank": 7},{"img": '9_of_spades.png',"rank": 8},{"img": '10_of_spades.png',"rank": 9},{"img": 'jack_of_spades.png',"rank": 10},{"img": 'queen_of_spades.png',"rank": 11},{"img": 'king_of_spades.png',"rank": 12},{"img": 'ace_of_spades.png',"rank": 13},
       ]

    //Shuffled Our Deck:
           for(let i=0;i<52; i  ) {
            // We are taking our tempCard and placing it in the random position (randomIndex)
                    let shuffledCards = starterDeck[i];
                    let randomIndex = Math.floor(Math.random() * 52);
                    starterDeck[i] = starterDeck[randomIndex]
                    starterDeck[randomIndex] = shuffledCards;
                }
            //console.log(starterDeck)
    

    //Make it random out of the 26 cards received by players:
    let card = Math.floor(Math.random() * 26)

    //Player 1 gets the first 26 cards from the random shuffled deck. 
    let player1Cards = starterDeck.splice(26)

    //Place the image
      let selectedCardImg = [player1Cards[card].img]
      document.getElementById('p1Card').src = "./images/cards/"   selectedCardImg

      //Player 2 gets the last 26 cards from the random shuffled deck. 
      let player2Cards = starterDeck.splice(-26)

      //console.log(player2Cards)
      console.log('PLAYER 1 CARD')
      console.log(player1Cards[card])

      console.log('PLAYER 2 CARD')
      console.log(player2Cards[card])
    
      //Place the image
      let selectedCardImg2 = [player2Cards[card].img]
      document.getElementById('p2Card').src = "./images/cards/"   selectedCardImg2
   
 
      if (player1Cards[card].rank < player2Cards[card].rank){
        //alert("Player 2 Wins")
        player2Cards.push(player1Cards[card])
        console.log(player2Cards)
    } else if (player1Cards[card].rank > player2Cards[card].rank){
   
       // alert("Player 1 wins")
       player1Cards.push(player2Cards[card])
       console.log(player1Cards)
    } 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" height="300px" id="p1Card">
    <img src="./images/cards/red_joker.png" height="300px" id="p2Card">

    <input type="text" readonly id="player1Score"/>
    <input type="text" readonly id="player2Score"/>
    <button onclick = "start()">play me</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>

CodePudding user response：

You need at least one function to initialize the game and deal the cards, and another function to play each round. I've re arranged parts of your code.

// globals
var player1Cards
var player2Cards

//Deck with ranks:
const starterDeck = [{
  "img": '2_of_clubs.png',
  "rank": 1
}, {
  "img": '3_of_clubs.png',
  "rank": 2
}, {
  "img": '4_of_clubs.png',
  "rank": 3
}, {
  "img": '5_of_clubs.png',
  "rank": 4
}, {
  "img": '6_of_clubs.png',
  "rank": 5
}, {
  "img": '7_of_clubs.png',
  "rank": 6
}, {
  "img": '8_of_clubs.png',
  "rank": 7
}, {
  "img": '9_of_clubs.png',
  "rank": 8
}, {
  "img": '10_of_clubs.png',
  "rank": 9
}, {
  "img": 'jack_of_clubs.png',
  "rank": 10
}, {
  "img": 'queen_of_clubs.png',
  "rank": 11
}, {
  "img": 'king_of_clubs.png',
  "rank": 12
}, {
  "img": 'ace_of_clubs.png',
  "rank": 13
}, {
  "img": '2_of_diamonds.png',
  "rank": 1
}, {
  "img": '3_of_diamonds.png',
  "rank": 2
}, {
  "img": '4_of_diamonds.png',
  "rank": 3
}, {
  "img": '5_of_diamonds.png',
  "rank": 4
}, {
  "img": '6_of_diamonds.png',
  "rank": 5
}, {
  "img": '7_of_diamonds.png',
  "rank": 6
}, {
  "img": '8_of_diamonds.png',
  "rank": 7
}, {
  "img": '9_of_diamonds.png',
  "rank": 8
}, {
  "img": '10_of_diamonds.png',
  "rank": 9
}, {
  "img": 'jack_of_diamonds.png',
  "rank": 10
}, {
  "img": 'queen_of_diamonds.png',
  "rank": 11
}, {
  "img": 'king_of_diamonds.png',
  "rank": 12
}, {
  "img": 'ace_of_diamonds.png',
  "rank": 13
}, {
  "img": '2_of_hearts.png',
  "rank": 1
}, {
  "img": '3_of_hearts.png',
  "rank": 2
}, {
  "img": '4_of_hearts.png',
  "rank": 3
}, {
  "img": '5_of_hearts.png',
  "rank": 4
}, {
  "img": '6_of_hearts.png',
  "rank": 5
}, {
  "img": '7_of_hearts.png',
  "rank": 6
}, {
  "img": '8_of_hearts.png',
  "rank": 7
}, {
  "img": '9_of_hearts.png',
  "rank": 8
}, {
  "img": '10_of_hearts.png',
  "rank": 9
}, {
  "img": 'jack_of_hearts.png',
  "rank": 10
}, {
  "img": 'queen_of_hearts.png',
  "rank": 11
}, {
  "img": 'king_of_hearts.png',
  "rank": 12
}, {
  "img": 'ace_of_hearts.png',
  "rank": 13
}, {
  "img": '2_of_spades.png',
  "rank": 1
}, {
  "img": '3_of_spades.png',
  "rank": 2
}, {
  "img": '4_of_spades.png',
  "rank": 3
}, {
  "img": '5_of_spades.png',
  "rank": 4
}, {
  "img": '6_of_spades.png',
  "rank": 5
}, {
  "img": '7_of_spades.png',
  "rank": 6
}, {
  "img": '8_of_spades.png',
  "rank": 7
}, {
  "img": '9_of_spades.png',
  "rank": 8
}, {
  "img": '10_of_spades.png',
  "rank": 9
}, {
  "img": 'jack_of_spades.png',
  "rank": 10
}, {
  "img": 'queen_of_spades.png',
  "rank": 11
}, {
  "img": 'king_of_spades.png',
  "rank": 12
}, {
  "img": 'ace_of_spades.png',
  "rank": 13
}, ]

function initialize_game() {

  //Shuffled Our Deck:
  for (let i = 0; i < 52; i  ) {
    // We are taking our tempCard and placing it in the random position (randomIndex)
    let shuffledCards = starterDeck[i];
    let randomIndex = Math.floor(Math.random() * 52);
    starterDeck[i] = starterDeck[randomIndex]
    starterDeck[randomIndex] = shuffledCards;
  }
  //console.log(starterDeck)


  //Player 1 gets the first 26 cards from the random shuffled deck. 
  player1Cards = starterDeck.splice(26)

  //Player 2 gets the last 26 cards from the random shuffled deck. 
  player2Cards = starterDeck.splice(-26)


}

function start_round() {
  

  //Make it random out of the 26 cards received by players:
  let card = Math.floor(Math.random() * 26)

  //Place the image
  let selectedCardImg = [player1Cards[card].img]
  document.getElementById('p1Card').src = "./images/cards/"   selectedCardImg

  //console.log(player2Cards)
  console.log('PLAYER 1 CARD')
  console.log(player1Cards[card])

  console.log('PLAYER 2 CARD')
  console.log(player2Cards[card])

  //Place the image
  let selectedCardImg2 = [player2Cards[card].img]
  document.getElementById('p2Card').src = "./images/cards/"   selectedCardImg2

  if (player1Cards[card].rank < player2Cards[card].rank) {
    //alert("Player 2 Wins")
    player2Cards.push(player1Cards[card])
    console.log(player2Cards)
  } else if (player1Cards[card].rank > player2Cards[card].rank) {

    // alert("Player 1 wins")
    player1Cards.push(player2Cards[card])
    console.log(player1Cards)
  } else {
    // alert("TIE!")
    console.log('Tie!');

  }

}

initialize_game();
<!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" height="300px" id="p1Card">
  <img src="./images/cards/red_joker.png" height="300px" id="p2Card">

  <input type="text" readonly id="player1Score" />
  <input type="text" readonly id="player2Score" />
  <button onclick="start_round()">play me</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>

CodePudding user response：

You could start saving the game state in the browser localStorage or sessionStorage.

To set the final state of palyers:

localStorage.setItem("player1Cards", player1Cards);
localStorage.setItem("player2Cards", player2Cards);

When the game restarts you can get its cards from the localStorage:

localStorage.getItem("player1Cards");
localStorage.getItem("player2Cards");

https://developer.mozilla.org/en-US/docs/Web/API/Window/sessionStorage https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Page link：https//www.codepudding.com/Enterprise/615848.html

Prev:My Javascript functions are completely ignored and all that happens is I get sent back to the top of
Next:Search inside child Array of objects with multiple value
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding