Source Code: (back to article)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Game Control Example</title>
<style>
#gameArea {
width: 300px;
height: 300px;
border: 1px solid black;
position: relative;
}
#player {
width: 50px;
height: 50px;
background-color: red;
position: absolute;
top: 125px;
left: 125px;
}
</style>
<script>
document.addEventListener('DOMContentLoaded', function () {
const player = document.getElementById('player');
let posX = player.offsetLeft;
let posY = player.offsetTop;
document.addEventListener('keydown', function(event) {
switch (event.key) {
case "ArrowUp":
posY -= 10;
break;
case "ArrowDown":
posY += 10;
break;
case "ArrowLeft":
posX -= 10;