Question

我正在学习使用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>

Answer 1

好消息和坏消息：

好消息

您的代码确实有效。

如果您更换

console.log(deal());

与

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

然后你会得到你期望的结果。

坏消息

Chrome控制台是＆＃34;直播＆＃34; - 表示它显示对象的当前值 - 而不是记录时的值。

（如果你问我，我称之为 bug - 但我的投票并不算数。）

你有两个解决方案。

解决方案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;
}

Answer 2

也许这可以帮到你

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

定义getter和setter

getter是一种获取特定属性值的方法。 setter是一种设置特定属性值的方法。您可以在任何预定义的核心对象或支持添加新属性的用户定义对象上定义getter和setter。定义getter和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>

修复JS和JQ中的一些变量问题

2 个答案: