Card game repeating cards

Question

I have this game of War and it works great, but the cards that have been payed repeat themselves. Each card should only display once per game. How do I get my used cards to display only once?

Here is my code:

$(document).ready(function () {    
var used_cards = new Array();

var player_cards = new Array();
var slick_cards = new Array();
var playerName="";
var count = 0; 
document.getElementById("play").disabled = true;

var P_hand = {
    cards: new Array()
}
var S_hand = {
    cards: new Array()
}
var Hand = {
    cards: new Array()
}

Deck of card variables:

var deck = [
    new card('Ace', 'Hearts', 11, 142),
    new card('Two', 'Hearts', 2, 22),
    new card('Three', 'Hearts', 3, 32),
    new card('Four', 'Hearts', 4, 42),
    new card('Five', 'Hearts', 5, 52),
    new card('Six', 'Hearts', 6, 62),
    new card('Seven', 'Hearts', 7, 72),
    new card('Eight', 'Hearts', 8, 82),
    new card('Nine', 'Hearts', 9, 92),
    new card('Ten', 'Hearts', 10, 102),
    new card('Jack', 'Hearts', 10, 112),
    new card('Queen', 'Hearts', 10, 122),
    new card('King', 'Hearts', 10, 132),
    new card('Ace', 'Diamonds', 11, 141),
    new card('Two', 'Diamonds', 2, 21),
    new card('Three', 'Diamonds', 3, 31),
    new card('Four', 'Diamonds', 4, 41),
    new card('Five', 'Diamonds', 5, 51),
    new card('Six', 'Diamonds', 6, 61),
    new card('Seven', 'Diamonds', 7, 71),
    new card('Eight', 'Diamonds', 8, 81),
    new card('Nine', 'Diamonds', 9, 91),
    new card('Ten', 'Diamonds', 10, 101),
    new card('Jack', 'Diamonds', 10, 111),
    new card('Queen', 'Diamonds', 10, 121),
    new card('King', 'Diamonds', 10, 131),
    new card('Ace', 'Clubs', 11, 143),
    new card('Two', 'Clubs', 2, 23),
    new card('Three', 'Clubs', 3, 33),
    new card('Four', 'Clubs', 4, 43),
    new card('Five', 'Clubs', 5, 53),
    new card('Six', 'Clubs', 6, 63),
    new card('Seven', 'Clubs', 7, 73),
    new card('Eight', 'Clubs', 8, 83),
    new card('Nine', 'Clubs', 9, 93),
    new card('Ten', 'Clubs', 10, 103),
    new card('Jack', 'Clubs', 10, 113),
    new card('Queen', 'Clubs', 10, 123),
    new card('King', 'Clubs', 10, 133),
    new card('Ace', 'Spades', 11, 144),
    new card('Two', 'Spades', 2, 24),
    new card('Three', 'Spades', 3, 34),
    new card('Four', 'Spades', 4, 44),
    new card('Five', 'Spades', 5, 54),
    new card('Six', 'Spades', 6, 64),
    new card('Seven', 'Spades', 7, 74),
    new card('Eight', 'Spades', 8, 84),
    new card('Nine', 'Spades', 9, 94),
    new card('Ten', 'Spades', 10, 104),
    new card('Jack', 'Spades', 10, 114),
    new card('Queen', 'Spades', 10, 124),
    new card('King', 'Spades', 10, 134)
];

Functions:

    function card(name, suit, value, trump) {
        this.name = name;
        this.suit = suit;
        this.value = value;
        this.trump = trump;
    }
    

    $("#newPlayer").click(function(){
            var newPlayer = prompt("Please enter your name.","");
            playerName = newPlayer;
            if(newPlayer != null){
                document.getElementsByClassName("pName")[0].innerHTML = newPlayer;
                document.getElementsByClassName("pName")[1].innerHTML = newPlayer+":";
            }
        });
        

     $("#deal").click(function(){
        if(playerName == ""){
            var newPlayer = prompt("Please enter your name.","");
            playerName = newPlayer;
            if(newPlayer != null){
                document.getElementsByClassName("pName")[0].innerHTML = newPlayer;
                document.getElementsByClassName("pName")[1].innerHTML = newPlayer+":";
            }
        }
        document.getElementById("pHandImg").src = "";
        document.getElementById("cHandImg").src = "";
        document.getElementById("play").disabled = false;
        document.getElementById("cardCount").innerHTML = 26;
        document.getElementById("cScore").innerHTML = "";
        document.getElementById("pScore").innerHTML = "";
        document.getElementById("win").innerHTML = "";
    });

    $("#play").click(function(){
        
        debugger;
        var cardcount = parseInt(document.getElementById("cardCount").textContent);
        if(cardcount == 1){
            document.getElementById("cardCount").innerHTML = cardcount-1;
            var pScore = parseInt(document.getElementById("pScore").textContent);
            var cScore = parseInt(document.getElementById("cScore").textContent);
            if(pScore > cScore){
                document.getElementById("pHandImg").src = "./images/other/check.png";
                document.getElementById("win").innerHTML = "Congrats "+playerName + " Won Game";
            } 
            if(pScore < cScore){
                document.getElementById("pHandImg").src = "./images/other/x.png";
            }
            if(pScore < cScore){
                document.getElementById("cHandImg").src = "./images/other/check.png";
                document.getElementById("win").innerHTML = "Congrats  slick Won Game";
            } 
            if(pScore > cScore){
                document.getElementById("cHandImg").src = "./images/other/x.png";
            }

            document.getElementById("play").disabled = true;
        }else{
            if(count > 0){
                document.getElementById("cardCount").innerHTML = cardcount-1;
            }
            pItem = deck[Math.floor(Math.random() * deck.length)];
            sItem = deck[Math.floor(Math.random() * deck.length)];
            player_cards.push(pItem);
            slick_cards.push(sItem);
            used_cards.push(sItem,sItem);
            pSrc = "./images/"+pItem.suit+"/"+pItem.name+".jpg";
            sSrc = "./images/"+sItem.suit+"/"+sItem.name+".jpg";
            document.getElementById("pHandImg").src = pSrc;
            document.getElementById("cHandImg").src = sSrc;
            pValue = pItem.value;
            sValue = sItem.value;
            val = pValue + sValue;
            var pScore = parseInt(document.getElementById("pScore").textContent);
            if(!pScore){
                pScore = 0;
            }
            var cScore = parseInt(document.getElementById("cScore").textContent);
            if(!cScore){
                cScore = 0;
            }
            if(pValue > sValue){
                document.getElementById("pScore").innerHTML = pScore + val;
            }
            if(pValue < sValue){
                document.getElementById("cScore").innerHTML = cScore + val;
                
            }
        }
        count++;
    });
    
});

