dubpirate/index.html

## index.html
<!DOCTYPE html>
<html>

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width">
    <title>p5js Platform Mechanics</title>
    <link href="style.css" rel="stylesheet" type="text/css" />
  </head>

  <body>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
    <script src="platform.js"></script>
    <script src="script.js"></script>
  </body>

</html>

## platform.js
/*

  This file is used if students want to create a platformer. Platform collision physics is difficult, and this program is designed to let them setup a platforming environment with minimal effort. See the `script.js` file for an example of how to use these methods.

  Don't forget to include <script src='platform.js'></script> before the 'script.js' tag in the HTML file.

*/

platforms = [];

var current; // Current platform the player is over.

function Platform(x, y, w) {
  this.x = x;

  this.left = x;
  this.right = x + w;

  this.y = y;

  this.top = y;
  this.bottom = y + 20;

  this.w = w;

  this.h = 20;

  this.draw = function() {
    rect(this.x, this.y, this.w, 20);
  }
}

function checkPlayer(player) {
  if (player.hover === undefined) {
    player.hover = 380;
  }

  if (player.yvel === undefined) {
    player.yvel = 0;
  }

  if (player.xvel === undefined) {
    player.xvel = 0;
  }

  if (player.jumping === undefined) {
    player.jumping = false;
  }

  if (player.stop === undefined) {
    player.stop = function(hover) {
      this.hover = hover;
      this.jumping = false;
      this.yvel = 0;
    }
  }
}

function addPlatform(x, y, w) {
  platforms.push(new Platform(x, y, w));
}

function checkPlatforms(player) {

  for (let platform of platforms) {

    checkCollision(player, platform);
    platform.draw();
    shouldFall(player);

  }

}

function checkCollision(player, platform){

  // Top down collision.
  if (overPlatform(platform, player)) {


    // If yvel < 0, the player is moving upwards,
    // so checking collisions doesn't matter.
    if (player.yvel < 0) {
      return;
    }

    // If the player is about to pass through
    // the top of the platform (> platform.top),
    // stop the current player.
    if ((player.y + player.yvel + player.r/2) > platform.top) {
      player.stop(platform.top - player.r/2);
      current = platform;
    }

  }
}

function shouldFall(player) {
  if (current === undefined) {
    return;
  }

  if (!overPlatform(current, player)) {
    player.jumping = true;
    current = undefined;
  }
}

function overPlatform(platform, player) {
  return player.y - player.r/2 <= platform.top && player.x < platform.right && this.player.x > platform.left;
}

function controls(player) {

  player.y += player.yvel;
  player.x += player.xvel;

  if (player.y > 380) {
    player.stop(380);
  }

  if (keyIsDown(UP_ARROW) && !player.jumping) {
    player.yvel -= 15;
    player.jumping = true;
  }

  if (keyIsDown(LEFT_ARROW)) {
    player.xvel -= 3;
  }

  if (keyIsDown(RIGHT_ARROW)) {
    player.xvel += 3;
  }

  if (player.jumping) {
    player.yvel += 1;
  } else {
    player.y = player.hover;
  }


  if (player.xvel <= 1 && player.xvel >= -1) {
    player.xvel = 0;
  } else {
    player.xvel = player.xvel*3/4;
  }
}

## script.js
/**
 * Please read all comments in this file.
 *
 * Students should already have the p5js
 * boilerplate working (setup, draw, player,
 * movement, and velocity rules).
 *
 *
 * This example shows how students can use the
 * platforms in their own program.
 */

var player = {
  x: 200,
  y: 380,
  r: 40,

  draw: function() {
    ellipse(
      this.x,
      this.y,
      this.r,
      this.r
    );
  },


}

var goal = {
  x: 270,
  y: 60,

  draw: function() {
    fill(255, 255, 0);

    triangle(
      this.x, this.y,
      this.x + 15, this.y - 26,
      this.x + 30, this.y
    );

    fill(255);
  }
}

function setup() {
  createCanvas(400, 400);

  checkPlayer(player);

  // Adding a platform adds a platform to the 'platforms' array.
  // It takes an x, y, and width parameter.
  addPlatform(50, 200, 100);

  addPlatform(200, 100, 100);

  addPlatform(200, 300, 100);

}

function draw() {
  background(110, 110, 220);

  // Checkplatforms detects colisions
  checkPlatforms(player);

  controls(player);

  goal.draw();

  player.draw();
}

