JavaScriptHTML5Canvas实现经典马里奥游戏克隆及碰撞检测问题

我在尝试用 Javascript 和 HTML5 Canvas 制作一个简单的经典马里奥游戏克隆时遇到了一些问题。虽然我已经从多个教程中学到了一些基本的画布操作知识，但在实现块碰撞检测和跳跃功能时仍然遇到了困难。

目前，跳跃功能导致马里奥不停地上下跳动，虽然看起来很有趣，但这显然不利于游戏体验。

以下是我的玩家类的部分代码：

function Player() {
    this.srcX = 0;
    this.srcY = 0;
    this.drawX = gameWidth / 2;
    this.drawY = 0;
    this.scaleWidth = 38;
    this.scaleHeight = 50;
    this.width = 48;
    this.height = 60;
    this.speed = 10;
    this.maxJump = 50;
    this.velY = 0;
    this.velX = 0;
    this.isJumpKey = false;
    this.isRightKey = false;
    this.isCrouchKey = false;
    this.isLeftKey = false;
    this.jumping = false;
    this.grounded = false;
}
Player.prototype.draw = function() {
    clearPlayer();
    this.checkKeys();
    ctxPlayer.drawImage(
        player,
        this.srcX,
        this.srcY,
        this.width,
        this.height,
        this.drawX,
        this.drawY,
        this.scaleWidth,
        this.scaleHeight
    );
};
Player.prototype.checkKeys = function() {
    if (this.isJumpKey) {
        if (!this.jumping && this.grounded) {
            this.jumping = true;
            this.grounded = false;
            this.velY = -this.speed * 2;
        }
    }
    if (this.isRightKey) {
        if (this.velX  -this.speed) {
            this.velX--;
        }
    }
    if (this.isCrouchKey) {
        player1.grounded = true;
        player1.jumping = false;
    }
};

这是我在 CodePen 上的项目链接：http://codepen.io/AlexBezuska/pen/ysJcI

非常感谢您的帮助。我会继续搜索和尝试解决问题，但如果您能提供任何指导，无论是关于代码格式、原型创建还是其他方面的建议，我都会非常感激（我是画布和原型的新手）。

解决方法：

在您的 checkKeyDown() 和 checkKeyUp() 函数中，确保它们检查不同的跳跃键。例如，在 checkKeyDown() 中：

if (keyID === 74) { // 空格键
    e.preventDefault();
    player1.isJumpKey = true;
}

而在 checkKeyUp() 中：

if (keyID === 32) { // 空格键
    player1.isJumpKey = false;
    e.preventDefault();
}

这样，checkKeyUp() 就能正确地重置 player1.isJumpKey。将这两个键设置为相同后，问题得到了解决。

一般来说，为了提高代码的可维护性，建议创建一个包含所有参数的对象。这样，您只需在一个地方进行修改即可：

const COnSTS= {
    upKeyID: 32,
    // 其他参数
};
// 后续使用时：
if (keyID === CONSTS.upKeyID) {
    player1.isJumpKey = false;
    e.preventDefault();
}