<!DOCTYPE html>
<html>
<head>
<style>
#blokje {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
left: 0;
top: 0;
cursor: pointer; /* Voeg een aanwijzer toe om aan te geven dat het blokje klikbaar is */
}
</style>
</head>
<body>
<div id="blokje"></div>
<script>
const blokje = document.getElementById("blokje");
let posX = 0;
let posY = 0;
blokje.addEventListener("click", function () {
alert("Je hebt op het blokje geklikt!");
});
document.addEventListener("keydown", function (event) {
// Links
if (event.key === "ArrowLeft") {
posX -= 10;
}
// Rechts
else if (event.key === "ArrowRight") {
posX += 10;
}
// Boven
else if (event.key === "ArrowUp") {
posY -= 10;
}
// Onder
else if (event.key === "ArrowDown") {
posY += 10;
}
blokje.style.left = posX + "px";
blokje.style.top = posY + "px";
});
</script>
</body>
</html>