JSFiddle - React, Tailwind, and code Playground

by Dennis Betman

HTML

<div class="canvas">
    <div class="red" style="top:0px; left: 500px;"><img src="http://pngimg.com/upload/cloud_PNG2.png" style="width:100%"/></div>
    <div class="green" style="top:160px; left: 40px;"><img src="http://pngimg.com/upload/cloud_PNG2.png" style="width:100%"/></div>
   
</div>

CSS

* {
    margin:0px;
    padding:0px;
}
body {
    background:#f3f3f3;
}
.canvas {
    position:relative;
    width:600px;
    margin:0px auto;
    height:400px;
    border:1px solid #d3d3d3;
    overflow:hidden;
    background:#7EC0EE;
}
.red {
    position:absolute;
    width:100px;
    height:100px;
}

.green{
    position:absolute;
    width:100px;
    height:100px;
}

JavaScript

setInterval(function(){
    var canPos = $(".canvas").offset();
    var redPos = $(".red").offset();
    var redPosLeft = redPos.left;
    
    var greenPos = $(".green").offset();
    var greenPosLeft = greenPos.left;
    
    var calc = canPos.left - 150;
    var calcCity = canPos.left - 600;
    
    var randomTop = Math.floor(Math.random() * 300) + 1;

    if (redPosLeft < calc) {
        $(".red").css({left: "600px", top: randomTop});
    }
    else{
        $(".red").animate({left: "-=1px"}, 10);
    }
    
    if (greenPosLeft < calc) {
        $(".green").css({left: "600px", top: randomTop});
    }
    else{
        $(".green").animate({left: "-=2px"}, 10);
    }
}, 10);