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

Я изучаю JS, и новый проект, над которым я работаю, касается карточной игры с 52 картами. Я пытаюсь смешать все карты, чтобы раздать их по местам, где находятся игроки. Я стараюсь сначала раздать только карту игрока, чтобы увидеть, работает ли мой код, но он просто показывает одну случайную карту, хотя каждый игрок должен получить 13 карт.

function Start() {

  let Karten = new Array();

  Karten[0] = "1h.png";
  Karten[1] = "2h.png";
  Karten[2] = "3h.png";
  Karten[3] = "4h.png";
  Karten[4] = "5h.png";
  Karten[5] = "6h.png";
  Karten[6] = "7h.png";
  Karten[7] = "8h.png";
  Karten[8] = "9h.png";
  Karten[9] = "10h.png";
  Karten[10] = "soldath.png";
  Karten[11] = "queenh.png";
  Karten[12] = "kingh.png";
  Karten[13] = "1k.png";
  Karten[14] = "2k.png";
  Karten[15] = "3k.png";
  Karten[16] = "4k.png";
  Karten[17] = "5k.png";
  Karten[18] = "6k.png";
  Karten[19] = "7k.png";
  Karten[20] = "8k.png";
  Karten[21] = "9k.png";
  Karten[22] = "10k.png";
  Karten[23] = "soldatk.png";
  Karten[24] = "queenk.png";
  Karten[25] = "kingk.png";
  Karten[26] = "1ka.png";
  Karten[27] = "2ka.png";
  Karten[28] = "3ka.png";
  Karten[29] = "4ka.png";
  Karten[30] = "5ka.png";
  Karten[31] = "6ka.png";
  Karten[32] = "7ka.png";
  Karten[33] = "8ka.png";
  Karten[34] = "9ka.png";
  Karten[35] = "10ka.png";
  Karten[36] = "soldatka.png";
  Karten[37] = "queenka.png";
  Karten[38] = "kingka.png";
  Karten[39] = "1p.png";
  Karten[40] = "2p.png";
  Karten[41] = "3p.png";
  Karten[42] = "4p.png";
  Karten[43] = "5p.png";
  Karten[44] = "6p.png";
  Karten[45] = "7p.png";
  Karten[46] = "8p.png";
  Karten[47] = "9p.png";
  Karten[48] = "10p.png";
  Karten[49] = "soldap.png";
  Karten[50] = "queenp.png";
  Karten[51] = "king.png";





  var zufall = Math.floor(Math.random() * Karten.length);

  document.getElementById("Karten").src = Karten[zufall];

}
<div id = "alles">
  <div id = "Spieler1">
    spieler1
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
    <img id = "Karten">
  </div>
  <div id = "Spieler2">
    spieler2
  </div>
  <div id = "Spieler3">
    spieler3
  </div>
  <div id = "Spieler4">
    spieler4
  </div>
</div>

🤔 А знаете ли вы, что...
JavaScript может выполняться как на стороне клиента (в браузере), так и на стороне сервера (с использованием Node.js).


1
86
2

Ответы:

Решено
  1. Идентификаторы должны быть уникальными
  2. СУХОЙ, не повторяйся
  3. Перетасуйте массив перед его использованием

Вот расширенная версия, которую стоит изучить

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>

В вашем коде есть много проблем, которые начинаются с ошибочной концепции.

У вас есть массив из 52 карт, выберите случайную карту и покажите ее в руку игроку 1.

Там ваша концепция уже терпит неудачу. Это позволяет скрипту теоретически дать всем 4 игрокам одну и ту же карту 13 раз. Если вы раздаете карты игрокам, то одна и та же карта может существовать только один раз.

  1. Вы должны перетасовать свою колоду карт, где вы можете использовать алгоритмы перетасовки, как описано здесь
  2. Вам нужно создать копию массива с помощью метода Array.from()
  3. Затем вам нужно раздать карты игрокам и удалить эту карту из колоды с помощью метода Array.prototype.shift().
  4. И последнее, но не менее важное: вы должны отображать карты, динамически добавляя изображения с помощью функции createElement.

// 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>