ynonp · August 21, 2012 09:07
diff --git a/game.js b/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 Winner = function() {
        var backgrounds = [
            '-8px -5px;',
            '-52px -6px;',
            '-94px -6px;',
            '-139px -5px;'
        ];
        var background_idx = 0;

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

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

            background_idx += 1;

        };

        this.clicked_on = function() {
            score.increase();
            start_new_round();
        };

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

    var Looser = function() {
        backgrounds = [
            '-4px -55px;',
            '-53px -56px',
            '-98px -55px',
            '-143px -55px'
        ];
        var background_idx = 0;


        this.clicked_on = function() {
            score.zero();

            start_new_round();
        };

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

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

            background_idx += 1;

        };


        this.render = function() {
            $('div.container').append('<div class="looser"></div>');
            $('div.container div').last().click( this.clicked_on );

        };
    };

    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);

    });



 }());
diff --git a/index.html b/index.html
 <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
        "http://www.w3.org/TR/html4/loose.dtd">
 <html>
 <head>
    <title>Ultimate RedSpotter (Free)</title>
    <meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" />
    <style>
        div.container {
            width:150px;
            margin:0 auto;
        }

        div.container div {
            background: url('billyblaze.png') no-repeat -139px -5px;
            width: 16px;
            height: 32px;
            float: left;
            margin:20px;
        }

        div.container div.winner {
            background: url('billyblaze.png') no-repeat -139px -5px;
        }

        div.score {
            clear:both;
        }
    </style>
 </head>
 <body>
    <div class="container">
    </div>

    <div class="score">
    </div>
    <script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
    <script src="game.js"></script>
 </body>
 </html>
	/**
	* 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 Winner = function() {
	var backgrounds = [
	'-8px -5px;',
	'-52px -6px;',
	'-94px -6px;',
	'-139px -5px;'
	];
	var background_idx = 0;

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

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

	background_idx += 1;

	};

	this.clicked_on = function() {
	score.increase();
	start_new_round();
	};

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

	var Looser = function() {
	backgrounds = [
	'-4px -55px;',
	'-53px -56px',
	'-98px -55px',
	'-143px -55px'
	];
	var background_idx = 0;


	this.clicked_on = function() {
	score.zero();

	start_new_round();
	};

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

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

	background_idx += 1;

	};


	this.render = function() {
	$('div.container').append('<div class="looser"></div>');
	$('div.container div').last().click( this.clicked_on );

	};
	};

	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);

	});



	}());
	<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
	"http://www.w3.org/TR/html4/loose.dtd">
	<html>
	<head>
	<title>Ultimate RedSpotter (Free)</title>
	<meta name="viewport" content="initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=0" />
	<style>
	div.container {
	width:150px;
	margin:0 auto;
	}

	div.container div {
	background: url('billyblaze.png') no-repeat -139px -5px;
	width: 16px;
	height: 32px;
	float: left;
	margin:20px;
	}

	div.container div.winner {
	background: url('billyblaze.png') no-repeat -139px -5px;
	}

	div.score {
	clear:both;
	}
	</style>
	</head>
	<body>
	<div class="container">
	</div>

	<div class="score">
	</div>
	<script src="http://cdnjs.cloudflare.com/ajax/libs/zepto/1.0rc1/zepto.min.js"></script>
	<script src="game.js"></script>
	</body>
	</html>