GrappleStomp 0.1

by ElijahCirioli

HTML

<canvas id="myCanvas" width="900" height="560" style="border:2px solid #000000;"></canvas>

JavaScript

//setup canvas
var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

//initialize variables
var screenWidth = 900;
var screenHeight = 560;
var framerate = 30;
var gravity = 2;

//create map
var map = [ //array of rectangles made up of arrays of points made up of an array
[[0, 0], [900, 30]],
[[0, 530], [900, 560]],
[[0, 0], [30, 560]],
[[870, 0], [900, 560]],
[[190, 310], [710, 350]]
];

function Player(x, y, color) { //create the game object of a player
	this.x = x;
	this.y = y;
	this.xVel = 0;
	this.yVel = 0;
	this.maxSpeed = 8;
	this.moveSpeed = 6;
	this.jumpSpeed = 22;
	this.xDir = 0;
	this.lookDir = 0;
	this.width = 40;
	this.height = 65;
	this.color = color;
	this.jumping = false;
}

var playerOne = new Player(200, 250, "red");
var playerTwo = new Player(700, 250, "blue");

function gameCycle() { //the function that actually runs the game
	drawBackground();
	playerOne.update();
	playerTwo.update();
	drawMap();
}

function drawBackground() {
	context.fillStyle = "black";
	context.fillRect(0, 0, screenWidth, screenHeight);
}

function drawMap() {
	context.fillStyle = "white";
	for (var i = 0; i < map.length; i++) {
		context.fillRect(map[i][0][0], map[i][0][1], map[i][1][0] - map[i][0][0], map[i][1][1] - map[i][0][1]);
	}
}

Player.prototype.update = function () {
	this.move();
	this.draw();
}

Player.prototype.move = function() {
	if (this.xDir === 0) {
		this.xVel *= 0.7;
		if (this.xVel > -0.3 && this.xVel < 0.3 && this.xDir === 0) {
			this.xVel = 0;
		}
	}

	if ((this.xVel < this.maxSpeed && this.xDir > 0) || (this.xVel > -this.maxSpeed && this.xDir < 0)) {
		this.xVel += (this.xDir * (this.moveSpeed / 5));
		
		if (this.xVel > this.maxSpeed) {
			this.xVel = this.maxSpeed;
		} else if (this.xVel < -this.maxSpeed) {
			this.xVel = -this.maxSpeed;
		}
	}
	
	this.yVel += gravity;
	
	this.newX = this.x + this.xVel;
	this.newY = this.y + this.yVel;
	
	this.canMoveX();
	this.canMoveY();
}

Player.prototype.canMoveX =...