战争卡游戏错误

Question

目前这是该网站的原样。 https://[account_id].signin.aws.amazon.com/console

我正在制作战争卡片游戏。单击“交易”按钮时，每个玩家将获得26张牌。每次点击“播放”按钮，每个玩家翻转一张新卡。 “战争”的胜利者获得了两张牌的分值。

我的“新玩家”按钮可以正常工作，但是我无法弄清楚我做错了什么来将卡片交给玩家并在获胜时为他们分配点值。

$(document).ready(function(){

    var askName;
    var pName;
    var pName2;
     
    var askName = prompt("Please enter your name.","<name goes here>");
    
    if (askName!= null) {
        document.getElementById("pName").innerHTML = askName
        document.getElementById("pName2").innerHTML = askName
    }

    var used_cards = new Array();
    
    function card(name,suit,value) {
        this.name = name;
        this.suit = suit;
        this.value = value;
    } 
    
    var deck = [
        new card('Ace', 'Hearts', 12),
        new card('Two', 'Hearts', 22),
        new card('Three', 'Hearts', 32),
        new card('Four', 'Hearts', 42),
        new card('Five', 'Hearts', 52),
        new card('Six', 'Hearts', 62),
        new card('Seven', 'Hearts', 72),
        new card('Eight', 'Hearts', 82),
        new card('Nine', 'Hearts', 92),
        new card('Ten', 'Hearts', 102),
        new card('Jack', 'Hearts', 112),
        new card('Queen', 'Hearts', 122),
        new card('King', 'Hearts', 132),
        new card('Ace', 'Diamonds', 11),
        new card('Two', 'Diamonds', 21),
        new card('Three', 'Diamonds', 31),
        new card('Four', 'Diamonds', 41),
        new card('Five', 'Diamonds', 51),
        new card('Six', 'Diamonds', 61),
        new card('Seven', 'Diamonds', 71),
        new card('Eight', 'Diamonds', 81),
        new card('Nine', 'Diamonds', 91),
        new card('Ten', 'Diamonds', 101),
        new card('Jack', 'Diamonds', 111),
        new card('Queen', 'Diamonds', 121),
        new card('King', 'Diamonds', 131),
        new card('Ace', 'Clubs', 13),
        new card('Two', 'Clubs', 23),
        new card('Three', 'Clubs', 33),
        new card('Four', 'Clubs', 43),
        new card('Five', 'Clubs', 53),
        new card('Six', 'Clubs', 63),
        new card('Seven', 'Clubs', 73),
        new card('Eight', 'Clubs', 83),
        new card('Nine', 'Clubs', 93),
        new card('Ten', 'Clubs', 103),
        new card('Jack', 'Clubs', 113),
        new card('Queen', 'Clubs', 123),
        new card('King', 'Clubs', 133),
        new card('Ace', 'Spades', 14),
        new card('Two', 'Spades', 24),
        new card('Three', 'Spades', 34),
        new card('Four', 'Spades', 44),
        new card('Five', 'Spades', 54),
        new card('Six', 'Spades', 64),
        new card('Seven', 'Spades', 74),
        new card('Eight', 'Spades', 84),
        new card('Nine', 'Spades', 94),
        new card('Ten', 'Spades', 104),
        new card('Jack', 'Spades', 114),
        new card('Queen', 'Spades', 124),
        new card('King', 'Spades', 134)
    ];
    
    $("#btnDeal").click( function(){
        deal();
        $(this).toggle();
    });
    
    var hand = {
        cards : new Array(),
        current_total : 0,
        
        sumCardTotal: function(){
            this.current_total = 0;
            for(var i=0;i<this.cards.length;i++){
                var c = this.cards[i];
                this.current_total += c.value;
            }
            $("#hdrTotal").html("Total: " + this.current_total );
        }
    };
    
    function getRandom(num){
        var my_num = Math.floor(Math.random()*num);
        return my_num;
    }
    
    function deal(){
        for(var i=0;i<2;i++){
            hit();
        }
    }
    
    function hit(){
        var good_card = false;
        do{
            var index = getRandom(134);
            if( !$.inArray(index, used_cards ) > -1 ){
                good_card = true;
                var c = deck[ index ];
                used_cards[used_cards.length] = index;
                hand.cards[hand.cards.length] = c;    
                
                var $d = $("<div>");
                $d.addClass("current_hand")
                  .appendTo("#my_hand");
                          
                $("#PlayerCards").attr('alt', c.name + ' of ' + c.suit )
                          .attr('title', c.name + ' of ' + c.suit )
                          .attr('src', 'images/cards/' + c.suit + '/' + c.name + '.jpg' )
                          .appendTo($d)
                          .fadeOut('slow')
                          .fadeIn('slow');
            }
        } while(!good_card);
        good_card = false;      
        hand.sumCardTotal();
    }
    
    $("#btnRestart").click( function(){
        $("#result").toggle();
        $(this).toggle();
        $("#my_hand").empty();
        $("#hdrResult").html('');
        $("#imgResult").attr('src','images/check.png');
        
        used_cards.length = 0;
        hand.cards.length = 0;
        hand.current_total = 0;
        
        $("#btnDeal").toggle()
                     .trigger('click');
    });
});