`document.getElementsByClassName("pName")[0].innerHTML` is ***very*** bad code for [this reason](https://stackoverflow.com/questions/54952088/how-to-modify-style-to-html-elements-styled-externally-with-css-using-js/54952474#54952474) and `.innerHTML` should be avoided because it has security and performance implications (use `.textContent` when the string doesn't contain any HTML). Additionally, if you are going to reference the same element(s) throughout your application, get the references just once and give them appropriate scope to be accessible throughout. — Scott Marcus, Dec 07 '20 at 20:33

score 1 · Answer 1 · answered Dec 07 '20 at 20:43

I am not sure what are pItem and sItem and used_cards and slick_cards but for example if you want to check if sItem not used before in used_cards (and similar for pItem and slick_cards) then before consuming the new cards generate new items in a loop until you make sure that they are not used before:

var usedBefore=false;
while (!usedBefore){
    sItem = deck[Math.floor(Math.random() * deck.length)];
    if (used_cards.includes(sItem)){
        usedBefore=true;
    }
}
//Then do other stuff

symlink · Answer 2 · 2020-12-07T21:04:02.067

Just add a played property to each card to keep track of them:

const suits = ['Hearts', 'Diamonds', 'Clubs', 'Spades']
const ranks = ['Ace', 'Two', 'Three', 'Four', 'Five', 'Six', 'Seven', 'Eight', 'Nine', 'Jack', 'Queen', 'King']

function card(rank, suit, value, trump) {
  this.rank = rank;
  this.suit = suit;
  this.value = value;
  this.trump = trump;
  this.played = false 
}

let cards = []
ranks.forEach(rank => {
  suits.forEach(suit => {
    cards.push(new card(rank,suit,10,10))
  })
})

//sets every King to played
cards.forEach(card => card.played = card.rank === 'King' ? true : false )
console.log(cards.filter(card => card.played))

Card game repeating cards

2 Answers2