pyscript/examples/mario/js/pipe.js

(function () {
  if (typeof Mario === "undefined") window.Mario = {};

  //there are too many possible configurations of pipe to capture in a reasonable
  //set of simple variables. Joints, etc. are just too much.
  //To that end, the pipe class handles simple pipes, and we'll put together
  //anything more complex with individual props. OK? OK.
  Pipe = Mario.Pipe = function (options) {
    this.pos = options.pos;

    //NOTE: direction is the direction you move INTO the pipe.
    this.direction = options.direction;
    this.destination = options.destination;
    this.length = options.length;

    if (this.direction === "UP" || this.direction === "DOWN") {
      this.hitbox = [0, 0, 32, this.length * 16];
      this.midsection = level.pipeUpMid;
      this.endsection = level.pipeTop;
    } else {
      this.hitbox = [0, 0, 16 * this.length, 32];
      this.midsection = level.pipeSideMid;
      this.endsection = level.pipeLeft;
    }
  };

  Pipe.prototype.checkPipe = function () {
    if (this.destination === undefined || !input.isDown(this.direction)) return;

    var h = player.power === 0 ? 16 : 32;
    var x = Math.floor(player.pos[0]);
    var y = Math.floor(player.pos[1]);
    switch (this.direction) {
      case "RIGHT":
        if (
          x === this.pos[0] - 16 &&
          y >= this.pos[1] &&
          y + h <= this.pos[1] + 32
        ) {
          player.pipe(this.direction, this.destination);
        }
        break;
      case "LEFT":
        if (
          x === this.pos[0] + 16 * this.length &&
          y >= this.pos[1] &&
          y + h <= this.pos[1] + 32
        ) {
          player.pipe(this.direction, this.destination);
        }
        break;
      case "UP":
        if (
          y === this.pos[1] + 16 * this.length &&
          x >= this.pos[0] &&
          x + 16 <= this.pos[0] + 32
        ) {
          player.pipe(this.direction, this.destination);
        }
        break;
      case "DOWN":
        if (
          y + h === this.pos[1] &&
          x >= this.pos[0] &&
          x + 16 <= this.pos[0] + 32
        ) {
          player.pipe(this.direction, this.destination);
        }
        break;
    }
  };

  //Note to self: next time, decide on a convention for which thing checks for collisions
  //and stick to it. This is a pain.
  Pipe.prototype.checkCollisions = function () {
    var that = this;
    level.enemies.forEach(function (ent) {
      that.isCollideWith(ent);
    });

    level.items.forEach(function (ent) {
      that.isCollideWith(ent);
    });

    fireballs.forEach(function (ent) {
      that.isCollideWith(ent);
    });

    if (!player.piping) this.isCollideWith(player);
  };

  Pipe.prototype.isCollideWith = function (ent) {
    //long story short: because we scan every item, and and one 'rubble' item is four things with separate positions
    //we'll crash without this line as soon as we destroy a block. OOPS.
    if (ent.pos === undefined) return;

    //the first two elements of the hitbox array are an offset, so let's do this now.
    var hpos1 = [
      Math.floor(this.pos[0] + this.hitbox[0]),
      Math.floor(this.pos[1] + this.hitbox[1]),
    ];
    var hpos2 = [
      Math.floor(ent.pos[0] + ent.hitbox[0]),
      Math.floor(ent.pos[1] + ent.hitbox[1]),
    ];

    //if the hitboxes actually overlap
    if (
      !(
        hpos1[0] > hpos2[0] + ent.hitbox[2] ||
        hpos1[0] + this.hitbox[2] < hpos2[0]
      )
    ) {
      if (
        !(
          hpos1[1] > hpos2[1] + ent.hitbox[3] ||
          hpos1[1] + this.hitbox[3] < hpos2[1]
        )
      ) {
        //if the entity is over the block, it's basically floor
        var center = hpos2[0] + ent.hitbox[2] / 2;
        if (Math.abs(hpos2[1] + ent.hitbox[3] - hpos1[1]) <= ent.vel[1]) {
          ent.vel[1] = 0;
          ent.pos[1] = hpos1[1] - ent.hitbox[3] - ent.hitbox[1];
          ent.standing = true;
          if (ent instanceof Mario.Player) {
            ent.jumping = 0;
          }
        } else if (
          Math.abs(hpos2[1] - hpos1[1] - this.hitbox[3]) > ent.vel[1] &&
          center + 2 >= hpos1[0] &&
          center - 2 <= hpos1[0] + this.hitbox[2]
        ) {
          //ent is under the block.
          ent.vel[1] = 0;
          ent.pos[1] = hpos1[1] + this.hitbox[3];
          if (ent instanceof Mario.Player) {
            ent.jumping = 0;
          }
        } else {
          //entity is hitting it from the side, we're a wall
          ent.collideWall(this);
        }
      }
    }
  };

  //we COULD try to write some shenanigans so that the check gets put into the
  //collision code, but there won't ever be more than a handful of pipes in a level
  //so the performance hit of scanning all of them is miniscule.
  Pipe.prototype.update = function (dt) {
    if (this.destination) this.checkPipe();
  };

  //http://stackoverflow.com/questions/11227809/why-is-processing-a-sorted-array-faster-than-an-unsorted-array
  //I honestly have no idea if javascript does this, but I feel like it makes sense
  //stylistically to prefer branching outside of loops when possible as convention

  //TODO: edit the spritesheet so UP and LEFT pipes aren't backwards.
  Pipe.prototype.render = function (ctx, vX, vY) {
    switch (this.direction) {
      case "DOWN":
        this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY);
        for (var i = 1; i < this.length; i++) {
          this.midsection.render(
            ctx,
            this.pos[0],
            this.pos[1] + i * 16,
            vX,
            vY,
          );
        }
        break;
      case "UP":
        this.endsection.render(
          ctx,
          this.pos[0],
          this.pos[1] + 16 * (this.length - 1),
          vX,
          vY,
        );
        for (var i = 0; i < this.length - 1; i++) {
          this.midsection.render(
            ctx,
            this.pos[0],
            this.pos[1] + i * 16,
            vX,
            vY,
          );
        }
        break;
      case "RIGHT":
        this.endsection.render(ctx, this.pos[0], this.pos[1], vX, vY);
        for (var i = 1; i < this.length; i++) {
          this.midsection.render(
            ctx,
            this.pos[0] + 16 * i,
            this.pos[1],
            vX,
            vY,
          );
        }
        break;
      case "LEFT":
        this.endsection.render(
          ctx,
          this.pos[0] + 16 * (this.length - 1),
          this.pos[1],
          vX,
          vY,
        );
        for (var i = 0; i < this.legth - 1; i++) {
          this.midsection.render(
            ctx,
            this.pos[0],
            this.pos[1] + i * 16,
            vX,
            vY,
          );
        }
        break;
    }
  };
})();