Platformer Starter Kit - OpenProcessing

mySketch
xxxxxxxxxx
 
var level1 = [
  "OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
  "O_________________________V__***__V_______________________VVV______________VVVVVVV____________________O",
  "O__________________**____________________________**___________________________________________________O",
  "O***_____________OOOOOO_________________________OOOO__________________________________________________O",
  "OOOOO___________________________________________OOOO__________________________________________________O",
  "OVVVV____*_^^_*______________^^___*___^_________OOOO___________________*_____________________*^_______O",
  "O_______OOOOOOOO_________OOOOOOOOOOOOOOOOO______VVVV__________________OO____________________OOO_______O",
  "O________________________O_________________*________OOO______*****________OOOOOO____*O________________O",
  "O_____________________________OOOOOOOOOOOOOO__________OOOOOOOOOOOO^^^^^^^^^^^^OOOOOOOO^^^^^^^^^^______O",
  "O_________________OOO_________OOOOOOOOOOOOOO*_____________OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO______O",
  "O******__^^___________________OOOOOOOOOOOOOOO______________VVV_________VVVVVV___________VVVVVVVV______O",
  "OOOOOOOOOOOOOOO_______________VVVVVVVVVVVVVV__________________________________________________________O",
  "O______________OO_______________________________*_____________________________________________________O",
  "O________________^^^^___**_____________________OOO__________________OO____________________________**__O",
  "O________________OOOOOOOOOO_________________________________________OO_______*_^________________OOOOOOO",
  "O^^**_______@________________________________________*______________________OOOO____________________VVO",
  "OOOOOO________________________OO____________________OOO_____________________OOOO_____**_______________O",
  "O_____________________________________*___________*_______*_^^_*_____________________OOOOOO___________O",
  "O_________OOOOOO______________________O___________O______OOOOOOOO______________________________OO_____O",
  "O**___________________________________O___________O______________OOO_________OO_______________________O",
  "OOOOO______________________***________O^^^^^^^^^^^O_____________________________________**____________O",
  "O_______________________OOOOOOOO______OOOOOOOOOOOOO_________________OOOO____________OOOOOOO___________O",
  "O____________*****____________________VVVVVVVVVVVVV__________O^_____________________OOOOOOO_________**O",
  "O_______OOOOOOOOOOOOO________________________________________OO__________________________VV_______OOOOO",
  "O_______OOOOOOOOOOOOO________________________________________________________***______________________O",
  "O****___OOOOOOOOOOOOO_______________________________________________________OOOOO_____________________O",
  "O****___OOOOOOOOOOOOO^^^^^^^^^^^^^^___*************_____*_^_*_____*_^_*_____VVVVV______________^^_____O",
  "OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
  "OOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOOO",
];
​
class Player {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    this.speedX = 0;
    this.speedY = 0;
    this.SPEED = 5;
    this.GRAVITY = 0.5;
    this.direction = null;
    this.inAir = true;
  }
​
  show() {
    push();
    fill("black");
    rect(this.x, this.y, 20, 20);
    fill("white");
    circle(this.x + 10, this.y + 10, 10);
    switch (this.direction) {
      case null:
        fill("black");
        circle(this.x + 10, this.y + 10, 2.5);
        break;
      case "right":
        fill("black");
        circle(this.x + 12, this.y + 10, 2.5);
        break;
      case "left":
        fill("black");
        circle(this.x + 8, this.y + 10, 2.5);
        break;
    }
    pop();
  }
​
  coinCollision() {
    for (var j = 0; j < coins.length; j++) {
      var curCoin = coins[j];
      var playerHitCoin = rectRect(
        this.x,
        this.y,
        20,
        20,
        curCoin.x - 10,
        curCoin.y - 10,
        20,
        curCoin.h
      );
​
      if (playerHitCoin) {
        if (curCoin.visible === true) {
          coinsCollected++;
        }
        curCoin.visible = false;
      }
    }
  }
​
  spikeCollision(playerBB) {
    for (var i = 0; i < spikes.length; i++) {
      var curSpike = spikes[i];
      var playerHitSpike = rectRect(
        playerBB[0],
        playerBB[1],
        playerBB[2],
        playerBB[3],
        curSpike.getBB().x,
        curSpike.getBB().y,
        curSpike.getBB().w,
        curSpike.getBB().h
      );
      if (playerHitSpike) {
        return true;
      }
    }
    return false;
  }
​
  checkCollision(playerBB) {
    for (var j = 0; j < platform.length; j++) {
      var curPlat = platform[j];
      var playerHitPlatform = rectRect(
        playerBB[0],
        playerBB[1],
        playerBB[2],
        playerBB[3],
        curPlat.x,
        curPlat.y,
        curPlat.w,
        curPlat.h
      );
​
      if (playerHitPlatform) {
        return true;
      }
    }
    return false;
  }
​
  update() {
    // check collisions in x directions
    this.coinCollision();
​
    var oldX = this.x;
    var newX = this.x + this.speedX;
    var checkCollisionX = this.checkCollision([newX, this.y, 20, 20]);
    var spikeCollisionX = this.spikeCollision([newX, this.y, 20, 20]);
    if (checkCollisionX) {
      newX = this.x;
    }
​
    // check collisions in y directions
    this.speedY -= this.GRAVITY;
    var newY = this.y - this.speedY;
    var checkCollisionY = this.checkCollision([this.x, newY, 20, 20]);
    var spikeCollisionY = this.spikeCollision([this.x, newY, 20, 20]);
    if (!checkCollisionY) {
      this.y = newY;
    } else {
      this.speedY = 0;
      this.inAir = false;
    }
​
    var reset = spikeCollisionX || spikeCollisionY;
    var deltaX = newX - this.x;
    return [deltaX, reset];
  }
