在 JavaScript 中使用 "WASD" 进行移动控制

Question

我现在正在做游戏，当前的动作真的很不稳定，因为当你按下一个按钮时，例如'W'。它会从 'top' 位置移开，以产生向上移动的效果。
我希望使用 'this.x' 和 'this.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

尝试使用 window.getComputedStyle.getPropertyValue

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

查看更多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>

Answer 2

流畅

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

在 JavaScript 中使用 "WASD" 进行移动控制

Movement controls using "WASD" in JavaScript

html

javascript

position

event-listener