I am creating a card game using Javascript. I got this far with the code and everything works perfectly, but I am having trouble figuring out a way to make sure that once a card is selected it is never picked again.
Preview: https://natialollie.github.io/javascript-card-game/
// function 2: generate and show random card
function generateNumber() {
// combine all card arrays
let allCards = cardArray.concat(acesArray).concat(jackArray).concat(kingArray).concat(queenArray);
// select a random letter within the array
let cardLetter = allCards[Math.floor(Math.random() * allCards.length)];
// generate a random number between 2 and 10
let randomNumber = Math.floor(Math.random() * 9) + 2;
// if generic card is choosen, concatenate letter with random number
if ((cardArray).indexOf(cardLetter) !==-1) {
var genericCard = randomNumber + cardLetter;
var cardToShow = "PNG/" + genericCard + ".png"
} // OR if special card is choosen, leave as is
else {
var specialCard = cardLetter;
cardToShow = "PNG/" + specialCard + ".png"
}
console.log('The card slot with id: ' + "'" + selectedSlot + "'" + ' was selected! The new card file path to show is: ' + cardToShow);
// change the current file path of the card, to the newly generated one
let changeImgSrc = document.getElementById(selectedSlot)
changeImgSrc.src = cardToShow;
// remove file path from cardToShow and store the result
let pathRemoved = cardToShow.replace("PNG/", '').replace(".png", '');
// take the result and append to array, each time a card is shown
usedCard.push(pathRemoved);
console.log(usedCard);
//for cards inside the usedCard array, when you run the function dont include this as a file path option
}
How about this. Filter out all the cards who are found in the usedCards array.
let allCards = cardArray.concat(acesArray).concat(jackArray).concat(kingArray).concat(queenArray);
allCards = allCards.filter(card => usedCards.indexOf(card) === -1)
Alternatively you could keep track of the remaining cards (instead of the used cards) and remove from that list when you use a card.
One method is to use a fixed number table — your cards need to be mapped to an array and removed when picked. Here's a working example I built for a "use-all-numbers" random number generator:
function rand(min, max) {
return Math.floor(Math.random() * (max - min) + min);
}
var array = [],
output = document.getElementById("output");
function generatelist() {
for (i = 0; i < 10; i++) {
array.push(i + 1);
}
output.innerHTML += "<br>List is: " + array;
}
generatelist();
function selectnumber() {
x = rand(0, array.length);
output.innerHTML += "<br>Number is: " + array[x];
array.splice(x, 1);
output.innerHTML += "<br>List is: " + array;
if (array.length == 0) {
output.innerHTML += "<br>There are no more numbers! Regenerating list.";
generatelist();
}
}<button onclick="selectnumber()">Select a number from list</button>
<div id="output"></div>