Исправление некоторых проблем с переменными в JS и JQ

Question

Исправление некоторых проблем с переменными в JS и JQ

0

Я учусь программировать в javascript, чтобы добавить некоторые функции на свои сайты. Я пытаюсь сделать простую игру в блэкджек в браузере, и теперь я понятия не имею, что происходит.

У меня есть 2 функции: первая функция randomCard() генерирует случайную карту, вторая функция deal() использует цикл for для использования первой функции дважды и сохраняет карты в массив. Я бы предпочел не комбинировать эти функции, потому что в будущем есть другие места, которые будут удобнее держать их отдельно. Я использую функцию сделки на двух объектах, пользователе и дилере с помощью метода.

Теперь вот проблема: когда я записываю эти значения на консоль (не окончательно, просто для тестирования), они одинаковы каждый раз, и я понятия не имею, почему. Но когда я просто регистрирую функцию deal() то они все разные (см. Нижнюю часть скрипта).

Я не могу понять это и буду очень благодарен за помощь, вот и весь мой код.

Я использую jQuery 1.11.0.

<!DOCTYPE html>

<html>
    <head>
        <meta charset="UTF-8">
        <title>Blackjack Game</title>
    </head>
    <body>

        <button type="submit" id="deal">Deal</button>
        <p class="user">
            Your cards: 
        </p>
        <p class="dealer">
            The dealers cards: 
        </p>

        <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
        <script>

        $(document).ready(function() {

            // gives the user and dealer a DOM element
            var $user_cards = $('.user');
            var $dealer_cards = $('.dealer');

            // hides the DOM elements until the game has started
            $($user_cards).hide();
            $($dealer_cards).hide();

            // jQuery var for DOM element to start the game
            var $deal = $('#deal');

            // var to track if the deal button  has been clicked
            var click = 0;

            function randomCard() {
                // random number between 0 and 10
                var j = Math.random() * 10;
                // round that number into a var called card
                var card = Math.round(j);   
                // if card is 0, assign a J Q or K by making a random number again
                if (card === 0) {
                    //another random number
                    var k = Math.random() * 10; 
                    // checks random number and assign J Q or K                     
                    if (k <= 4) {
                        card = 'J';
                    } else if (k <= 7) {
                        card = 'Q';
                    }
                    else {
                        card = 'K';
                    }
                }
                // value of the function is a single card
                return card;
            }

            // empty array to store cards
            var cards = [];

            function deal() {
                // var to start for loop 
                var i = 0;              
                // start for loop 
                for (i; i < 2; i++) {
                    // add a random card to the i^th index of cards
                    cards[i] = randomCard();
                }
                // value fo function is array of two cards
                return cards;
            }

            $($deal).click(function() {

                // make the game start check = 1
                click++;
                // check to see if the game started
                if (click === 1) {
                    // make the button disappear when game has started
                    $($deal).fadeToggle('fast');

                    // makes the player DOM elements appear when game is started
                    $($user_cards).fadeToggle(2000);
                    $($dealer_cards).fadeToggle(2000);
                }

                // make an object for the user and store hand under user.hand
                var user = {
                    hand: deal()
                };

                // make an object for the dealer and store hand under dealer.hand
                var dealer = {
                    hand: deal()
                };

                console.log(user.hand + " " + dealer.hand);
                console.log(deal());
                console.log(deal());
                console.log(deal());
                console.log(deal());
                console.log(deal());
                console.log(deal());


            }); // $deal.click() end

        }); // document.ready() end

        </script>
    </body>
</html>

AlexCawley 30 апр. 2014, в 05:51

Источник

0

К вашему сведению, нет причин делать $($user_cards).hide(); , Вы можете просто сделать $user_cards.hide(); , .hide() - это метод объекта jQuery, а $user_cards уже является объектом jQuery, поэтому вы можете просто использовать его напрямую. Нет необходимости создавать еще один объект jQuery, выполнив $($user_cards) .
jfriend00 30 апр. 2014, в 03:43

Теги:

javascript

jquery

logging

web-applications

2 ответа

0

возможно, это может помочь вам

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Guide/Working_with_Objects#Defining_getters_and_setters

Определение геттеров и сеттеров

