Untitled

<!DOCTYPE html>
<html>
<head>
    <style>
        #player {
            position: absolute;
            top: 200px;
            left: 200px;
            width: 50px;
            height: 50px;
            background-color: red;
        }

        .car {
            position: absolute;
            top: 0;
            width: 100px;
            height: 100px;
            background-color: blue;
        }
    </style>
</head>
<body>
    <div id="player"></div>
    <div class="car"></div>

    <script>
        var player = document.getElementById("player");
        var cars = document.getElementsByClassName("car");
        
        function moveUp() {
            player.style.top = (parseInt(player.style.top) - 10) + "px";
        }
        
        function moveLeft() {
            player.style.left = (parseInt(player.style.left) - 10) + "px";
        }
        
        function moveRight() {
            player.style.left = (parseInt(player.style.left) + 10) + "px";
        }
        
        document.addEventListener("keydown", function(event) {
            if (event.code === "Space") {
                moveUp();
            } else if (event.code === "ArrowLeft") {
                moveLeft();
            } else if (event.code === "ArrowRight") {
                moveRight();
            }
        });
    </script>
</body>
</html>
Editor is loading...