locked
How to deal a card with a delay of 1.5 seconds ? RRS feed

  • Question

  • User521171331 posted

    Hi, I have developed this simple BlackJack game with Javascript. How do I make the card dealt with a delay of 1.5 seconds? I tried setTimeout and promises but with no success. 

    Here is the link of my program - https://ngaisteve1.github.io/BlackJackJS/

    function makeCardPlayer(_card) {
        setTimeout(function () {
            // .card is created in the template card css class
            var card = $(".card.templatePlayer").clone();
    
            if (!isDebug) {
                card.removeClass("templatePlayer");
            }
    
            // .cardFace is created in the template card css class
            // It will search for this css class and add the content aka innerHTML
            card.find(".playerCardFace").html(_card.face);
    
            // .suit is created in the template card css class
            // It will search for this css class and add the content aka innerHTML
            card.find(".playerCardSuit").html("&" + _card.suit + ";");
            // ♠ -> ♠, ♣ -> ♣, ♥ -> ♥, ♦ -> ♦
            // more char, https://www.w3schools.com/charsets/ref_utf_symbols.asp
    
            // hearts and diamonds are red color. otherwise, default black color.
            if (_card.suit === "hearts" || _card.suit === "diams") {
                card.addClass("red");
            }
    
            // Append generated card to the container
            $("#cardContainerPlayer").append(card);
        }, DELAY);
    
    }

    Thursday, June 27, 2019 6:55 AM

Answers

  • User839733648 posted

    Hi ngaisteve1,

    Since the card is rendering from the same timeline, the card will appear at the same time setting the same interval.

    I suggest you should try to set the interval  to be 1.5 seconds apart, like:

    setTimeout(function () {
            dealOneCardToPlayer("", false);
        }, 1500);
    
        setTimeout(function () {
            dealOneCardToDealer(false, false);
        }, 3000);
    
        setTimeout(function () {
            dealOneCardToPlayer("", false);
        }, 4500);
    
        // true for hole card
        setTimeout(function () {
            dealOneCardToDealer(true, false);
    
            showGameButtons(true);
            checkEndGame1();
            checkGameOver();
            debugger
            getDeckCardCount();
        }, 6000);

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 28, 2019 9:41 AM

All replies

  • User839733648 posted

    Hi ngaisteve1,

    According to your description and code, I'm not so clear about your requirement.

    I've checked your js code and find the makeCardPlayer is related to the dealOneCardToPlayer() function.

    The dealOneCardToPlayer() function is related to the button "Deal a card to Player" in the div which is hidden.

                <input type='button' value='Deal a card to Player' onclick='dealOneCardToPlayer();' />

    I've tried to show the div and test the click function, but there shows some errors like some paramater "face" is not defined.I'm not sure about the definition of the parameter.

    How do I make the card dealt with a delay of 1.5 seconds?

    According to my understanding, you may want to make the card delay when click the deal button, so I've tried to add the settimeout function to the deal() function.

    You will see that the card will delay appering after 5 seconds(for testing, I set the time to see the effect).

    const deal = () => {
    
        init(); // Can be improved by continue to use the remaining card in the deck
    
        newDeck();
    
        // Option: to burn first card before deal a card
        // to the first player
        burnOneCard;
    
        // dealOneCardToPlayer()
        //     .then(dealOneCardToDealer)
        //     .then(dealOneCardToPlayer)
        //     .then(dealOneCardToDealer(true));
    
        dealOneCardToPlayer("", false);
        dealOneCardToDealer(false, false);
        dealOneCardToPlayer("", false);
    
        // true for hole card
        setTimeout(function () {
    
            dealOneCardToDealer(true, false);
    
            showGameButtons(true);
            checkEndGame1();
            checkGameOver();
            getDeckCardCount();
    
        }, 5000);
        
    }

    result:

    Best Regards,

    Jenifer

    Friday, June 28, 2019 3:38 AM
  • User521171331 posted

    But what I want is each card to have a delay of 1.5 seconds. I tried with below code but doesn't work

    setTimeout(function () {
            dealOneCardToPlayer("", false);
        }, 1500);
    
        setTimeout(function () {
            dealOneCardToDealer(false, false);
        }, 1500);
    
        setTimeout(function () {
            dealOneCardToPlayer("", false);
        }, 1500);
    
        // true for hole card
        setTimeout(function () {
            dealOneCardToDealer(true, false);
    
            showGameButtons(true);
            checkEndGame1();
            checkGameOver();
            debugger
            getDeckCardCount();
        }, 1500);

    Friday, June 28, 2019 8:05 AM
  • User839733648 posted

    Hi ngaisteve1,

    Since the card is rendering from the same timeline, the card will appear at the same time setting the same interval.

    I suggest you should try to set the interval  to be 1.5 seconds apart, like:

    setTimeout(function () {
            dealOneCardToPlayer("", false);
        }, 1500);
    
        setTimeout(function () {
            dealOneCardToDealer(false, false);
        }, 3000);
    
        setTimeout(function () {
            dealOneCardToPlayer("", false);
        }, 4500);
    
        // true for hole card
        setTimeout(function () {
            dealOneCardToDealer(true, false);
    
            showGameButtons(true);
            checkEndGame1();
            checkGameOver();
            debugger
            getDeckCardCount();
        }, 6000);

    Best Regards,

    Jenifer

    • Marked as answer by Anonymous Thursday, October 7, 2021 12:00 AM
    Friday, June 28, 2019 9:41 AM
  • User521171331 posted

    It works . thanks.

    Friday, June 28, 2019 9:57 AM