javascript - 获取div以在Javascript中获取随机值

Question

这里是新手。尝试在 javascript 中创建二十一点游戏。我将我的卡片存储在一组对象(类型、花色和值(value))中并让它工作，这样当我单击“新游戏”时，我会在每个 div 上得到一张随机卡片。

*我似乎无法让每张卡片随机出现不同的卡片。每当我重新加载页面时，所有 4 个 div 上都会弹出相同的随机卡片。有人可以帮我吗？ * 下面是我的代码...在我将对象数组存储到这里之后就是我所拥有的。

var randomNumber = Math.floor(Math.random() * 52)
var randomCard = deck[randomNumber];

var playerCardOne = document.querySelector('.playerCardOne');
var playerCardTwo = document.querySelector('.playerCardTwo');
var dealerCardOne = document.querySelector('.dealerCardOne');
var dealerCardTwo = document.querySelector('.dealerCardTwo');

document.querySelector("#newGame").addEventListener("click", function (){
    var cardHTML = '';

    cardHTML += '<h1>' + randomCard.cardType + '/h1>' + '<h2>' + randomCard.suitType + '</h2>'
    // cardHTML += ".playerCardTwo" + randomCard.cardType + ".playerCardTwo";
    // cardHTML += ".dealerCardOne" + randomCard.cardType + ".dealerCardTwo";
    // cardHTML += ".dealerCardTwo" + randomCard.cardType + ".dealerCardTwo";

    // cardHTML += '<h2>' + randomCard.suitType + '</h2>';

    cardHTML = '<h1>' + randomCard.cardType + '</h1>' + '<h2>' + randomCard.suitType + '</h2>'

    playerCardOne.innerHTML = cardHTML;
    playerCardTwo.innerHTML = cardHTML;
    dealerCardOne.innerHTML = cardHTML;
    dealerCardTwo.innerHTML = cardHTML;
})
console.log(randomCard);

Answer 1

您抽取 1 个随机数并将其应用于所有 4 个卡位。考虑为每个卡槽抽取一个随机数。

var playerCardOne = document.querySelector('.playerCardOne');
var playerCardTwo = document.querySelector('.playerCardTwo');
var dealerCardOne = document.querySelector('.dealerCardOne');
var dealerCardTwo = document.querySelector('.dealerCardTwo');

var playerOneCards = [];
var playerTwoCards = [];

document.querySelector("#newGame").addEventListener("click", function (){
    playerOneCards.push(drawRandomCard());
    playerOneCards.push(drawRandomCard());
    playerTwoCards.push(drawRandomCard());
    playerTwoCards.push(drawRandomCard());

    playerCardOne.innerHTML = getCardHTML(playerOneCards[0]);
    playerCardTwo.innerHTML = getCardHTML(playerOneCards[1]);
    dealerCardOne.innerHTML = getCardHTML(playerTwoCards[0]);
    dealerCardTwo.innerHTML = getCardHTML(playerTwoCards[1]);
})

function drawRandomCard() {
    return deck[Math.floor(Math.random() * 52)];
}

function getCardHTML(card) {
    return '<h1>' + card.cardType + '</h1>' + '<h2>' + card.suitType + '</h2>';
}

document.querySelector("#hit").addEventListener("click", function () {
    var currentPlayerCards; // figure out which player 'hit'
    currentPlayerCards.push(drawRandomCard());
});

您可以这样做，而不是执行“playerCardOne”/“playerCardTwo”:

function drawPlayerHand(dom_element, hand) {
    var cardsHTML = "";
    hand.forEach(function (card) {
        cardsHTML += getCardHTML(card);
    });
    dom_element.innerHTML = "<div class='hand'>" + cardsHTML + "</div>";
}

drawPlayerHand(document.getElementById("player1hand"), playerOneCards);

然后你可以更进一步，让玩家充满活力:

var players = [];

functin addPlayer() {
    var elem_id = "player" + players.length + "hand";
    document.getElementById("playerhands").innerHTML += '<div id="' + elem_id + '"></div>';
    players.push({ "hand": [], element: document.getElementById(elem_id) };
}

// add two players
addPlayer();
addPlayer();

function newGame() { // calll on click
    // give each player 2 cards
    players.forEach(function (player) {
        player.hand.push(drawRandomCard());
        player.hand.push(drawRandomCard());
        drawPlayerHand(player);
    });
}

function hit() {
    var currentPlayer; // determine current player somehow
    currentPlayer.push(drawRandomCard());
    drawPlayerHand(currentPlayer);
}

function drawPlayerHand(player) {
    var cardsHTML = "";
    player.hand.forEach(function (card) {
        cardsHTML += getCardHTML(card);
    });
    player.element.innerHTML = "<div class='hand'>" + cardsHTML + "</div>";
}

每张牌只抽一次:

var draw_deck = [];
for (i = 0; i < 52; i += 1) {
    draw_deck.push(i);
}

function drawRandomCard() {
    var index, card;
    index = Math.floor(Math.random() * draw_deck.length);
    card = draw_deck[index];
    draw_deck.splice(index, 1); // remove drawn card from draw_deck
    return card;
}
// remember to reinitialize the draw deck after a round