Moon Phase game

by dimshik

HTML

<div class="wrapper">
    <div class="moon" data-moon-num="0"></div>
</div>
<div class="wrapper">
    <div class="moon" data-moon-num="1"></div>
    <div class="moon" data-moon-num="2"></div>
</div>

<button id="start">Start</button>
<button id="stop">Stop</button>

CSS

.wrapper {
    width: 281px;
    height: 500px;
    position: relative;
    
    float:left;
    margin: 10px;
    background-color:black;
}

.moon {
    width:200px;
    height: 200px;
    float:left;
    /*border:1px solid white;*/
    font-size: 30px;
    line-height:200px;
    text-align:center;
    cursor:pointer;
       
    background-image:url('http://i.imgur.com/mrnlgh0.png');
    background-repeat: no-repeat;
    background-position: 0 0;
    background-size:cover;
}


.moon[data-moon-num="0"]{
 
    position:absolute;
    top:0;
    right:0;
    bottom:0;
    left:0;
    margin: auto;
}

.moon[data-moon-num="1"]{
 
    position:absolute;
    top:50px;
    right:0;
    bottom:0;
    left:0;
    margin: 0 auto;
}

.moon[data-moon-num="2"]{
 
    position:absolute;
    top:250px;
    right:0;
    bottom:0;
    left:0;
    margin: 0 auto;
}

JavaScript

function getRandomInt(min, max) {
    return Math.floor(Math.random() * (max - min + 1)) + min;
}



// moon animation speeds
var moons = [100, 500, 1000];

var animationIntervals = [];

var fullMoonMinFrame = 28;
var fullMoonMaxFrame = 35;

function doAnimate(moonNum, animSpeed) {
    var maxNum = 59;
    var minNum = 1;

    var anim = setInterval(function () {

        $('.moon[data-moon-num=' + moonNum + ']').html(minNum);

        $('.moon[data-moon-num=' + moonNum + ']').css({
            'background-position':'-' + 2*(minNum - 1) + '00px 0',
        })        
        
        minNum++;

        if (minNum > maxNum) {
            minNum = 1;
        }

    }, animSpeed);

    animationIntervals.push(anim);
}

function doSetTimeout(moonNumber, moonStartDelay) {

    setTimeout(function () {
        var moonSpeed = getRandomInt(20, 150);

        console.log('moonNumber: ' + moonNumber);
        console.log('moonSpeed: ' + moonSpeed);

        doAnimate(moonNumber, moonSpeed);

    }, moonStartDelay);
}


$('#start').on('click', function () {



    for (var i = 0; i < moons.length; i++) {

        console.log('i: ' + i);

        var moonStartDelay = getRandomInt(100, 1000);
        console.log('moonStartDelay: ' + moonStartDelay);

        doSetTimeout(i, moonStartDelay)

    }

});


function stopMoonAnimation(moonNumber) {
    clearInterval(animationIntervals[moonNumber]);
}


$('#stop').on('click', function () {
    for (var i = 0; i < animationIntervals.length; i++) {
        stopMoonAnimation(i);
    }
});


$('.moon').on('click', function () {

    var currentNum = $(this).text();

    var moonNumber = $(this).data('moon-num');

    console.log(moonNumber);

    if (currentNum > fullMoonMinFrame && currentNum < fullMoonMaxFrame) {
        $(this).css({
            'background-color': 'green'
        });
    } else {
        $(this).css({
            'background-color': 'red'
        });
    }

    stopMoonAnimation(moonNumber);

});