Геттер - это метод, который получает значение определенного свойства. Setter - это метод, который устанавливает значение определенного свойства. Вы можете определить геттеры и сеттеры на любом предопределенном основном объекте или определяемом пользователем объекте, который поддерживает добавление новых свойств. Синтаксис для определения геттеров и сеттеров использует синтаксис литерала объекта.

Применяется к вашему коду:

<!DOCTYPE html>

<html>
<head>
    <meta charset="UTF-8">
    <title>Blackjack Game</title>
</head>
<body>

    <button type="submit" id="deal">Deal</button>
    <p class="user">
        Your cards: 
    </p>
    <p class="dealer">
        The dealers cards: 
    </p>

    <script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
    <script>

    $(document).ready(function() {

        // gives the user and dealer a DOM element
        var $user_cards = $('.user');
        var $dealer_cards = $('.dealer');

        // hides the DOM elements until the game has started
        $($user_cards).hide();
        $($dealer_cards).hide();

        // jQuery var for DOM element to start the game
        var $deal = $('#deal');

        // var to track if the deal button  has been clicked
        var click = 0;

        function randomCard() {
            // random number between 0 and 10
            var j = Math.random() * 10;
            // round that number into a var called card
            var card = Math.round(j);   
            // if card is 0, assign a J Q or K by making a random number again
            if (card === 0) {
                //another random number
                var k = Math.random() * 10; 
                // checks random number and assign J Q or K                     
                if (k <= 4) {
                    card = 'J';
                } else if (k <= 7) {
                    card = 'Q';
                }
                else {
                    card = 'K';
                }
            }
            // value of the function is a single card
            return card;
        }

        // empty array to store cards
        var cards = [];

        function deal() {
            // var to start for loop 
            var i = 0;              
            // start for loop 
            for (i; i < 2; i++) {
                // add a random card to the i^th index of cards
                cards[i] = randomCard();
            }
            // value fo function is array of two cards
            return cards;
        }

        $($deal).click(function() {

            // make the game start check = 1
            click++;
            // check to see if the game started
            if (click === 1) {
                // make the button disappear when game has started
                $($deal).fadeToggle('fast');

                // makes the player DOM elements appear when game is started
                $($user_cards).fadeToggle(2000);
                $($dealer_cards).fadeToggle(2000);
            }

            // make an object for the user and store hand under user.hand
            var user = {
                //hand: function() { return deal() }
                get hand() { return deal(); },
            };

            // make an object for the dealer and store hand under dealer.hand
            var dealer = {
                //hand: function() { return deal() }
                get hand() { return deal(); },
            };

            console.log(user.hand + " " + dealer.hand);
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());
            console.log(deal());


        }); // $deal.click() end

    }); // document.ready() end

    </script>
</body>

freddycg2000 30 апр. 2014, в 01:21

Ещё вопросы

К вашему сведению, нет причин делать $($user_cards).hide(); , Вы можете просто сделать $user_cards.hide(); , .hide() - это метод объекта jQuery, а $user_cards уже является объектом jQuery, поэтому вы можете просто использовать его напрямую. Нет необходимости создавать еще один объект jQuery, выполнив $($user_cards) .

Jeremy J Starcher · Accepted Answer · 2014-04-30T01-56-00.000Z

Хорошие новости и плохие новости:

Хорошие новости

Ваш код действительно работает.

Если вы замените

console.log(deal());

с

console.log(JSON.stringify(deal()));

то вы получите ожидаемый результат.

Плохие новости

Консоль Chrome "живая", то есть показывает текущее значение объекта, а не значение на момент его регистрации.

(Если вы спросите меня, я бы назвал это ошибкой, но мой голос не учитывается.)

У вас есть два решения.

Решение 1

Используйте console.log и stringify как я сделал.

Решение 2

Сделайте deal возвратом нового и другого объекта, слегка переместив код.

function deal() {
  // MOVE THESE LINES INSIDE THE FUNCTION.
  // empty array to store cards
  var cards = [];

  // var to start for loop 
  var i = 0;              
  // start for loop 
  for (i; i < 2; i++) {
    // add a random card to the i^th index of cards
    cards[i] = randomCard();
  }
  // value fo function is array of two cards
  return cards;
}