JSFiddle - React, Tailwind, and code Playground

by Tori Hoelscher

HTML

<div id='position'>position</div>
<p><button id="go">Stop </button></p>
<img id='wall' src="http://www.schoolphotoproject.com/_picture-of-landscapes/bare-tree-photo4-l.jpg  "/>
<div class='leaf'>
    <img id='leaf' src="http://m.rgbimg.com/cache1nI768/users/m/mi/milca/600/mirwuUK.jpg" width='100' height='100' />
</div>

CSS

.ball {
    position: absolute;
    top: 100px;
    left:50px;
    width: 100px;
    height:100px;
    background-color: transparent;
    }
.wall {
    position: absolute;
    top:150px;
    left:100px;
    width: 450px;
    height:450px;
    background-color: yellow;
}

JavaScript

var timerInterval = 100;

var timer = window.setInterval(function() { leafTimer() }, 
                              timerInterval);  

$( "#go" ).click(function() {
   window.clearInterval(timer);
});

function leafTimer()
{
  moveleaf($('.leaf'));   
}

function moveleaf(obj)
{
    var left = obj.offset().left;
    var top = obj.offset().top;
    var moveDuration = 50;
    $('#position').html('left:' + left  + ' top:' + top);
    
    if ((left <= 250)&&(top<=100))
    {
       obj.animate({ "left": "+=10px" }, moveDuration );
        return;
    }

    if ((left >= 250)&&(top<=250))
    {
       obj.animate({ "top": "+=10px" }, moveDuration );
        return;
    }
    if ((left >= 50)&&(top>=250))
    {
       obj.animate({ "left": "-=10px" }, moveDuration );
        return;
    }
    if ((left<=50)&&(top>=100))
    {
       obj.animate({ "top": "-=10px" }, moveDuration );
    }

    
}