Kvadrāts pārvietojas – WEB programmēšana

Kvadrāts pārvietojas spiežot bultiņas uz klaviatūras. Katru reizi, kad notiek notikums keydown, tiek izsaukta paša definēta funkcija. Šajā funkcijā ir switch, kur šķiro gadījumus, atkarībā kādā virzienā kvadrāts ir jāpārvieto.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <style>
    #container{
        height: 300px;
        width: 300px;
        border: 1px solid black;
        position: relative;
    }
    #obj{
        position: absolute;
        height: 50px;
        width: 50px;
        background: green;
        left: 0px;
    }
    </style>
</head>
<body>
    <div id="container">
        <div id="obj"></div>
    </div>
<script>
document.onkeydown = animation;
let obj = document.getElementById('obj');
let container = document.getElementById('container');
let step = 5;
let objX = 0;
let objY = 0;

function animation(e){
    switch (e.keyCode) {
      case 37:
        objX -= step;
        console.log('X: ' + objX);
        obj.style.left = objX + 'px';
        break;
      case 38:
        objY -= step;
        console.log('Y: ' + objY);
        obj.style.top = objY + 'px';
        break;
      case 39:
        objX += step;
        console.log('X: ' + objX);
        obj.style.left = objX + 'px';
        break;
      case 40:
        objY += step;
        console.log('Y: ' + objY);
        obj.style.top = objY + 'px';
        break;
      default:
        alert('nav pareizs virziens');
        break;
    }
}
</script>
</body>
</html>