在JavaScript中使用"WASD“的运动控制

Question

我现在正在做一个游戏，现在的动作真的很不稳定，因为当你按下一个按钮。“哇”。它将从‘顶端’的位置，给它上升的效果。

我本来希望用“this.y.x”和“this.y.y”，但我对此不太了解。

这是我目前的代码：

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;
         }
   });

Answer 1

平滑

​

<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>

​

Answer 2

通过使用window.getComputedStyle.getPropertyValue来尝试

如果您认为有必要的话，仍然可以用player.style.left和player.style.top替换它，但是我强烈建议您使用window.getComputedStyle.getPropertyValue，因为这始终是稳定的方法。

检查更多的这里

​

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>

​