52 карты с генератором случайных чисел JS

const getShuffledArr = arr => { if (arr.length === 1) { return arr}; const rand = Math.floor(Math.random() * arr.length); return [arr[rand], ...getShuffledArr(arr.filter((_, i) => i != rand))]; }; // https://stackoverflow.com/questions/2450954/how-to-randomize-shuffle-a-javascript-array
const karten = getShuffledArr(["h", "k", "a", "p"].flatMap(farbe => Array.from({length: 10})
  .map((_, i) => `${i+1}${farbe}.png`).concat(["soldat", "queen", "kingh"].map(card => `${card}${farbe}.png`)))); // shuffled array

const len = karten.length;
const handLength = 13;
const start = () => { 
  document.getElementById("alles").innerHTML = Array.from({length: 4})
    .map((_, i) => `<div class = "spieler" id = "spieler${i+1}"><h3>Spieler ${i+1}</h3>
    ${Array.from({length: 13})
      .map((_, i) => `<img src = "${karten.pop()}" />`).join('')} // we could sort here
  </div>`).join('');
};
window.addEventListener("DOMContentLoaded",start)

<div id = "alles">
 
</div>

// creates a deck of 52 cards dynamically
const KARTEN = [
  'Karo 2',
  'Karo 3',
  'Karo 4',
  'Karo 5',
  'Karo 6',
  'Karo 7',
  'Karo 8',
  'Karo 9',
  'Karo 10',
  'Karo Bube',
  'Karo Dame',
  'Karo König',
  'Karo Ass',
  'Herz 2',
  'Herz 3',
  'Herz 4',
  'Herz 5',
  'Herz 6',
  'Herz 7',
  'Herz 8',
  'Herz 9',
  'Herz 10',
  'Herz Bube',
  'Herz Dame',
  'Herz König',
  'Herz Ass',
  'Pik 2',
  'Pik 3',
  'Pik 4',
  'Pik 5',
  'Pik 6',
  'Pik 7',
  'Pik 8',
  'Pik 9',
  'Pik 10',
  'Pik Bube',
  'Pik Dame',
  'Pik König',
  'Pik Ass',
  'Kreuz 2',
  'Kreuz 3',
  'Kreuz 4',
  'Kreuz 5',
  'Kreuz 6',
  'Kreuz 7',
  'Kreuz 8',
  'Kreuz 9',
  'Kreuz 10',
  'Kreuz Bube',
  'Kreuz Dame',
  'Kreuz König',
  'Kreuz Ass'
];
const HAND_SPIELER_EINS = document.querySelector('#kartenSpieler1');

document.querySelector('button').addEventListener('click', function() {
  leereHaende();
  mischeKarten();
});

// clears the hands of the players 
function leereHaende() {
  while (HAND_SPIELER_EINS.firstChild) {
    HAND_SPIELER_EINS.removeChild(HAND_SPIELER_EINS.lastChild);
  }
  kartenSpielerEins = [];
}

// creates a shuffled copy of the deck
let gemischteKarten;

function mischeKarten() {
    for (let i = KARTEN.length - 1; i > 0; i--) {
        const j = Math.floor(Math.random() * (i + 1));
        [KARTEN[i], KARTEN[j]] = [KARTEN[j], KARTEN[i]];
    }
    
    gemischteKarten = Array.from(KARTEN);
    
    verteileKarten();
}


// distribute cards to 4 players
let kartenSpielerEins = [];
  
function verteileKarten() {
  for (let i = 13; i > 0; i--) { 
    kartenSpielerEins.push(gemischteKarten.shift());
  }
  
  kartenAnzeigen();
}


// displays the cards
function kartenAnzeigen() {
  for (let i = 0; i < kartenSpielerEins.length; i++) {
    let neueKarte = document.createElement('img');
    neueKarte.alt = kartenSpielerEins[i];
    HAND_SPIELER_EINS.appendChild(neueKarte);
  }
}

img {
  display: block;
}

<button>Teile Karten Aus</button>

<div id = "kartenSpieler1"></div>