JSFiddle - React, Tailwind, and code Playground

by Nicolas PUJOL

HTML

<div id="mainMineDeRubis" class="main-mine-de-rubis">
    <img src="https://www.wincavern.com/img/site/mine.png" alt="Mine de rubis" class="mine-de-rubis" id="mineDeRubis">
</div>

CSS

.main-mine-de-rubis {
    position: relative;
}

.mine-de-rubis {
    position: absolute;
    z-index: 2;
    left: 0;
}

.pierre {
    position: absolute;
    top: 0px;
    left: 260px;
    z-index: 13;
}

JavaScript

$(function() {
    var shakedDir = '+';
    var rock = 0;
    var rockNb = 0;

    function shake() {
        shakedDir = (shakedDir === '+') ? '-' : '+';
        $('#mineDeRubis').animate({
            left: shakedDir + '=30px',
        }, 200, function() {
            rock++;
            if (rock > 10) {
                rock = 0;
                addRock();
            }
            shake();
        });
    }

    function addRock() {
        rockNb++;
        var rockPos = Math.floor(Math.random() * 360) + 160;
        //160-360
        $('#mainMineDeRubis').append('<img src="https://www.wincavern.com/img/site/mine-pierre.png" alt="Pierre" class="pierre" style="left:' + rockPos + 'px;" id="rock' + rockNb + '">');
        $('#rock' + rockNb).animate({
            top: '+=250px',
        }, 300, function() {
            $('#rock' + rockNb).remove();
        });
    }
    shake();

});