game.js

/**
 * Created with JetBrains WebStorm.
 * User: ynonperek
 * Date: 8/21/12
 * Time: 9:36 AM
 * To change this template use File | Settings | File Templates.
 */
(function() {
    var Score = function() {
        this.value = 0;

        this.increase = function() {
            this.value += 1;
        };

        this.zero = function() {
            this.value = 0;
        };

        this.render = function() {
            $('.score').html('Player score: <span>' + this.value + '</span>')
        };
    };

    var players = [];
    var score   = new Score();


    var Player = function(opts) {
        var on_click       = opts.on_click;
        var backgrounds    = opts.backgrounds;
        var background_idx = 0;
        var cls            = opts.cls;

        this.update = function() {
            var next_image =
                backgrounds[background_idx % backgrounds.length];

            $('div.' + cls).css('background-position', next_image);

            background_idx += 1;
        };

        this.render = function() {
            $('div.container').append('<div class="' + cls + '"></div>');
            $('div.container div').last().click( on_click );
        };

    };

    var Winner = function() {
        return new Player({
            cls: 'winner',
            on_click: function() {
                score.increase();
                start_new_round();
            },
            backgrounds: [
                '-8px -5px;',
                '-52px -6px;',
                '-94px -6px;',
                '-139px -5px;'
            ]
        });
    };


    var Looser = function() {
        return new Player({
            cls: "looser",
            backgrounds : [
                '-4px -55px;',
                '-53px -56px',
                '-98px -55px',
                '-143px -55px'
            ],
            on_click: function() {
                score.zero();
                start_new_round();
            }
        });
    };

    /////////////////////////////////////

    var start_new_round = function() {
        players = [];
        $('div.container').html('');

        var winning_idx = Math.floor( Math.random() * 4 );

        for ( var i=0; i < 4; i++ ) {
            var next;
            if ( i === winning_idx ) {
                next = new Winner();
            } else {
                next = new Looser();
            }

            players.push( next );
            next.render();
        }



        score.render();

    };

    // On page load
    $(function() {
        start_new_round();


        setInterval(function() {
            for ( var i=0; i < players.length; i++ ) {
                players[i].update();
            }
        }, 200);
    });



}());