获取div以获取Javascript中的随机值_Javascript

获取div以获取Javascript中的随机值

javascript

获取div以获取Javascript中的随机值,javascript,Javascript,我是新手。正在尝试用javascript创建21点游戏。我将我的牌存储在一系列对象（类型、套装和价值）中，并使其正常工作，因此当我单击“新游戏”时，我会在每个分区上随机获得一张牌 *我似乎无法让每张卡片显示不同的随机卡片。每当我重新加载页面时，相同的随机卡会在所有4个div上弹出。有人能帮我吗？*下面是我的代码……在我将对象数组存储到这里之后，我就有了 var randomNumber = Math.floor(Math.random() * 52) var randomCard = deck[

我是新手。正在尝试用javascript创建21点游戏。我将我的牌存储在一系列对象（类型、套装和价值）中，并使其正常工作，因此当我单击“新游戏”时，我会在每个分区上随机获得一张牌

*我似乎无法让每张卡片显示不同的随机卡片。每当我重新加载页面时，相同的随机卡会在所有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);

var randomNumber=Math.floor（Math.random（）*52）
var randomCard=牌组[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（“单击”，函数（）{
var cardHTML=''；
cardHTML+=''+randomCard.cardType+/h1>'+''+randomCard.suitType+''
//cardHTML+=“.playerCardTwo”+随机卡.cardType+“.playerCardTwo”；
//cardHTML+=“.dealerCardOne”+randomCard.cardType+“.dealerCardTwo”；
//cardHTML+=“.dealerCardTwo”+randomCard.cardType+“.dealerCardTwo”；
//cardHTML+=''+randomCard.suitType+''；
cardHTML=''+randomCard.cardType+'+''+randomCard.suitType+''
playerCardOne.innerHTML=cardHTML；
playerCardTwo.innerHTML=cardHTML；
dealerCardOne.innerHTML=cardHTML；
dealerCardTwo.innerHTML=cardHTML；
})
控制台日志（随机卡）；

您抽取1个随机数，并将其应用于所有4个卡槽。考虑为每个卡槽画一个随机数。< /P>

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());
});

var playerCardOne=document.querySelector（'.playerCardOne'）；
var playerCardTwo=document.querySelector（'.playerCardTwo'）；
var dealerCardOne=document.querySelector（'.dealerCardOne'）；
var dealerCardTwo=document.querySelector（'.dealerCardTwo'）；
var PlayerCards=[]；
var playerTwoCards=[]；
document.querySelector（“newGame”）.addEventListener（“单击”，函数（）{
PlayerCards.push（drawRandomCard（））；
PlayerCards.push（drawRandomCard（））；
playerTwoCards.push（drawRandomCard（））；
playerTwoCards.push（drawRandomCard（））；
playerCardOne.innerHTML=getCardHTML（PlayerCards[0]）；
playerCardTwo.innerHTML=getCardHTML（PlayerCards[1]）；
dealerCardOne.innerHTML=getCardHTML（playerTwoCards[0]）；
dealerCardTwo.innerHTML=getCardHTML（playerTwoCards[1]）；
})
函数drawRandomCard（）{
返回甲板[Math.floor（Math.random（）*52）]；
}
函数getCardHTML（卡片）{
返回'+card.cardType+''+''+card.suitType+''；
}
document.querySelector（“#hit”）.addEventListener（“单击”，函数（）{
var currentPlayerCards；//找出哪个玩家“击中”
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);

