Я изучаю 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).
Вот расширенная версия, которую стоит изучить
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 раз. Если вы раздаете карты игрокам, то одна и та же карта может существовать только один раз.
Array.from()
Array.prototype.shift()
.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>