script.js

let left = document.querySelector("#left");
let up = document.querySelector("#up");
let right = document.querySelector("#right");
let down = document.querySelector("#down");
let box = document.querySelector("#box");
let target = document.querySelector("#target");
let cover = document.querySelector("#cover");
let hold = false;

let x = 0;
let y = 0;

document.addEventListener("keydown", (event) => {
    if(!hold) {
            if(event.key === "w") {
            // console.log("W key was pressed");
            y += 10;
            box.style.bottom = `${y}px`;
        } else if(event.key === "s") {
            y -= 10;
            box.style.bottom = `${y}px`;
        } else if(event.key === "a") {
            x -= 10;
            box.style.left = `${x}px`;
        } else if(event.key === "d") {
            x += 10;
            box.style.left = `${x}px`;
        }
    }

    if(x >= 600 && x <= 700 && y < 50) {
        cover.style.display = "block";
        hold = true;
    }
        

})

left.addEventListener("click", () => {
    x -= 10;
    box.style.left = `${x}px`;
})

right.addEventListener("click", () => {
    x += 10;
    box.style.left = `${x}px`;
})

up.addEventListener("click", () => {
    y += 10;
    box.style.bottom = `${y}px`;
})

down.addEventListener("click", () => {
    y -= 10;
    box.style.bottom = `${y}px`;
})

let retry = document.querySelector("#retry");

retry.addEventListener("click", () => {
    hold = false;
    x = 0;
    y = 0;
    cover.style.display = "none";
    box.style.left = "0px";
    box.style.bottom = "0px";
})