In Html and Javascript I am trying to make the character (a letter O) move with the wasd keys. I have tried everything I can, and I can't get it to work. Can you tell me how to do it. Also, can you be pretty specific... I kind of a beginner. Here is the code.
<!DOCTYPE html>
<canvas id="ctx" width="500" height="500" style="border: 1px solid black;">
<script>
var ctx = document.getElementById("ctx").getContext("2d");
var player = {
pressRight: false,
pressLeft: false,
pressDown: false,
pressUp: false,
x: 250,
y: 250,
};
ctx.font = "100px,arial";
ctx.fillText("O",player.x,player.y);
document.onkeydown = function (event){
if(event.keyCode == "D")
player.pressRight = true;
else if(event.keyCode == "S")
player.pressDown = true;
else if(event.keyCode == "A")
player.pressLeft = true;
else if(event.keyCode == "W")
player.pressUp = true;
}
document.onkeyup = function (event){
if(event.keyCode == "D")
player.pressRight = false;
else if(event.keyCode == "S")
player.pressDown = false;
else if(event.keyCode == "A")
player.pressLeft = false;
else if(event.keyCode == "W")
player.pressUp = false;
}
function updatePlayerPosition(){
if(player.pressRight == true)
player.x += 10;
if(player.pressLeft == true)
player.x -= 10;
if(player.pressDown == true)
player.y += 10;
if(player.pressUp == true)
player.y -= 10;
}
function drawPlayer(){
ctx.clearRect(0,0,500,500);
ctx.font = "100px,arial";
ctx.fillText("O",player.x,player.y);
}
function Update(){
ctx.clearRect(0,0,500,500);
updatePlayerPosition();
drawPlayer();
}
setInterval(Update,100);
</script>
What I have tried:
I have looked up videos and searched as much as I could on the internet and have not figured it out... I sure its user error but I don't know where I'm messing up.