JavaScript如何将变量值作为函数参数实现按键控制游戏角色移动

结论 #

这种通过按键事件修改状态变量、再将变量作为参数传入移动方法的实现方式是完全可行的，也是2D小游戏角色移动的常规实现方案。

先修正现有代码的语法错误 #

你当前写的Player类里有两个方法没有正确指向实例属性，会触发变量未定义报错，修正后代码如下：

class Player {
    /*
     * @param {int} x - x position
     * @param {int} y - y position
     * @param {int} size - size of object
     * 
     */
    constructor(x, y, size) {
        this.x = x;
        this.y = y;
        this.size = size;
        this.points = 0;
        this.velocity = 1;
        this.color = 'white';
        
    }

    addPoints(amount) {
        // 加上this指向实例的points属性
        this.points += amount;
    }

    changeVelocity(newVelocity) {
        // 加上this指向实例的velocity属性
        this.velocity = newVelocity;
    }

    moveLeft = function (canMove) {
        if (canMove) { this.x -= this.velocity; }
    }
    moveRight = function (canMove) {
        if (canMove) { this.x += this.velocity; }
    }
    moveUp = function (canMove) {
        if (canMove) { this.y -= this.velocity; }
    }
    moveDown = function (canMove) {
        if (canMove) { this.y += this.velocity; }
    }
}

完整实现逻辑 #

你只需要额外维护一个按键状态对象，在事件回调里修改状态，再在帧循环里把状态传入对应移动方法即可：

1. 定义按键状态存储对象

// 放在游戏全局控制逻辑即可
const keyStatus = {
    w: false,
    a: false,
    s: false,
    d: false
}

2. 绑定键盘事件修改状态

document.addEventListener('keydown', e => {
    if (keyStatus.hasOwnProperty(e.key)) {
        keyStatus[e.key] = true;
    }
})

document.addEventListener('keyup', e => {
    if (keyStatus.hasOwnProperty(e.key)) {
        keyStatus[e.key] = false;
    }
})

3. 在帧循环中调用移动方法

// 初始化你的玩家实例
const player = new Player(100, 100, 20);

// 游戏帧循环
function gameLoop() {
    // 执行移动逻辑，把对应按键的状态直接传入方法
    player.moveUp(keyStatus.w);
    player.moveLeft(keyStatus.a);
    player.moveDown(keyStatus.s);
    player.moveRight(keyStatus.d);
    
    // 这里补充你原本的画面重绘逻辑
    
    requestAnimationFrame(gameLoop);
}

// 启动游戏循环
gameLoop();

当前实现逻辑清晰，后续如果要新增自定义按键、碰撞检测等功能也非常好扩展。

内容的提问来源于stack exchange，提问作者Nate Baker