CODEWITHSUNDEEP
javascripthtmlcanvas
glasses
glasses

Reputation: 763

Javascript HTML5 Canvas Mario Bros NES clone, collisions and jumping broken

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)

Upvotes: 3

Views: 1180

Answers (2)

glasses
glasses

Reputation: 763

I figured out the collision problem, I had the x position and y position vars in the player prototype named 'drawX' and 'drawY', but in the collision detection function, they were simply 'x' and 'y', now it works: http://codepen.io/AlexBezuska/pen/ysJcI w00t!

Upvotes: 0

Ben Jackson
Ben Jackson

Reputation: 11932

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

Upvotes: 4

Related Questions