how to create a logic to spin the 3 images when the SPIN NOW button is clicked

Question

logic to spin the 3 images when the SPIN NOW button is clicked.

After the spin is finished, user earns either 200 points or 500 points depending on the sequence of the result of the spin.

1) When All the 3 images are same, user gets 500 points which he can use to redeem products. 2) When At least 2 images are same, user gets 200 points which he can use to redeem products. ​3) When none is the same show failure message.​

following are the code of change images.

<script>
var randomImage = new Array();
randomImage[0] = "images/01.jpg";
randomImage[1] = "images/02.jpg";
randomImage[2] = "images/03.jpg";
$(function() {
    $('.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random() * randomImage.length);

        $("#bg").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');

    });
    $('.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random() * randomImage.length);
        $("#bga").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
    });
    $('.click').click(function(e) {
        e.preventDefault();
        var number = Math.floor(Math.random() * randomImage.length);
        $("#bgab").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');
    });
});
</script>

User Should be able to play only thrice. When he plays 4th time, he should be asked to wait for 30 mins to play again.

Answer 1

Please use this, this this the easiest demo code. you need to also add your logic.

 $(function () {
        var clickcount = 0;
        $('.click').click(function (e) {
            e.preventDefault();

                $('.click').attr('disabled','disabled');
                var number = Math.floor(Math.random() * randomImage.length);
                $("#bg").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');

                number = Math.floor(Math.random() * randomImage.length);
                $("#bga").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');

                number = Math.floor(Math.random() * randomImage.length);
                $("#bgab").html('<img width="250px" height="250px" src="' + randomImage[number] + '" />');

                var firstimage = $("#bg").find('img').attr('src').trim();
                var secondimage = $("#bga").find('img').attr('src').trim();
                var thirdimage = $("#bgab").find('img').attr('src').trim();
                if (firstimage == secondimage == thirdimage) {
                    // all match so point 500
                } else if (firstimage == secondimage || firstimage == thirdimage || secondimage == thirdimage) {
                    // two image match so point 200
                } else {
                    // nothing match
                }


                // Timeout function after 30 sec button will enable again
                setTimeout(function () {
                    $('.click').removeAttr('disabled');
                }, 1800000);


        });

    });

Answer 2

You should add variable like clickCounter. Try smth like this:

$(window).load(function () {   
var clickCounter = 0;

var randomImage = ["images/01.jpg","images/02.jpg", "images/03.jpg"];
     $('#yourbuttonId').click(function(e) {
    ++clickCounter;
        var number = Math.floor(Math.random() * randomImage.length);
     switch(clickCounter)
     {
         case 1:
         ...your logic here break;
         case 2:
         ...your logic here break;
         case 3:
         ...your logic here break;
         default: ...your logic if > 3
         break;
    };
    });
});