JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<head>
<meta name="generator" content="PhpED Version 7.0 (Build 7027eval)">
<script type="text/javascript" src="animation.js"></script>
<style type="text/css">
  
 button{
     padding-left: 0.25em;
     padding-right: 0.25em;
     
 } 
 
 #table{
   
     height: 50px;
 }
 </style>
<title>Hello world</title>

</head>
<body onresize="detectWS()">
<div class="helo"  style="font-color: black; top: 10px;  height: 300px;background-color: yellow;">
    <div id="hello"  style="position:absolute;" > 
       <img src="images/12.gif"  border="0" width="100" height="98" alt="12.gif (125.639 bytes)" onmouseover="startInit()">
    </div>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
<br/>
   <div id="table" style="height: 50px; vertical-align: bottom;" >
    <table>
        <tr>&nbsp;</tr>
        <tr>
            <td><button  onclick="stopSound('sound/proba.wav')" >Stop sound</button></td>
            <td><button onclick ="startInit()">Play again</button></td>
            <td><button onclick ="stopInit()">Stop animation</button></td>
        </tr>
    </table> 
 </div>
</div>
<span id="dummy"></span>

</body>
</html>

JavaScript

var hello;
    var animWidth;
    var animHeight;
    var goalLineH;
    var goalLineW;
    var t = null;
    var dirx = 1;
    var diry = 1;



    function init(){
         hello = document.getElementById('hello');
         hello.style.left = hello.offsetLeft;
         hello.style.top = hello.offsetTop;
         animWidth = parseInt(hello.offsetWidth); 
         animHeight = parseInt(hello.offsetHeight);
         goalLineH = parseInt(detectWS().goalLineH);
         goalLineW = parseInt(detectWS().goalLineW); 
              
         if(dirx == 1){
            
             moveRight(); 
         } 
         else{
             moveLeft();
         }  
         if(diry == 1){
             moveDown();
         }
         else{
             moveUp();
         }
       
    }

    function moveRight(){
        hello.style.left = parseInt(hello.style.left)+ 5 + "px";
        if(parseInt(hello.style.left) >= goalLineW){
             hello.style.left = goalLineW;
             dirx = 0; moveLeft(); 
        }     
    }                                                            

    function moveLeft(){
         hello.style.left = (parseInt(hello.style.left)- 5) + "px";
         if(parseInt(hello.style.left) <= 1){
             dirx = 1;
         }
         else if(parseInt(hello.style.left)>= goalLineW){
             hello.style.left = goalLineW;
             dirx = 0; moveRight();
          }

    }

    function moveDown(){
          hello.style.top = parseInt(hello.style.top) + 5 + "px";
          if(parseInt(hello.style.top) >= goalLineH){
              hello.style.top = goalLineH;
              diry = 0; moveUp();
          }
        
    }

    function moveUp(){
          hello.style.top = parseInt(hello.style.top) - 5 + "px";
          if(parseInt(hello.style.top) <= 1){
             diry = 1; 
          }
          else if(parseInt(hello.style.top)>= goalLineH){
             hello.style.top = goalLineH;
             diry = 0; moveLeft();
          }
    }

  ...