每日奖励卡片游戏

Question

我目前正在研究一个想法，即每天都可以选择翻转3张牌中的1张。每张卡都将获得一个随机（从获取的mysql数据库中）奖励，该奖励将由％选择。所以奖励每个人有不同的机会获得它。

目前，我已经准备好了每张卡3张，可以独立翻转，但我无法让'锁定'正常工作。锁定我的意思是在选择1张牌后，你不能选择另一张牌。此外，Ajax点击部分仍未合并，但我可以管理那个。

所以我的问题是，我怎样才能让“随机”奖励卡工作？我怎样才能使它每回合只能挑一张卡？

感谢您的帮助！

http://whatameowful.co.uk/test.php

cards.php

<div id="cards">
                <div id="card1" class="card"><span data-value='A' data-title='A'></span></div>
                <div id="card2" class="card"><span data-value='B' data-title='B'></span></span></div>
                <div id="card3" class="card"><span data-value='C' data-title='C'></span></div>
            </div>

cards.css

        /*single card*/
    .card{
    width: 230px;
    height: 356px;
    border-radius: 10px;
    float:left;
    margin-right:10px;
    background-color: white;
    background-image: url('../img/cards/playing-card-back.jpg');
    background-size: contain;
    background-repeat: no-repeat;
    cursor: pointer;
    text-align: center;

    /*all transition to take 1s */
    transition:all 1s;
    -ms-transition:all 1s;
    -webkit-transition:all 1s;
    -moz-transition:all 1s;

    /*set card transform origin to 20% from x-axis and 80% from y-axis */
    transform-origin: 20% 80%;
    -ms-transform-origin: 20% 80%;
    -webikit-transform-origin: 20% 80%;
    -moz-transform-origin: 20% 80%;

    /*make card non selectable*/
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    }

    /*red colored card*/
    .card.red{
    color:red;
    }

    /*
    while opening a card, again shift transform origin 
    to vertical and horizontal center axis 
    to give an actual flip effect
    */
    .card.open{
    transform-origin: center center !important;
    -ms-transform-origin: center center !important;
    -webikit-transform-origin: center center !important;
    -moz-transform-origin: center center !important;
    -webkit-transform: rotateY(180deg) !important;
    transform:  rotateY( 180deg ) !important;
    }

    /*to show card value */
    /*rotate the text to 180deg so the text is not mirrored when card is flipped*/
    /* opened card text*/
    .card.opened span:after{
    border: 1px solid #ddd;
    border-radius: 10px;
    width: 230px;
    height: 356px;
    content:attr(data-title);
    transform: rotateY( 180deg );
    font-size: 40px;
    display: block;
    }

    /*hide background from open card */
    .card.opened{   
    background-image: none;
    }



    button{
        cursor: pointer;
    }

cards.js

var total_cards = $('.card').length; //any number of cards will work
var card_spacing = 10;

    function animate_card(deg){
        var start = 0;
        var end = deg;
        var step = deg/total_cards;
        var angle = 0;
        $('.card').each(function(){
            $(this).css({
                        'transform' : 'rotate('+ angle +'deg)',
                        '-webkit-transform' : 'rotate('+ angle +'deg)',
                        '-moz-transform' : 'rotate('+ angle +'deg)',
                        '-ms-transform' : 'rotate('+ angle +'deg)',
            });
            angle += step;
        });
    }

    $(document).ready(function(){
        function close_all_cards(){
            $('.card').removeClass('open');
            setTimeout(function(){
                $('.card').removeClass('opened');
            },300); 
        }

            $('.card').click(function(){
                close_all_cards();
                var card = $(this);
                card.toggleClass('open');
                setTimeout(function(){
                    card.toggleClass('opened');
                },300);
            });
    });