I am currently working on an HTML game where the player can navigate around the webpage. However, I am encountering issues with getting the movement functionality to work. My goal is to have the player move when certain keys are pressed. While I was able to confirm that key presses are registered using alerts, I haven't been successful in actually moving the player div. Below is a snippet of my code:
function keyPress(){
if(window.event.keyCode == 87){
document.getElementById("player").style.left = 10 + 'px';
}
if(window.event.keyCode == 83){
alert("spressed")
}
if(window.event.keyCode == 65){
alert("apressed")
}
if(window.event.keyCode == 68){
alert("dpressed")
}
}.player{
background-color: black;
height: 50px;
width: 50px;
}<!doctype html>
<html onkeydown="keyPress()">
<head>
<link rel="stylesheet" href="lib/style.css">
<script src="lib/script.js"></script>
</head>
<body>
<div class="player" id="player">
</div>
</body>
</html>This task might be simple for some of you, so any assistance would be greatly appreciated. Thank you! :)