​
  pressedKey(key) {
    switch (key) {
      case "ArrowRight":
      case "d":
      case "D":
        this.speedX = this.SPEED;
        this.direction = "right";
        break;
      case "ArrowLeft":
      case "a":
      case "A":
        this.speedX = -this.SPEED;
        this.direction = "left";
        break;
      case "ArrowUp":
      case "w":
      case "W":
        if (this.inAir == false) {
          this.speedY = 11;
          this.inAir = true;
        }
        break;
    }
  }
​
  releasedKey(key) {
    switch (key) {
      case "ArrowRight":
      case "d":
      case "D":
        this.speedX = 0;
        break;
      case "ArrowLeft":
      case "a":
      case "A":
        this.speedX = 0;
        break;
    }
  }
}
​
class Spike {
  constructor(p1x, p1y, p2x, p2y, p3x, p3y, shape) {
    this.p1x = p1x;
    this.p1y = p1y;
    this.p2x = p2x;
    this.p2y = p2y;
    this.p3x = p3x;
    this.p3y = p3y;
    this.shape = shape;
  }
​
  show() {
    push();
    fill("black");
    triangle(this.p1x, this.p1y, this.p2x, this.p2y, this.p3x, this.p3y);
    pop();
  }
​
  update(deltaX, deltaY) {
    this.p1x += deltaX;
    this.p1y += deltaY;
    this.p2x += deltaX;
    this.p2y += deltaY;
    this.p3x += deltaX;
    this.p3y += deltaY;
  }
​
  getBB() {
    switch (this.shape) {
      case "^":
        return { x: this.p1x, y: this.p1y - 20, w: 20, h: 20 };
      case "V":
        return { x: this.p1x, y: this.p1y, w: 20, h: 20 };
    }
  }
}
​
class Platform {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
  }
  
  show() {
    push()
    fill("black")
    rect(this.x, this.y, this.w, this.h)
    pop()
  }
  
  update(deltaX, deltaY) {
    this.x += deltaX;
    this.y += deltaY;
  }
}
​
class Coin {
  constructor(x, y, w, h) {
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.visible = true;
    this.x0 = x;
  }
​
  show() {
    if (this.visible) {
      push();
      fill("gold");
      ellipse(this.x, this.y, this.w, this.h);
      pop();
    }
  }
​
  update(deltaX, deltaY) {
    this.x += deltaX;
    this.y += deltaY;
    this.w = 20 * sin(frameCount * 0.075);
  }
}
​
function setup() {
  createCanvas(650, 580);
  this.focus();
  var data = loadLevel(level1);
  player = data[0];
  platform = data[1];
  spikes = data[2];
  coins = data[3];
  coinsCollected = 0;
  deltaX = 0;
}
​
function draw() {
  background(220);
​
  // show
  for (var j = 0; j < platform.length; j++) {
    platform[j].show();
  }
​
  for (var i = 0; i < spikes.length; i++) {
    spikes[i].show();
  }
  
  for (var r = 0; r < coins.length; r++) {
    coins[r].show();
  }  
  player.show();
​
  // update
  var result = player.update();
  var deltaX = result[0];
  var reset = result[1];
​
  if (reset) {
    resetGame()
    return;
  }
  for (var c = 0; c < platform.length; c++) {
    platform[c].update(-deltaX, 0);
  }
  
  for (var s = 0; s < spikes.length; s++) {
    spikes[s].update(-deltaX, 0);
  }
  
  for (var d = 0; d < coins.length; d++) {
    coins[d].update(-deltaX, 0);
  }
  
  push()
  fill("purple")
  textSize(30)
  text(coinsCollected + " / " + coins.length + " Coins", 30, 50)
  pop()
}
​
function loadLevel(level) {
  var platforms = [];
  var spikes = [];
  var coins = [];
  var player;
​
  for (var row = 0; row < level.length; row++) {
    var curRow = level[row];
    for (var col = 0; col < curRow.length; col++) {
      var curChar = curRow[col];
      switch (curChar) {
        case "O":
          platforms.push(new Platform(col * 20, row * 20, 20, 20));
          break;
        case "^":
          spikes.push(
            new Spike(
              col * 20,
              row * 20 + 20,
              col * 20 + 10,
              row * 20,
              col * 20 + 20,
              row * 20 + 20,
              "^"
            )
          );
          break;
        case "V":
          spikes.push(
            new Spike(
              col * 20,
              row * 20,
              col * 20 + 10,
              row * 20 + 20,
              col * 20 + 20,
              row * 20,
              "V"
            )
          );
          break;
        case "*":
          coins.push(new Coin(col * 20 + 5, row * 20 + 10, 20, 20));
          break;
​
        case "@":
          player = new Player(col * 20, row * 20);
          break;
      }
    }
  }
  return [player, platforms, spikes, coins];
}
​
function keyPressed() {
  player.pressedKey(key);
}
​
function keyReleased() {
  player.releasedKey(key);
}
​
function rectRect(r1x, r1y, r1w, r1h, r2x, r2y, r2w, r2h) {
  return (
    r1x + r1w >= r2x && r1x <= r2x + r2w && r1y + r1h >= r2y && r1y <= r2y + r2h
  );
}
​
function resetGame() {
  var data = loadLevel(level1);
  player = data[0];
  platform = data[1];
  spikes = data[2];
  
  for (var c = 0; c < coins.length; c++) {
    coins[c].update(-(coins[c].x - coins[c].x0), 0);
  }
}
​