33 lines
862 B
JavaScript
33 lines
862 B
JavaScript
let player = document.querySelector("#player")
|
|
|
|
player.setAttribute("data-coordinates", JSON.stringify({
|
|
x: 45,
|
|
y: 20,
|
|
}))
|
|
player.setAttribute("style", `left:${45}%; bottom:${20}%; width:5rem; height:5rem; position:absolute; z-index: 3;`)
|
|
|
|
function onKeyDown(event) {
|
|
let coordinates = JSON.parse(player.getAttribute("data-coordinates"))
|
|
|
|
if (event.key == "d") {
|
|
coordinates.x = coordinates.x + 1
|
|
}
|
|
|
|
if (event.key == "a") {
|
|
coordinates.x = coordinates.x - 1
|
|
}
|
|
|
|
if (event.key == "w") {
|
|
coordinates.y = coordinates.y + 1
|
|
}
|
|
|
|
if (event.key == "s") {
|
|
coordinates.y = coordinates.y - 1
|
|
}
|
|
|
|
player.setAttribute("style", `left:${coordinates.x}%; bottom:${coordinates.y}%; width:5rem; height:5rem; position:absolute; z-index: 3;`)
|
|
player.setAttribute("data-coordinates", JSON.stringify(coordinates))
|
|
}
|
|
|
|
document.addEventListener("keydown", onKeyDown)
|