JSFiddle - React, Tailwind, and code Playground

by Aamir Afridi

HTML

<div class="container one"></div>
<div class="container two"></div>
<div class="container three"></div>
<div class="ball"></div>

CSS

body {
    position: relative;
    margin:10px;
}
.container { cursor:pointer; }
.ball, .container {
    height: 100px;
    width: 100px;
    background: green;
    float: left;
    border-radius: 5px;
    position: absolute;
    z-index:2;
}
.one { left:0 }
.two { left:100px }
.three { left:200px }
.ball {
    border-radius: 100px;
    background: red;
    float: none;
    clear: both;
    z-index:-1;
    top: 200px;
}

JavaScript

$(function () {
    var speed = 200;
    var times = 4;
    var items = $('.container');
    function mix() {
        var pos = [0,100,200]

        pos1 = pos.splice(pos.indexOf( pos[Math.floor(Math.random()*pos.length)] ), 1)[0]
        pos2 = pos.splice(pos.indexOf( pos[Math.floor(Math.random()*pos.length)] ), 1)[0]
        pos3 = pos.splice(pos.indexOf( pos[Math.floor(Math.random()*pos.length)] ), 1)[0]
        
        items.eq(0).animate({top: pos3}).animate({ top:0 ,left: pos1 }, speed);
        items.eq(1).animate({top: pos2}).animate({ top:0 ,left: pos2 }, speed);
        items.eq(2).animate({top: pos1}).animate({ top:0 ,left: pos3 }, speed, function(){
            if(times>0) mix();
            times--;
        });
        
    };

    $('.ball').animate({
        left: $(items[Math.floor(Math.random()*items.length)]).addClass('choosen').position().left,
        top: 0
    }, 2000, function(){ $(this).hide(); mix(); });

    items.click(function(){
        if($(this).hasClass('choosen')) alert('You won');
        else alert('You lost');
    });

});