<canvas id="flappyBlock"></canvas>

body {
  background-color: #000;
  overflow: hidden;
}

/*

FLAPPY BLOCK

Press s to start the game.

Space: Flap wings

*/

var c = document.getElementById("flappyBlock");
var ctx = c.getContext("2d");

var WIDTH = window.innerWidth;
var HEIGHT = window.innerHeight;

c.width = WIDTH;
c.height = HEIGHT;

function JVector(x, y) {
  this.x = x;
  this.y = y;
}

JVector.prototype.add = function(vector) {
  this.x += vector.x;
  this.y += vector.y;
}

JVector.prototype.mult = function(scalar) {
  this.x *= scalar;
  this.y *= scalar;
}

JVector.prototype.div = function(scalar) {
  this.x /= scalar;
  this.y /= scalar;
}

JVector.prototype.mag = function() {
  return Math.sqrt((this.x * this.x) + (this.y * this.y));
}

JVector.prototype.normalize = function() {
  var m = this.mag();
  this.div(m);
}

function Bird(posVec, velVec, accVec, size, maxSpeed, flapStrength) {
  this.pos = posVec;
  this.vel = velVec;
  this.acc = accVec;

  this.size = size;

  this.maxSpeed = maxSpeed;

  this.flapStrength = flapStrength;

  this.flapping = false;
}

Bird.prototype.flap = function() {
  this.vel = new JVector(this.vel.x, -this.flapStrength);
}

Bird.prototype.reset = function() {
  this.pos = new JVector(0, HEIGHT / 2);
  this.vel = new JVector(0, 0);
}

Bird.prototype.update = function() {
  this.vel.add(this.acc);
  this.pos.add(this.vel);
  if (this.vel.mag() >= this.maxSpeed) {
    this.vel.normalize();
    this.vel.mult(this.maxSpeed);
  }
}

Bird.prototype.display = function() {
  ctx.fillStyle = "#fff";
  ctx.fillRect(this.pos.x - this.size, this.pos.y - this.size, this.size, this.size);
  if (!this.flapping) {
    ctx.beginPath();
    ctx.moveTo(this.pos.x - this.size, this.pos.y - this.size);
    ctx.lineTo(this.pos.x - this.size / 2, this.pos.y - this.size - this.size);
    ctx.lineTo(this.pos.x, this.pos.y - this.size);
    ctx.closePath;
  }
  if (this.flapping) {
    ctx.beginPath();
    ctx.moveTo(this.pos.x - this.size, this.pos.y);
    ctx.lineTo(this.pos.x - this.size / 2, this.pos.y + this.size);
    ctx.lineTo(this.pos.x, this.pos.y);
    ctx.closePath;
  }
  ctx.strokeStyle = "#fff";
  ctx.stroke();
}

Bird.prototype.checkWorld = function() {
  var x = this.pos.x;
  var y = this.pos.y;
  if (x <= 0) {
    this.pos.x = WIDTH;
  } else if (x > WIDTH) {
    this.pos.x = 0;
  }
  if (y <= 0) {
    this.pos.y = 0 + this.size;
  } else if (y > HEIGHT) {
    this.pos.y = HEIGHT;
  }
}

Bird.prototype.frame = function() {
  this.update();
  this.checkWorld();
  this.display();
}

function Obstacle(x) {
  this.x = x;
  this.height = (Math.random() * 2 - 1) * (HEIGHT / 2);
  this.width = Math.random() * 50 + 20;
}

Obstacle.prototype.display = function() {
  ctx.fillStyle = "#fff";
  if (this.height >= 0) {
    ctx.fillRect(this.x - this.width / 2, 0, this.width, this.height);
  } else if (this.height < 0) {
    ctx.fillRect(this.x - this.width / 2, HEIGHT + this.height, this.width, HEIGHT);
  }
  // console.log(this.x + ", " + this.height + ", " + this.width);
}

Obstacle.prototype.detectCollision = function(player) {
  var playerX = player.pos.x;
  var playerY = player.pos.y;

  if (this.height >= 0) {
    if (playerX >= this.x - this.width / 2 && playerX <= this.x + this.width && playerY <= this.height) {
      console.log("Player Hit!");
      return true;
    }
  } else if (this.height < 0) {
    if (playerX >= this.x - this.width / 2 && playerX <= this.x + this.width && playerY >= HEIGHT + this.height) {
      console.log("Player Hit!");
      return true;
    }
  }
  return false;
}

