Javascript HTML5画布Mario Bros NES克隆、碰撞和跳跃

我希望有人能看看我为一个简单的老式马里奥克隆人编写的javascript代码。 我从几个教程中拼凑了我所知道的关于画布的知识，但我无法正确处理与块体的碰撞或跳跃

这种跳跃似乎让马里奥陷入了一个无限循环，一次又一次的跳跃，这看起来很有趣，但对玩游戏来说不是很有帮助

       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.isLeftKey){
  if (this.velX < this.speed) {
            this.velX--;
        }
 }
 if(this.isCrouchKey){
      player1.grounded = true;
      player1.jumping = false;
}


};

函数播放器（）{
这个.srcX=0；
这个.srcY=0；
this.drawX=游戏宽度/2；
这个.drawY=0；
这个.标度宽度=38；
这个。比例高度=50；
这个宽度=48；
这个高度=60；
这个速度=10；
这个.maxJump=50；
该值为0；
这个.velX=0；
this.isJumpKey=false；
this.isRightKey=false；
this.iscruchkey=false；
this.isLeftKey=false；
这个跳跃=错误；
this.grounded=false；
}
Player.prototype.draw=函数（）{
clearPlayer（）；
这是checkKeys（）；
ctxPlayer.drawImage(
玩家，
这个.srcX，
这个.srcY，
这个宽度，
这个，身高，
这是drawX，
这个，拖拉，
这是一个非常小的数字，
这是（1.scaleHeight）；
};
Player.prototype.checkKeys=函数（）{
如果（此.isJumpKey）{
如果（！this.jumping&&this.grounded）{
这是真的；
this.grounded=false；
this.velY=-this.speed*2；
}
}
如果（此.isRightKey）{
如果（此速度小于此速度）{
这个.velX++；
}
}
if（此.isLeftKey）{
如果（此速度小于此速度）{
这是维克斯；
}
}
if（this.isCrouchKey）{
player1.grounded=true；
player1.jumping=false；
}
};

这是我现在所在的代码笔：

我非常感谢您的帮助，在此期间我将继续搜索和处理此问题，但非常感谢您提供的任何建议，甚至是格式、原型创建等方面的建议（我对画布和原型都很陌生）

在您的

checkKeyDown（）

和

checkKeyUp（）

函数中，你让他们检查不同的“跳跃”键。从

checkKeyDown（）

：

从

checkKeyUp（）

：

所以

checkKeyUp（）

没有正确重置

player1.isJumpKey

。将两者设置为相同的值，对我来说效果很好

一般来说，设置一个对象来保存代码中具有多个实例的所有参数可能是值得的。然后通过引用此对象将它们写入代码中。这样，您只需在一个地方更改它们：

CONSTS = {
    upKeyID: 32,
    etc.
}

// then later:

if (keyID === CONSTS.upKeyID) {
    player1.isJumpKey = false;
    e.preventDefault();
}

---

我解决了碰撞问题，我在名为'drawX'和'drawY'的播放器原型中使用了x位置和y位置变量，但在碰撞检测功能中，它们只是'x'和'y'，现在可以工作了：w00t

太棒了，我不知道我怎么会忽略了！！谢谢，现在我只需要看看如何让碰撞工作。非常感谢你的帮助@不用担心。在翻看你的代码时，我还注意到，即使球员停赛，

player1.velY

仍在继续增加。这是因为线

player1.velY+=重力在
draw（）中
。您可能希望将其更改为如下内容：
if（！player1.grounded）{player1.velY+=gravity；}否则{player1.velY=0}。再次感谢！我将添加常量。伟大的idea@glasses别担心。让我知道结果如何。
if (keyID === 32) { // spacebar
    player1.isJumpKey = false;
    e.preventDefault();
}

CONSTS = {
    upKeyID: 32,
    etc.
}

// then later:

if (keyID === CONSTS.upKeyID) {
    player1.isJumpKey = false;
    e.preventDefault();
}