为什么我的 Javascript 键盘输入不适用于我的 Phaser 精灵？答案

【问题标题】：Why are my Javascript keyboard inputs not working for my Phaser sprite?为什么我的 Javascript 键盘输入不适用于我的 Phaser 精灵？
【发布时间】：2020-07-04 14:16:53
【问题描述】：

我正在尝试使用 Phaser 制作游戏，并尝试使用您通常用于 Phaser 的常用键盘输入，但它们并没有让我的精灵移动。这是我的移相器代码（没有移相器键盘输入）：

const gameState = {};
        
    const config = {
        type: Phaser.AUTO,
        width: 850,
        height: 650,
        backgroundColor: 0xa362d1,
        physics: {
            default: 'arcade',
            arcade: {
                gravity: { y: 200 },
                enableBody: true,
            }
        },
        scene: {
            preload, 
            create, 
            update
        }
    };

    var game = new Phaser.Game(config);
  
        
    function preload (){
        this.load.image('boy', 'boy.png')
    }

    function create(){
        gameState.boy = this.add.sprite(400, 550, 'boy').setScale(0.75)
       
    }
        
    function update (){
        
        
     }

无论如何，我试图让我的精灵移动使用键盘输入，所以我尝试使用普通的旧 javascript 来完成工作。这是我的javascript代码：

document.addEventListener('keydown', keyDownHandler, false);

document.addEventListener('keyup', keyUpHandler, false);

var rightPressed = false;
var leftPressed = false;
var upPressed = false; 
var downPressed = false;

function keyDownHandler(event){
    if (event.keyCode == 39){
        rightPressed = true;
    }
    else if (event.keyCode == 37){
        leftPressed = true;
    }
    
    if (event.keyCode == 40){
        downPressed = true;
    }
    else if (event.keyCode == 38){
        upPressed = true;
    }
}

function keyUpHandler(event){
    if (event.keyCode == 39){
        rightPressed = false;
    }
    else if (event.keyCode == 37){
        leftPressed = false;
    }
    
    if (event.keyCode == 40){
        downPressed = false;
    }
    else if (event.keyCode == 38){
        upPressed = false;
    }
}

function draw(){
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    if(rightPressed){
        playerX += 5;
    }
    else if(leftPressed) {
        playerX -= 5;
    }
    if(downPressed) {
        playerY += 5;
    }
    else if(upPressed) {
        playerY -= 5;
    }
    ctx.drawImage(img, playerX, playerY);
    requestAnimationFrame(draw);
    
}

然而，仍然没有结果。我想知道我的代码是否存在某种类型的问题，或者我是否有某种类型的语法问题。再次感谢堆栈社区！

【问题讨论】：

标签： javascript phaser-framework

【解决方案1】：

我不太明白你为什么要创建一个 keyUp 和一个 keyDown 函数来查看按键是否被按下，但如果我可以建议不同的方法。

首先，使用您想要在游戏中使用的键创建一个对象，例如：

this.keys = this.input.keyboard.addKeys({
            w: Phaser.Input.Keyboard.KeyCodes.W,
            s: Phaser.Input.Keyboard.KeyCodes.S,
            a: Phaser.Input.Keyboard.KeyCodes.A,
            d: Phaser.Input.Keyboard.KeyCodes.D
        });

其次，您可以创建一个函数来监视这些键，如下所示：

function handleMoving() {
        if (this.keys.w.isDown // Or this.keys.w.isUp) {
            
            player.body.setVelocityX(160); // Whatever you want

        } 
        
        else if (this.keys.s.isDown) {
            
            player.body.setVelocityX(-160); // Whatever you want

        } 

// ... and so on
        
}

然后别忘了在update()中调用函数handleMoving()。

【讨论】：