Hi,
The only problem with your code is of Case sensitivity.
document.onkeydown = function(event){
if (event.keyCode == 87)
player.pressW = true;
else if (event.keyCode == 83)
player.pressS = true;
else if (event.keyCode == 65)
player.pressA = true;
else if (event.keyCode == 68)
player.pressD = true;
}
document.onkeyup = function(event){
if (event.keyCode == 87)
player.pressW = false;
else if (event.keyCode == 83)
player.pressS = false;
else if (event.keyCode == 65)
player.pressA = false;
else if (event.keyCode == 68)
player.pressD = false;
}
Try the below code to solve your problem:
<!DOCTYPE html>
<canvas id="ctx" height="800" width="1500" style="border:1px solid #000000;"></canvas>
<script>
var ctx = document.getElementById("ctx").getContext("2d");
var player = {
x: 750,
y: 400,
pressW: false,
pressS: false,
pressA: false,
pressD: false,
};
ctx.fillStyle = "blue";
ctx.rect(player.x, player.y, 50,50);
document.onkeydown = function(event){
if (event.keyCode == 87)
player.pressW = true;
else if (event.keyCode == 83)
player.pressS = true;
else if (event.keyCode == 65)
player.pressA = true;
else if (event.keyCode == 68)
player.pressD = true;
}
document.onkeyup = function(event){
if (event.keyCode == 87)
player.pressW = false;
else if (event.keyCode == 83)
player.pressS = false;
else if (event.keyCode == 65)
player.pressA = false;
else if (event.keyCode == 68)
player.pressD = false;
}
function updatePlayerPosition(){
if (player.pressW == true)
player.y -= 10;
if (player.pressS == true)
player.y += 10;
if (player.pressA == true)
player.x -= 10;
if (player.pressD == true)
player.x += 10;
}
function drawPlayer(){
ctx.fillStyle = "blue";
ctx.fillRect(player.x, player.y, 50,50);
}
function Update(){
ctx.clearRect(0,0,1500,800)
updatePlayerPosition();
drawPlayer();
}
setInterval(Update, 100);
</script>
<style>
canvas {
padding-left: 0;
padding-right: 0;
margin-left: auto;
margin-right: auto;
display: block;
}
</style>
Thanks,