## style.css
Empty file
	<!DOCTYPE html>
	<html>

	<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>p5js Platform Mechanics</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
	</head>

	<body>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.2/p5.min.js"></script>
	<script src="platform.js"></script>
	<script src="script.js"></script>
	</body>

	</html>
	/*

	This file is used if students want to create a platformer. Platform collision physics is difficult, and this program is designed to let them setup a platforming environment with minimal effort. See the `script.js` file for an example of how to use these methods.

	Don't forget to include <script src='platform.js'></script> before the 'script.js' tag in the HTML file.

	*/

	platforms = [];

	var current; // Current platform the player is over.

	function Platform(x, y, w) {
	this.x = x;

	this.left = x;
	this.right = x + w;

	this.y = y;

	this.top = y;
	this.bottom = y + 20;

	this.w = w;

	this.h = 20;

	this.draw = function() {
	rect(this.x, this.y, this.w, 20);
	}
	}

	function checkPlayer(player) {
	if (player.hover === undefined) {
	player.hover = 380;
	}

	if (player.yvel === undefined) {
	player.yvel = 0;
	}

	if (player.xvel === undefined) {
	player.xvel = 0;
	}

	if (player.jumping === undefined) {
	player.jumping = false;
	}

	if (player.stop === undefined) {
	player.stop = function(hover) {
	this.hover = hover;
	this.jumping = false;
	this.yvel = 0;
	}
	}
	}

	function addPlatform(x, y, w) {
	platforms.push(new Platform(x, y, w));
	}

	function checkPlatforms(player) {

	for (let platform of platforms) {

	checkCollision(player, platform);
	platform.draw();
	shouldFall(player);

	}

	}

	function checkCollision(player, platform){

	// Top down collision.
	if (overPlatform(platform, player)) {


	// If yvel < 0, the player is moving upwards,
	// so checking collisions doesn't matter.
	if (player.yvel < 0) {
	return;
	}

	// If the player is about to pass through
	// the top of the platform (> platform.top),
	// stop the current player.
	if ((player.y + player.yvel + player.r/2) > platform.top) {
	player.stop(platform.top - player.r/2);
	current = platform;
	}

	}
	}

	function shouldFall(player) {
	if (current === undefined) {
	return;
	}

	if (!overPlatform(current, player)) {
	player.jumping = true;
	current = undefined;
	}
	}

	function overPlatform(platform, player) {
	return player.y - player.r/2 <= platform.top && player.x < platform.right && this.player.x > platform.left;
	}

	function controls(player) {

	player.y += player.yvel;
	player.x += player.xvel;

	if (player.y > 380) {
	player.stop(380);
	}

	if (keyIsDown(UP_ARROW) && !player.jumping) {
	player.yvel -= 15;
	player.jumping = true;
	}

	if (keyIsDown(LEFT_ARROW)) {
	player.xvel -= 3;
	}

	if (keyIsDown(RIGHT_ARROW)) {
	player.xvel += 3;
	}

	if (player.jumping) {
	player.yvel += 1;
	} else {
	player.y = player.hover;
	}


	if (player.xvel <= 1 && player.xvel >= -1) {
	player.xvel = 0;
	} else {
	player.xvel = player.xvel*3/4;
	}
	}
	/**
	* Please read all comments in this file.
	*
	* Students should already have the p5js
	* boilerplate working (setup, draw, player,
	* movement, and velocity rules).
	*
	*
	* This example shows how students can use the
	* platforms in their own program.
	*/

	var player = {
	x: 200,
	y: 380,
	r: 40,

	draw: function() {
	ellipse(
	this.x,
	this.y,
	this.r,
	this.r
	);
	},


	}

	var goal = {
	x: 270,
	y: 60,

	draw: function() {
	fill(255, 255, 0);

	triangle(
	this.x, this.y,
	this.x + 15, this.y - 26,
	this.x + 30, this.y
	);

	fill(255);
	}
	}

	function setup() {
	createCanvas(400, 400);

	checkPlayer(player);

	// Adding a platform adds a platform to the 'platforms' array.
	// It takes an x, y, and width parameter.
	addPlatform(50, 200, 100);

	addPlatform(200, 100, 100);

	addPlatform(200, 300, 100);

	}

	function draw() {
	background(110, 110, 220);

	// Checkplatforms detects colisions
	checkPlatforms(player);

	controls(player);

	goal.draw();

	player.draw();
	}