body {
    background-color: green;
}

#main {
    width: 850px;
    margin: 0 auto;
}

h1 {
    color: coral;
}

#left {
    float: left;
    width: 600px;
    height: 500px;
}

#pHand, #cHand {
    width: 299px;
    height: 500px;
    color: coral;
}

#pHand .pName, #cHand h2 {
    padding-left: 20px;
}

#pHand {
    float: left;
    background-color: bisque;
    border-right: 2px dashed black;
}

#cHand {
    float: right;
    background-color:  bisque;
}

#right {
    float: right;
    width: 225px;
    height: 555px;
    background-color: green;
}

#right h2, #right p {
    display: inline-block;
    color: coral;
}

#right p {
    font-size: 32px;
    padding-left: 5px;
}

#right.pName, #cName {
}

#but {
    clear: both;
    height: 40px;
    padding-top: 15px;
    padding-left: 20px;
    background-color: coral;
}

#PlayerCards {
    padding-left: 50px;
}

#SlickCards {
    padding-left: 50px;
}

<!DOCTYPE html> 
    <html> 
    <head> 
        <title>Card Game</title> 
    </head> 
    <body>
        <div id="main">
            <h1> Card Game </h1>
        <div id="left">
             
        <div id="pHand">
            <h2 id="pName" class="pName" type ="text">Player</h2> 
            <img id="PlayerCards" src="https://i.stack.imgur.com/p8IKJ.png" alt="player" width="200" height="350">
        </div>
        <div id="cHand">
            <h2>Slick</h2>
            <img id="SlickCards" src="https://i.stack.imgur.com/f0d9c.png" alt="slick" width="200" height="350">
        </div>
        <div id="buttons">
            <button id="newplayer" onclick="myFunction()">New Player</button>
            <button id="btndeal" onclick="Function1()">Deal</button>
            <button id="btnplay">Play</button>
        </div>
    </div>  
    <div id='right'>
        <!-- Enter the number of remaining cards in the 'Players' hand 
        in the p tag below--> 
        <p id="cardCount">Card Count: <p id="count"></p></p><br />
        <h2 id="pName2" class="pName">Player</h2>
        <!-- Using jQuery insert the current 'Player' score in the p tag 
             below -->
        <p id="pScore" ></p><br />
        <h2 id="cName">Slick</h2>
        <!-- Using jQuery insert the current 'Slick' score in the p tag 
             below -->
        <p id="cScore"></p>
        <!-- add and style winning message in the 
             following div -->
        <div id="win">  </div>
    </div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
    function myFunction() {
        location.reload();
    }

    function Function1() {
        document.getElementById("count").innerHTML = "26";
        document.getElementById("pScore").innerHTML = "0";
        document.getElementById("cScore").innerHTML = "0";
    }
</script>
</body>
</html>