Tlačítka 2

    <script>  
       var x = 0;    
       var y = 0;
       const krok = 64;
       function pohyb(smer) {          
          var smile = document.getElementById('smile');
          switch(smer) {
              case 0:
                  y = y - krok; 
                  break;
              case 1:
                  x = x + krok;
                  y = y - krok;
                  break;
              case 2:
                  x = x + krok; 
                  break;
              case 3:
                  x = x + krok;
                  y = y + krok;
                  break;
              case 4:
                  y = y + krok; 
                  break;
              case 5:
                  x = x - krok;
                  y = y + krok;
                  break;
              case 6:
                  x = x - krok; 
                  break;
              case 7:
                  x = x - krok;
                  y = y - krok;
                  break;                  
          }          
          smile.style.left = x + "px";
          smile.style.top = y + "px";
       }   
    </script> 
  

    <table style="margin:auto;">
        <tr>
            <td><button onClick="pohyb(7)"><img src="img/left_up.png" width="64" height="64"></button></td>
            <td><button onClick="pohyb(0)"><img src="img/up.png" width="64" height="64"></button></td>
            <td><button onClick="pohyb(1)"><img src="img/right_up.png" width="64" height="64"></button></td>      
        </tr>
        <tr>
            <td><button onClick="pohyb(6)"><img src="img/left.png" width="64" height="64"></button></td>
            <td> </td>
            <td><button onClick="pohyb(2)"><img src="img/right.png" width="64" height="64"></button></td>      
        </tr>
        <tr>
            <td><button onClick="pohyb(5)"><img src="img/left_down.png" width="64" height="64"></button></td>
            <td><button onClick="pohyb(4)"><img src="img/down.png" width="64" height="64"></button></td>
            <td><button onClick="pohyb(3)"><img src="img/right_down.png" width="64" height="64"></button></td>      
        </tr>  
    </table>
    
    <img src="img/smile.png" id="smile" width="64" height="64" style="position:absolute; left:0px; top:0px;">