function ObstacleManager(maxNum) {
  this.maxNum = maxNum;
  this.obstacles = [];

  this.generateObstacles = function() {
    this.obstacles = [];
    for (var i = 0; i < this.maxNum; i++) {
      var xPos = ((i * WIDTH / this.maxNum) + Math.floor(Math.random() * 50)) + WIDTH / 4;
      this.obstacles.push(new Obstacle(xPos));
    }
  }

  this.renderObstacles = function() {
    for (var i = 0; i < this.obstacles.length; i++) {
      this.obstacles[i].display();
    }
  }

  this.detectCollisions = function(player) {
    for (var i = 0; i < this.obstacles.length; i++) {
      var collision = this.obstacles[i].detectCollision(player);
      if (collision) {
        return true;
      }
    }
  }
}

function Score() {
  this.score = 0;

  this.increment = function() {
    this.score += 100;
    console.log(this.score);
  }
  
  this.reset = function() {
    this.score = 0;
  }

  this.display = function() {
    ctx.fillStyle = "#fff";
    ctx.font = "20px Oswald";
    ctx.textAlign = "left";
    ctx.fillText("Score: " + this.score, 15, 35);
  }
}

var bg = "#000";

var Game = function() {
  this.startScreen = true;
  this.playing = false;
  this.gameOver = false;

  this.locVec = new JVector(0, HEIGHT / 2);
  this.velVec = new JVector(0, 0);
  this.accVec = new JVector(0.1, 0.4);

  this.score = new Score();

  this.player = new Bird(this.locVec, this.velVec, this.accVec, 20, 12, 10);

  this.obstacleManager = new ObstacleManager(5);

  this.gravity = new JVector(0, .1);

  this.startGame = function() {
    this.startScreen = false;
    this.playing = true;
    this.gameOver = false;
    this.obstacleManager.generateObstacles();
    this.player.reset();
  }

  this.killPlayer = function() {
    this.startScreen = false;
    this.playing = false;
    this.gameOver = true;
  }

  this.draw = function() {
    ctx.fillStyle = bg;
    ctx.fillRect(0, 0, WIDTH, HEIGHT);

    if (this.startScreen) {
      ctx.strokeStyle = "#fff";
      ctx.fillStyle = "#fff";
      ctx.font = "48px Oswald";
      ctx.textAlign = "center";
      ctx.strokeText("Flappy Block", WIDTH / 2, HEIGHT / 2);
      ctx.font = "18px Oswald";
      ctx.fillText("Hit 'S' to start the game!", WIDTH / 2, HEIGHT / 2 + 40);
      this.score.reset();
    }

    if (this.playing) {
      this.score.display();
      this.player.vel.add(this.gravity);
      this.obstacleManager.renderObstacles();
      var collision = this.obstacleManager.detectCollisions(this.player);
      if (collision) {
        this.killPlayer();
      }
      this.player.frame();
      if (this.player.pos.x == 0) {
        this.obstacleManager.generateObstacles();
        this.score.increment();
      }
    }

    if (this.gameOver) {
      ctx.strokeStyle = "#fff";
      ctx.fillStyle = "#fff";
      ctx.font = "48px Oswald";
      ctx.textAlign = "center";
      ctx.strokeText("Gameover!", WIDTH / 2, HEIGHT / 2);
      ctx.font= "24px Oswald";
      ctx.fillText("Final Score: " + this.score.score, WIDTH / 2, HEIGHT / 2 + 40);
      ctx.font = "18px Oswald";
      ctx.fillText("Hit 'S' to play again!", WIDTH / 2, HEIGHT / 2 + 80);
    }

    requestAnimationFrame(this.draw.bind(this));
  }
}

var flappyBlock = new Game();
flappyBlock.draw();

window.addEventListener("resize", function() {
  WIDTH = window.innerWidth;
  HEIGHT = window.innerHeight;

  c.width = WIDTH;
  c.height = HEIGHT;
});

document.onkeydown = keyDown;
document.onkeyup = keyUp;

function keyDown(e) {
  var event = e || window.event;
  var key = event.keyCode;
  console.log(key);

  if (key == 83 && !flappyBlock.playing) {
    flappyBlock.startGame();
    flappyBlock.score.reset();
  }

  if (key == 32 && !flappyBlock.player.flapping && flappyBlock.playing) {
    flappyBlock.player.flap();
    flappyBlock.player.flapping = true;
  }
}

function keyUp(e) {
  var event = e || window.event;
  var key = event.keyCode;
  console.log(key);

  if (key == 32 && flappyBlock.player.flapping) {
    flappyBlock.player.flapping = false;
  }
}

function lerp(current, target, percent) {
  return (target - current) * percent;
}