game.js

/**
משחקון מצא את היוצא דופן לסמארטפון

במשחק מוצגים על המסך 4 עצמים, והמשתמש צריך לבחור את היוצא דופן.
בנוסף, על המסך מוצג גם לוח תוצאות.

הקוד מתאר גישה מונחית עצמים לבעייה. אנו מגדירים אובייקט לכל אחד מהאלמנטים הפעילים שצריכים להופיע על המסך: 
דמות שצריך ללחוץ עליה כדי לנצח
3 דמויות שלחיצה עליהן גורמת להפסד
פאנל של תוצאות

כל אחד מהאובייקטים מנהל את עצמו, ובמידת הצורך מעדכן את האובייקטים האחרים באירועים.
בנוסף, לכל אחד מהאובייקטים יש יכולת לצייר את עצמו על המסך - פונקציית render
וגם להחליף את התמונה לצורך אנימציה - פונקציית update 
 */
 
 
(function() {
/**
האובייקט הראשון בתוכנית הוא לוח הנקודות. הלוח מחזיק את הניקוד הנוכחי, 
ומספק פונקציות להוסיף או לאפס ניקוד, או לצייר את עצמו על המסך

כאן אנו עדיין לא יוצרים את לוח הנקודות, אלא רק מגדירים תבנית (פונקצייה) שתוכל ליצור
לוחות נקודות בהמשך התוכנית. היצירה עצמה תתבצע באמצעות קריאה ל 
new Score()
בהמשך
*/

    var Score = function() {
        this.value = 0;

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

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

		/**
		כשלוח נקודות מצייר את עצמו על המסך הוא מחפש אלמנט עם קלאס 
		score
		ותחתיו רושם שורת טקסט הכוללת את הניקוד הנוכחי
		*/
        this.render = function() {
            $('.score').html('Player score: <span>' + this.value + '</span>')
        };
    };


	//////////////////////////////////////////////////////
	
	/**
	הגדרת המשתנים הגלובאליים:
	רשימת השחקנים מוגדרת להיות מערך ריק,
	לוח הנקודות מוגדר להיות אובייקט חדש מסוג Score
	*/
	
    var players = [];
    var score   = new Score();
	
	//////////////////////////////////////////////////////


	/**
	העצמים הבאים שיופיעו הם השחקנים: מנצח ומפסיד
	הקוד של שניהם די דומה.
	
	כאן יש לנו שני דברים מעניינים - גם אנימציה, וגם יכולת להציג את עצמו על המסך
	בנוסף אליהם, שחקן מנצח גם תומך בלחיצות ולכן צריך לזהות כשלוחצים עליו כדי להתחיל סיבוב 
	משחק חדש.
	
	כל החלק הראשון מוקדש לאנימציה. אנו מגדירים מערך של תמונות רקע
	ובכל פעימת שעות מחליפים את תמונת הרקע - זה מה שמייצר את האנימציה.
	הפונקצייה update נקראת מהקוד החיצוני. כך כל האנימציות במשחק מסונכרנות
	במקום לנהל מספר שעונים במקביל.

	פונקציית render שמציגה את השחקן על המסך עושה עוד דבר בנוסף להצגה - 
	היא קושרת פונקציית טיפול בלחיצה.
	כך כשמישהו ילחץ על הדמות יקרא הקוד בפונקציה
	clicked_on
	
	*/


    var Winner = function() {
        var backgrounds = [
            '-8px -5px;',
            '-52px -6px;',
            '-94px -6px;',
            '-139px -5px;'
        ];
        var background_idx = 0;

        this.update = function() {
		// Choose the next image from the array 
		// ( % means modulus, so the numbers go: 0, 1, 2, 3, 0, 1, 2, 3, 0, 1, 2, 3, ... )
            var next_image =
                backgrounds[background_idx % backgrounds.length];

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

			// and increase the index
            background_idx += 1;

        };

		// When the winner is clicked on, we increase the score and start a new round
        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;

		// When the looser is clicked on, we zero the score and start a new round
        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 );

        };
    };

	/////////////////////////////////////////////////////
	/**
	
	החלק האחרון בתוכנית הוא הקוד הראשי שמפעיל את התוכנית
	הפונקציית start_new_round
	
	פונקצייה זו נקראת בתחילת המשחק, וגם בין כל סיבוב. היא מאפסת את לוח המשחק,
	מגרילה 4 שחקנים חדשים (3 מפסידים ומנצח)
	ומציגה אותם על לוח המשחק החדש באמצעות קריאה ל render
	
	בנוסף היא גם מוסיפה את כל השחקנים למערך כדי שנוכל להפעיל עליהם את האנימציה
	*/
	
    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() {
	
	/*
	כשהעמוד נטען, מתחילים סיבוב חדש וגם מתחילים שעון לאנימציה
	בכל 200 מילי שניות הקוד עובר על כל השחקנים במערך ומפעיל את פונקציית
	update
	שלהם כדי שהתמונה על כל שחקן תתחלף
	*/
	
        start_new_round();

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

    });



}());

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>