函数drawPlayerHand（dom_元素，手动）{
var cardsHTML=“”；
掌上电脑（功能卡）{
cardsHTML+=getCardHTML（卡片）；
});
dom_element.innerHTML=“+cardsHTML+”；
}
drawPlayerHand（document.getElementById（“player1hand”）、游戏卡；

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

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玩家=[]；
functin addPlayer（）{
var elem_id=“player”+players.length+“hand”；
document.getElementById（“playerhands”）.innerHTML+=''；
push（{“hand”：[]，元素：document.getElementById（elem_id）}；
}
//添加两名玩家
addPlayer（）；
addPlayer（）；
函数newGame（）{//call on click
//给每位玩家2张牌
players.forEach（函数（播放器）{
玩家.手.推（抽牌（））；
玩家.手.推（抽牌（））；
抽绳手（运动员）；
});
}
函数hit（）{
var currentPlayer；//以某种方式确定当前播放器
currentPlayer.push（drawRandomCard（））；
drawPlayerHand（当前玩家）；
}
函数drawPlayerHand（播放器）{
var cardsHTML=“”；
玩家.手牌.forEach（功能（卡片）{
cardsHTML+=getCardHTML（卡片）；
});
player.element.innerHTML=“+cardsHTML+”；
}

每张卡只抽一次：

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

var draw_deck=[]；
对于（i=0；i<52；i+=1）{
拉动甲板。推动（i）；
}
函数drawRandomCard（）{
var指数，卡片；
index=Math.floor（Math.random（）*draw_deck.length）；
卡片=抽牌组[索引]；
draw_牌组。拼接（索引，1）；//从draw_牌组中取出抽出的卡
回程卡；
}
//请记住在回合结束后重新初始化绘图组

您每次都需要重新滚动随机数。我修改了您的函数并添加了一些注释。如果您有问题，请随时留下注释

document.querySelector("#newGame").addEventListener("click", function (){
  var cardHTML = '';
  var randomNumber = 0;
  var randomCard = null;
  // Put the DOMElements within an array so we can access them easily within the loop.
  var cards = [playerCardOne,playerCardTwo,dealerCardOne,dealerCardTwo];

  //Looping so we don't repeat the code 4 times
  for(var i=0; i<4; i++) {
    //Every time you want to show a card, you "shuffle" the deck to pick a new one,
    //instead of picking the same one like you would do before.
    randomNumber = Math.floor(Math.random() * 52);
    randomCard = deck[randomNumber];
    //randomCard = deck[Math.floor(Math.random() * 52)];

    cards[i].innerHTML = '<h1>' + randomCard.cardType + '</h1>' + '<h2>' + randomCard.suitType + '</h2>'
  }
});

document.querySelector（#newGame”）.addEventListener（“单击”，函数（）{
var cardHTML=''；
var随机数=0；
var-randomCard=null；
//将DomeElement放在一个数组中，以便我们可以在循环中轻松访问它们。
var卡=[playerCardOne，playerCardTwo，dealerCardOne，dealerCardTwo]；
//循环，这样我们就不会重复代码4次
对于（var i=0；i你问的问题是错误的。你不能从牌组中随机抽取一张牌。没有逻辑可以阻止你抽取同一张牌两次。相反，你必须随机洗牌，然后总是抽取最上面的牌
发件人：
然后去掉drawRandomCard（）
函数，只需从数组中弹出元素即可
document.querySelector("#newGame").addEventListener("click", function () {
    deck = shuffle(deck);
    playerOneCards.push(deck.pop());
    playerOneCards.push(deck.pop());
    playerTwoCards.push(deck.pop());
    playerTwoCards.push(deck.pop());

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

谢谢你。仍然在努力理解所有的细节…特别是关于连接的情况。现在我需要添加值，并以某种方式让它弹出另一张牌，如果玩家‘点击’哦，顺便说一句，你应该这样抽牌，每张牌只能抽一次。现在你可以抽4次♥答：我也为此添加了一些代码。我遇到了很多麻烦。屏幕共享？谢谢杰夫。我还是一个编程新手。我得到了一些关于21点游戏的帮助，开始了这个游戏。
document.querySelector("#newGame").addEventListener("click", function () {
    deck = shuffle(deck);
    playerOneCards.push(deck.pop());
    playerOneCards.push(deck.pop());
    playerTwoCards.push(deck.pop());
    playerTwoCards.push(deck.pop());

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