Javascript HTML5 Canvas Mario Bros NES克隆，碰撞和跳跃破碎

Question

I am hoping someone might be able to look at this javascript code I have been working on for a simple old-school Mario clone. I have pieced together what I know about canvas from several tutorials and I am not able to get the collisions with blocks or the jumping working correctly.

the jumping seems to set Mario on an infinite loop of bouncing over and over, which looks funny but is not very conducive of playing a game!

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


};

Here is a codepen with where I am at right now: http://codepen.io/AlexBezuska/pen/ysJcI

I really appreciate any help, I will continue to search and play around with this in the meantime, but any pointers you can give, even suggestions for formatting, prototype creation etc are really appreciated (I am quite new to both canvas and prototypes)

Answer 1

In your checkKeyDown() and checkKeyUp() functions, you have them checking for different 'jump' keys. From checkKeyDown() :

if (keyID === 74) { //spacebar
    e.preventDefault();

    player1.isJumpKey = true;
}

From checkKeyUp() :

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

So checkKeyUp() isn't properly resetting player1.isJumpKey . Set them both to the same, and it works fine for me.

As a general point, it might be worth setting up an object that holds all the parameters that have multiple instances in your code. Then write them into your code by referring to this object. That way you've only got to change them in a single place:

CONSTS = {
    upKeyID: 32,
    etc.
}

// then later:

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

Answer 2

我想出了碰撞问题，我在玩家原型中有x位置和y位置变量名为'drawX'和'drawY'，但在碰撞检测功能中，它们只是'x'和'y'，现在它可以工作了： http ：//codepen.io/AlexBezuska/pen/ysJcI w00t！