Question:
How can it be done so that repeated letters do not come out? I use a random number to select a position within the card array, but this number can be repeated causing a repeated card to appear. How can it be done to simulate that the deck is going to lose cards every time the user takes one since the way the program is being executed can cause, for example, the ace of diamonds card to come out twice, which in a normal deck of cards is impossible.
<html>
<head>
<meta charset="UTF-8">
<style>
.maso{
width: 150px;
height: 200px;
background-color: CornSilk;
border-style: solid;
border-color: CornflowerBlue;
border-width: 4px;
margin: 5px;
}
.tablero{
display: flex;
padding-top: 20px;
}
.carta{
width: 150px;
height: 200px;
background-color: CornSilk;
border-style: solid;
border-color: CornflowerBlue;
border-width: 4px;
text-align: center;
margin: 5px;
}
</style>
<script>
var cartas = [
//Treboles
"A♣",
"2♣",
"3♣",
"4♣",
"5♣",
"6♣",
"7♣",
"8♣",
"9♣",
"10♣",
"J♣",
"Q♣",
"R♣",
//Corazones
"A♥",
"2♥",
"3♥",
"4♥",
"5♥",
"6♥",
"7♥",
"8♥",
"9♥",
"10♥",
"J♥",
"Q♥",
"R♥",
//Espadas
"A♠",
"2♠",
"3♠",
"4♠",
"5♠",
"6♠",
"7♠",
"8♠",
"9♠",
"10♠",
"J♠",
"Q♠",
"R♠",
//Diamantes
"A♦",
"2♦",
"3♦",
"4♦",
"5♦",
"6♦",
"7♦",
"8♦",
"9♦",
"10♦",
"J♦",
"Q♦",
"R♦"
];
function tomarCarta(){
var a = Math.floor(Math.random() * 51);
var b = cartas[a];
var x = document.createElement("DIV");
x.classList.add("carta");
var y = document.createTextNode(b);
x.appendChild(y);
document.getElementById("tablero").appendChild(x);
}
</script>
</head>
<body>
<div class="maso" onclick="tomarCarta()">
</div>
<div id="tablero" class="tablero">
</div>
</body>
</html>
Answer:
You need to save the selections in another array and check if each card has already been selected. Something like that:
<html>
<head>
<meta charset="UTF-8">
<style>
.maso{
width: 150px;
height: 200px;
background-color: CornSilk;
border-style: solid;
border-color: CornflowerBlue;
border-width: 4px;
margin: 5px;
}
.tablero{
display: flex;
padding-top: 20px;
}
.carta{
width: 150px;
height: 200px;
background-color: CornSilk;
border-style: solid;
border-color: CornflowerBlue;
border-width: 4px;
text-align: center;
margin: 5px;
}
</style>
<script>
var cartas = [
//Treboles
"A♣",
"2♣",
"3♣",
"4♣",
"5♣",
"6♣",
"7♣",
"8♣",
"9♣",
"10♣",
"J♣",
"Q♣",
"R♣",
//Corazones
"A♥",
"2♥",
"3♥",
"4♥",
"5♥",
"6♥",
"7♥",
"8♥",
"9♥",
"10♥",
"J♥",
"Q♥",
"R♥",
//Espadas
"A♠",
"2♠",
"3♠",
"4♠",
"5♠",
"6♠",
"7♠",
"8♠",
"9♠",
"10♠",
"J♠",
"Q♠",
"R♠",
//Diamantes
"A♦",
"2♦",
"3♦",
"4♦",
"5♦",
"6♦",
"7♦",
"8♦",
"9♦",
"10♦",
"J♦",
"Q♦",
"R♦"
];
var usadas = [];
function tomarCarta(){
var cartaValida = false;
while (!cartaValida) {
var a = Math.floor(Math.random() * 51);
var b = cartas[a];
if (usadas.indexOf(b) == -1) {
usadas.push(b);
var x = document.createElement("DIV");
x.classList.add("carta");
var y = document.createTextNode(b);
x.appendChild(y);
document.getElementById("tablero").appendChild(x);
cartaValida = true;
}
}
}
</script>
</head>
<body>
<div class="maso" onclick="tomarCarta()">
</div>
<div id="tablero" class="tablero">
</div>
</body>
</html>