<?php 

(function($) {

    $.PlayCards = {};

    

    $.PlayCards.defaults = {

        Cards: [

            { "card":"2 de Coeur", "value":2 },

            { "card":"3 de Coeur", "value":3 },

            { "card":"4 de Coeur", "value":4 },

            { "card":"5 de Coeur", "value":5 },

            { "card":"6 de Coeur", "value":6 },

            { "card":"7 de Coeur", "value":7 },

            { "card":"8 de Coeur", "value":8 },

            { "card":"9 de Coeur", "value":9 },

            { "card":"10 de Coeur", "value":10 },

            { "card":"Valet de Coeur", "value":11 },

            { "card":"Dame de Coeur", "value":12 },

            { "card":"Roi de Coeur", "value":13 },

            { "card":"As de Coeur", "value":15 },

            { "card":"2 de Carreau", "value":2 },

            { "card":"3 de Carreau", "value":3 },

            { "card":"4 de Carreau", "value":4 },

            { "card":"5 de Carreau", "value":5 },

            { "card":"6 de Carreau", "value":6 },

            { "card":"7 de Carreau", "value":7 },

            { "card":"8 de Carreau", "value":8 },

            { "card":"9 de Carreau", "value":9 },

            { "card":"10 de Carreau", "value":10 },

            { "card":"Valet de Carreau", "value":11 },

            { "card":"Dame de Carreau", "value":12 },

            { "card":"Roi de Carreau", "value":13 },

            { "card":"As de Carreau", "value":15 },

            { "card":"2 de Trèfle", "value":2 },

            { "card":"3 de Trèfle", "value":3 },

            { "card":"4 de Trèfle", "value":4 },

            { "card":"5 de Trèfle", "value":5 },

            { "card":"6 de Trèfle", "value":6 },

            { "card":"7 de Trèfle", "value":7 },

            { "card":"8 de Trèfle", "value":8 },

            { "card":"9 de Trèfle", "value":9 },

            { "card":"10 de Trèfle", "value":10 },

            { "card":"Valet de Trèfle", "value":11 },

            { "card":"Dame de Trèfle", "value":12 },

            { "card":"Roi de Trèfle", "value":13 },

            { "card":"As de Trèfle", "value":15 },

            { "card":"2 de Pique", "value":2 },

            { "card":"3 de Pique", "value":3 },

            { "card":"4 de Pique", "value":4 },

            { "card":"5 de Pique", "value":5 },

            { "card":"6 de Pique", "value":6 },

            { "card":"7 de Pique", "value":7 },

            { "card":"8 de Pique", "value":8 },

            { "card":"9 de Pique", "value":9 },

            { "card":"10 de Pique", "value":10 },

            { "card":"Valet de Pique", "value":11 },

            { "card":"Dame de Pique", "value":12 },

            { "card":"Roi de Pique", "value":13 },

            { "card":"As de Pique", "value":15 },

            { "card":"Joker", "value":20 },

            { "card":"Joker", "value":20 }

        ]

    };

    

    $.fn.extend({

        PlayCards: function($settings) {

            // Ajout défauts et options passées    

            $settings = $.extend({}, $.PlayCards.defaults, $settings);



            return this.each(function() {

                var $this = $(this);

                

                createPlayField($settings, $this);

                

                // Number of card submitted

                $('.debug ul', $this).prepend('<li>Nombre de Cartes : ' + $settings.Cards.length + '</li>');

    

                // Bind a trigger on begin game

                $('.ControlDeck .newgame', $this).click(function(){

                    BeginGame($settings, $this);

                });

            });

        }

    });

    

    function createPlayField($settings, $this) {

        if( $this.children().length > 0 )

            return;

            

        // Create Command Menu

        $this.append('<div class="ControlDeck">\

                <input type="button" class="newgame" value="Commencer une partie" />\

                <input type="button" class="resolveturn" value="Jouer le tour" disabled="true" />\

                </div>');



        // create the players Decks

        $this.append('<div class="P1Deck"><ul></ul></div><div class="P2Deck"><ul></ul></div>');



        // Create Debug     

        $this.append('<div class="debug"><ul><li>PlayField initialisé</li></ul></div>');

    }

    

    function BeginGame($settings, $this) {

        $settings = $.extend({ "Turn": 0, "Stack": [], "P1Cards": [], "P2Cards": [] }, $settings);

        

        // On vide le terrain de jeu.

        $('.P1Deck ul', $this).html('<li><h5>Bienvenue Joueur 1</h5></li>');

        $('.P2Deck ul', $this).html('<li><h5>Bienvenue Joueur 2</h5></li>');

        

        // On mélange les cartes

        RandomizeCards($settings.Cards);

        

        // On distribue les cartes entre les 2 joueurs

        for(var i=0; i < $settings.Cards.length; i++)

        {

            if (i%2 == 1)

                $settings.P1Cards.push($settings.Cards[i]);

            else

                $settings.P2Cards.push($settings.Cards[i]);                

        }

        

        // On recherche si le bouton de résolution des tours est présent.

        // Supression et recréation plus rapide que bind/unbind

        if($('.ControlDeck .resolveturn', $this).length > 0)

            $('.ControlDeck .resolveturn', $this).remove();

        

        // On récréé un nouveau bouton avec les bons $settings en click

        $('.ControlDeck', $this).append('<input type="button" class="resolveturn" value="Jouer le tour" />')

            .find('.resolveturn')

            .click(function(){

                ResolveTurn($settings, $this);

            });

        

        $('.debug ul', $this).html('<li>Démarrage d\'une nouvelle partie</li>');

    }

    

    function ResolveTurn($settings, $this) {

        $settings.Turn++;

        

        // Tirage carte du joueur 1

        var P1card = $settings.P1Cards.shift();

        $('.P1Deck ul', $this).html('<li>Vous tirez : <b>'+ P1card.card +'</b></li>');

        

        // Tirage carte du joueur 2

        var P2card = $settings.P2Cards.shift();

        $('.P2Deck ul', $this).html('<li>Vous tirez : <b>'+ P2card.card +'</b></li>');

        

        if($settings.Stack.length == 0)

        {

            // Joueur 1 a une plus grande carte

            if ( P1card.value > P2card.value )

            {

                $settings.P1Cards.push(P1card, P2card);

                $('.P1Deck ul', $this).append('<li>Vous gagnez : \

                    <b>'+ P2card.card +'</b> grace à <b>'+ P1card.card +'</b></li>');

                $('.P2Deck ul', $this).append('<li>Vous perdez : \

                    <b>'+ P2card.card +'</b> face à <b>'+ P1card.card +'</b></li>');    

            }

            // Joueur 2 a une plus grande carte

            else if ( P1card.value < P2card.value )

            {

                $settings.P2Cards.push(P1card, P2card);

                $('.P1Deck ul', $this).append('<li>Vous perdez : \

                    <b>'+ P1card.card +'</b> face à <b>'+ P2card.card +'</b></li>');

                $('.P2Deck ul', $this).append('<li>Vous gagnez : \

                    <b>'+ P1card.card +'</b> grâce à <b>'+ P2card.card +'</b></li>');

            }

            // Joueur ont tous les deux la même carte

            else

            {

                $settings.Stack.push(P1card, P2card);

                ResolveTurn($settings, $this);

                return;

            }

        }

        // Descartes sont déjàs placées dans le pot...

        if($settings.Stack.length > 0)

        {

            // Joueur 1 a une plus grande carte

            if ( P1card.value > P2card.value )

            {

                $settings.P1Cards.push(P1card, P2card);

                for(var i=0; i < $settings.Stack.length; i++)

                    $settings.P1Cards.push($settings.Stack.shift());



                $('.P1Deck ul', $this).append('<li>Vous gagnez : \

                    <b>'+ P2card.card +'</b> grace à <b>'+ P1card.card +'</b>, \

                    plus '+ $settings.Stack.length +' cartes d\'égalitées.</li>');

                $('.P2Deck ul', $this).append('<li>Vous perdez : \

                    <b>'+ P2card.card +'</b> face à <b>'+ P1card.card +'</b>, \

                    plus '+ $settings.Stack.length +' cartes d\'égalitées.</li>');

                    

                $settings.Stack = [];    

            }

            // Joueur 2 a une plus grande carte

            else if ( P1card.value < P2card.value )

            {

                $settings.P2Cards.push(P1card, P2card);

                for(var i=0; i < $settings.Stack.length; i++)

                    $settings.P1Cards.push($settings.Stack.shift());



                $('.P1Deck ul', $this).append('<li>Vous perdez : \

                    <b>'+ P1card.card +'</b> face à <b>'+ P2card.card +'</b>, \

                    plus '+ $settings.Stack.length +' cartes d\'égalitées.</li>');

                $('.P2Deck ul', $this).append('<li>Vous gagnez : \

                    <b>'+ P1card.card +'</b> grâce à <b>'+ P2card.card +'</b>, \

                    plus '+ $settings.Stack.length +' cartes d\'égalitées.</li>');

                    

                $settings.Stack = [];

            }

            // Joueur ont tous les deux la même carte

            else

            {

                $settings.Stack.push(P1card, P2card);

                ResolveTurn($settings, $this);

                return;

            }

        }

        

        $('.P1Deck ul', $this).append('<li>Il vous reste <b>'+ $settings.P1Cards.length +'</b> cartes</li>');

        $('.P2Deck ul', $this).append('<li>Il vous reste <b>'+ $settings.P2Cards.length +'</b> cartes</li>');

        

        // Un joueur a t-il perdu ?

        if( $settings.P1Cards.length == 0 || $settings.P2Cards.length == 0 )

        {

            GameOver($settings, $this);

        }

        

        var debug_return = '<li>Tour '+$settings.Turn+'\

            [ P1 => ( '+ $settings.P1Cards.length +' cartes /\

            '+GetPlayerPoints($settings.P1Cards)+' points ) | \

            P2 => ( '+ $settings.P2Cards.length +' cartes / \

            '+GetPlayerPoints($settings.P2Cards)+' points ) ]</li>';

        

        $('.debug ul', $this).prepend(debug_return);

        

    }

    

    function GameOver($settings, $this) {

        // Suppression du bouton de resolution du tour.

        $('.ControlDeck .resolveturn', $this).attr('disabled', true);

        

        // Joueur 1 a perdu

        if( $settings.P1Cards.length == 0 )

        {

            $('.P1Deck ul', $this).append('<li><h5>Vous avez perdu en '+$settings.Turn+' tours</h5></li>');

            $('.P2Deck ul', $this).append('<li><h5>Vous avez gagné en '+$settings.Turn+' tours</h5></li>');                

        }

        // Joueur 2 a perdu

        if( $settings.P2Cards.length == 0 )

        {

            $('.P1Deck ul', $this).append('<li><h5>Vous avez gagné en '+$settings.Turn+' tours</h5></li>');

            $('.P2Deck ul', $this).append('<li><h5>Vous avez perdu en '+$settings.Turn+' tours</h5></li>');                

        }            

        

        $('.debug ul', $this).prepend('<li>Partie Terminée</li>');

    }

    

    function GetPlayerPoints($PlayerCards) {

        var points = 0;

        

        for(var i=0; i < $PlayerCards.length; i++)

            points += $PlayerCards[i].value;

        

        return points;

    }

    

    function RandomizeCards ( myArray ) {

        // http://sedition.com/perl/javascript-fy.html

        var i = myArray.length;

        if ( i == 0 ) return false;

          while ( --i ) {

            var j = Math.floor( Math.random() * ( i + 1 ) );

            var tempi = myArray[i];

            var tempj = myArray[j];

            myArray[i] = tempj;

            myArray[j] = tempi;

       }

    }

})(jQuery);



$(document).ready(function(){

    $('#Game').PlayCards();

});



<div id="Game"></div>