009 Final Source Code Catch me Game

<html>

<head>
    <title>JavaScript</title>
    <style>
        .output {
            background-color: aquamarine;
            height: 500px;
            width: 500px;
            border: 1px solid black;
            overflow: hidden;
            cursor: grab;
        }
        
        .box {
            position: relative;
            left: 50%;
            top: 50%;
            width: 100px;
            height: 100px;
            border-radius: 15px;
            border: 1px solid black;
        }
    </style>
</head>

<body>
    <div class="message"> X: <span class="x">0</span> - Y: <span class="y">0</span> - Score: <span class="s">0</span></div>
    <div class="output"></div>
    <script>
        const output = document.querySelector(".output");
        const messageOut = document.querySelectorAll(".message span");
        let score = 0;
        output.addEventListener("mouseenter", function () {
            output.style.backgroundColor = "blue";
        })
        output.addEventListener("mouseleave", function () {
            output.style.backgroundColor = "white";
        })
        output.addEventListener("mousemove", function (e) {
            messageOut[0].innerText = e.x;
            messageOut[1].innerText = e.y;
        })
        document.addEventListener("DOMContentLoaded", function () {
            let div = document.createElement("div");
            div.classList.add("box");
            output.appendChild(div);
            div.x = div.offsetLeft;
            div.y = div.offsetTop;
            div.tempColor = "#" + Math.random().toString(16).substr(-6);
            div.style.backgroundColor = div.tempColor;
            div.addEventListener("mouseenter", function (e) {
                div.style.backgroundColor = "red";
            });
            div.addEventListener("mouseleave", function (e) {
                div.style.backgroundColor = div.tempColor;
            });
            div.addEventListener("click", function (e) {
                div.tempColor = "#" + Math.random().toString(16).substr(-6);
                div.style.backgroundColor = div.tempColor;
                score++;
                messageOut[2].innerText = score;
            });
            div.steps = Math.random() * 20;
            div.direction = Math.floor(Math.random() * 4);
            window.requestAnimationFrame(move);
        })

        function move() {
            let speed = Math.random() * 15 + 10;
            const box = document.querySelector(".box");
            let bounds = output.getBoundingClientRect();
            box.steps--;
            if (box.steps < 0) {
                box.direction = Math.floor(Math.random() * 4);
                box.steps = Math.random() * 20;
            }
            if (box.direction == 0 && box.x < bounds.right - 100) {
                box.x += speed;
            }
            if (box.direction == 1 && box.x > bounds.left) {
                box.x -= speed;
            }
            if (box.direction == 2 && box.y < bounds.bottom - 100) {
                box.y += speed;
            }
            if (box.direction == 3 && box.y > bounds.top) {
                box.y -= speed;
            }
            box.style.top = box.y + "px";
            box.style.left = box.x + "px";
            window.requestAnimationFrame(move);
        }
    </script>
</body>

</html>