I am making a game right now, and the current movement is really choppy because when you press a button e.g. 'W'. it will take away from the 'top' position to give it the effect of moving up.
I was hoping to use 'this.x' and 'this.y' but I don't know much about it.
This is the current code I have:
window.addEventListener('keydown', (e) =>{
switch(e.key){
case 'a':
player.style.left = parseInt(player.style.left) - movePlayer + 'px';
break;
case 'd':
player.style.left = parseInt(player.style.left) + movePlayer + 'px';
break;
case 'w':
player.style.top = parseInt(player.style.top) - movePlayer + 'px';
break;
case 's':
player.style.top = parseInt(player.style.top) + movePlayer + 'px';
break;
}
});
smooth
<div id="box" style="border: 2px solid black; width: 200px; height: 200px">
<div id="sprite" style="left: 0; bottom: 0"></div>
</div>
<button>Increase Speed</button>
<style>
#sprite {
width: 25px;
height: 25px;
background: red;
position: relative;
transition: 0.1s linear;
}
</style>
<script>
const box = document.querySelector('#box');
const sprite = document.querySelector('#sprite');
const button = document.querySelector('button');
let speed = 5;
const toNum = (pxVal) => {
return parseInt(pxVal, 10);
};
const handleMovement = (e) => {
let left = toNum(sprite.style.left);
const bottom = toNum(sprite.style.bottom);
switch (e.key) {
case 'a':
if (left <= 0) return (sprite.style.left = 0);
sprite.style.left = left - speed + 'px';
break;
case 'd':
if (left >= 175) return (sprite.style.left = 175);
sprite.style.left = left + speed + 'px';
break;
case 'w':
if (bottom >= 0) return (sprite.style.bottom = 0);
sprite.style.bottom = bottom + speed + 'px';
break;
case 's':
if (bottom <= -175) return (sprite.style.bottom = -175);
sprite.style.bottom = bottom - speed + 'px';
break;
}
};
window.addEventListener('keydown', handleMovement);
button.addEventListener('click', () => (speed += 5));
</script>Try this by using window.getComputedStyle.getPropertyValue
You could still replace it with player.style.left and player.style.top if you think it is necessary, but I highly suggest you to use window.getComputedStyle.getPropertyValue since this is always the stable way to do it.
Check more here
let player = document.getElementById('player')
let movePlayer = 10
window.addEventListener('keydown', (e) =>{
let leftpos = parseInt(window.getComputedStyle(player).getPropertyValue("left"))
let toppos = parseInt(window.getComputedStyle(player).getPropertyValue("top"))
switch(e.key){
case 'a':
player.style.left = leftpos - movePlayer + 'px';
break;
case 'd':
player.style.left =leftpos + movePlayer + 'px';
break;
case 'w':
player.style.top = toppos - movePlayer + 'px';
break;
case 's':
player.style.top =toppos + movePlayer + 'px';
break;
}
});#player{
width:100px;
height:100px;
background-color:black;
position:absolute;
}<div id='player'><div>