spiderman-game.js

(function(window, document) {

// change this to relative path (relative to script) or to absolute path
// where the audio, fonts and images folders are located
// (include a slash at the end)
var RESOURCES_FOLDER_PATH = "";

var requestAnimationFrame = (function() {
	if (window.requestAnimationFrame) return window.requestAnimationFrame;
	if (window.oRequestAnimationFrame) return window.oRequestAnimationFrame;
	if (window.msRequestAnimationFrame) return window.msRequestAnimationFrame;
	if (window.mozRequestAnimationFrame) return window.mozRequestAnimationFrame;
	return function(callback) {
		setTimeout(callback, 1000 / 60);
	}
})();

window.requestAnimFrame = requestAnimationFrame;

var link = document.createElement("link");
link.setAttribute("rel", "stylesheet");
link.setAttribute("href", RESOURCES_FOLDER_PATH + "css/spiderman-game.css");
document.head.appendChild(link);


var RESOURCES = {
	"JUMP"               : "images/jump.png",
	"RUNNING_CHANGE_STEP": "images/running-change-step.png",
	"RUNNING_LEFT_STEP"  : "images/running-left-step.png",
	"RUNNING_RIGHT_STEP" : "images/running-right-step.png",
	"SHOOT_CHANGE_STEP"  : "images/shoot-change-step.png",
	"SHOOT_JUMP"         : "images/shoot-jump.png",
	"SHOOT_LEFT-STEP"    : "images/shoot-left-step.png",
	"SHOOT_RIGHT-STEP"   : "images/shoot-right-step.png",
	"SHOOT"              : "images/shoot.png",
	"SLIDE"              : "images/slide.png",
	"STANDING"           : "images/standing.png",
	"WEB_PROJECTILE"     : "images/web.png",
	"BACKGROUND"         : "images/background.jpg",
	"ROOF"               : "images/wall.jpg",
	"BUILDING"           : "images/building.png",
	"SPIDER_HEAD"        : "images/spider-head.png",
	"HEART"              : "images/heart.png",
	"VENOM"              : "images/venom.png",
	"THUG"               : "images/thug.png",
	"KNIFE"              : "images/knife.png",
};

var AUDIO_RESOURCES = {
	"AMAZING_SPIDER_MAN_2" : new Audio(RESOURCES_FOLDER_PATH + "audio/amazing-spider-man-2.mp3"),
	"FRIENDLY_SPIDERMAN"   : new Audio(RESOURCES_FOLDER_PATH + "audio/60-theme-song.mp3"),
	"MOVIE_THEME"          : new Audio(RESOURCES_FOLDER_PATH + "audio/old-theme.mp3"),
	"ANIMATED_SERIES"      : new Audio(RESOURCES_FOLDER_PATH + "audio/animated-series-theme.mp3"),
	"SHOOT"                : new Audio(RESOURCES_FOLDER_PATH + "audio/shooting-web.mp3"),
};

var AUDIO_LOOP = [
	"AMAZING_SPIDER_MAN_2",
	"FRIENDLY_SPIDERMAN",
	"MOVIE_THEME",
	"ANIMATED_SERIES",
];

var KEY = {
	ARROW_LEFT: 37,
	ARROW_UP: 38,
	ARROW_RIGHT: 39,
	ARROW_DOWN: 40,
	SPACEBAR: 32,
	A: 65,
	S: 87,
	D: 68,
	W: 87,
	ESC: 27,
};

var DIRECTION = {
	RIGHT: 1,
	LEFT: -1,
}

function SpidermanGame(opts) {
	var options = {
		canvas: "canvas",
		score: 0,
		muted: false,
		soundEffects: true,
	};

	opts = opts || {};

	for (var option in options) {
		if (opts.hasOwnProperty(option)) {
			options[option] = opts[option];
		}

		this[option] = options[option];
	}

	// how many frames have passed
	this.frame = 0;
	this.resources = {};

	this.cameraX = 0;
	this.score = this.score || 0;

	this.scene = {
		spiderman: null,
		projectiles: [],
		roofs: [],
		enemies: [],
	}; // object that contains information about the next scene
}

SpidermanGame.prototype.paused             = false;
SpidermanGame.prototype.initialized        = false;
SpidermanGame.prototype.soundEffects       = true;
SpidermanGame.prototype.escapeKey          = false;
SpidermanGame.prototype.muted              = false;
SpidermanGame.prototype.slowmotion         = false;

SpidermanGame.prototype.load = function() {
	if (this.initialized) return false;

	var self = this;

	this.canvas = document.querySelector(this.canvas);
	if (!this.canvas) {
		this.canvas = document.createElement("canvas");
		document.body.appendChild(this.canvas);
	}
	this.ctx = this.canvas.getContext("2d");
	this.canvas.height = 400;
	this.canvas.width = 711;

	var menu = document.createElement("div");
	menu.innerHTML = 
	'<div class="spiderman-game-menu-container">' +
		'<div class="spiderman-game-menu-title">PAUSED</div>' +
		'<div class="spiderman-game-menu-button spiderman-game-menu-button-resume">RESUME</div>' +
		'<div class="spiderman-game-menu-button spiderman-game-menu-button-mute-sounds">MUTE SOUNDS</div>' +
		'<div class="spiderman-game-menu-button spiderman-game-menu-button-mute-music">MUTE MUSIC</div>' +
		'<div class="spiderman-game-menu-button spiderman-game-menu-button-mute-slowmotion">TOGGLE SLOWMOTION</div>' +
	'</div>';
	menu = menu.firstChild;
	menu.style.display = "none";
	menu.querySelector(".spiderman-game-menu-button-resume").onclick = function() {
		self.unpause();
	}

	menu.querySelector(".spiderman-game-menu-button-mute-sounds").onclick = function() {
		if (self.soundEffects) {
			self.soundEffects = false;
			this.innerHTML = "UNMUTE SOUNDS";
		} else {
			self.soundEffects = true;
			this.innerHTML = "MUTE SOUNDS";
		}
	}

	menu.querySelector(".spiderman-game-menu-button-mute-music").onclick = function() {
		if (self.muted) {
			self.unmute();
			this.innerHTML = "MUTE MUSIC";
		} else {
			self.mute();
			this.innerHTML = "UNMUTE MUSIC";
		}
	}

	menu.querySelector(".spiderman-game-menu-button-mute-slowmotion").onclick = function() {
		if (self.slowmotion) {
			self.setSlowmotion(false);
		} else {
			self.setSlowmotion(true);
		}
	}
	document.body.appendChild(menu);
	this.pauseMenu = menu;

	var gameoverMenu = document.createElement("div");
	gameoverMenu.innerHTML = 
	'<div class="spiderman-game-menu-container">' +
		'<div class="spiderman-game-menu-title">GAME OVER</div>' +
		'<div class="spiderman-game-menu-title">FINAL SCORE: <span class="spiderman-game-score">0</span></div>' +
		'<div class="spiderman-game-menu-button spiderman-game-menu-button-restart">RESTART</div>' +
	'</div>';
	gameoverMenu = gameoverMenu.firstChild;

	gameoverMenu.querySelector(".spiderman-game-menu-button-restart").onclick = function() {
		self.restart();
	}
	document.body.appendChild(gameoverMenu);
	this.gameoverMenu = gameoverMenu;

	var spiderman = new SpiderMan(this);
	this.spiderman = spiderman;

	document.addEventListener("keydown", function(e) {
		var keyCode = e.keyCode || e.which;

		// fire this on the FIRST keydown callback
		if (keyCode == KEY.ESC && !self.escapeKey) {
			self.escapeKey = true;
			if (self.paused) {
				self.unpause();
			} else {
				self.pause();
			}
		}

		self.spiderman.keydown(e.keyCode || e.which);
	});

	document.addEventListener("keyup", function(e) {
		var keyCode = e.keyCode || e.which;
		if (keyCode == KEY.ESC) {
			self.escapeKey = false;
		}

		self.spiderman.keyup(keyCode);
	});

	window.addEventListener("resize", function() {
		// resizing might change the canvas position, re position the menu if it is visible
		if (self.paused) {
			self.showPauseMenu();
		}
		if (self.gameIsOver) {
			self.showGameoverMenu();
		}
	});

	for (var i = 0; i < AUDIO_LOOP.length; i++) {
		var soundName = AUDIO_LOOP[i];
		var sound = AUDIO_RESOURCES[soundName];
		sound.setAttribute("data-name", soundName);
		sound.ontimeupdate = function() {
			if (this.currentTime >= this.duration) {
				var current = AUDIO_LOOP.indexOf(this.getAttribute("data-name"));
				var next = (current + 1) % (AUDIO_LOOP.length);
				
				self.playSound(AUDIO_LOOP[next], false, 0);
			}
		}
	}

	// to show that canvas is here, but is being loaded
	this.canvas.style.backgroundColor = "black";
	this.ctx.font = "30px Helvetica";
	this.ctx.textAlign = "center";
	this.ctx.fillStyle = "white";
	this.ctx.fillText("Loading...", this.canvas.width / 2, this.canvas.height / 2);

	return new Promise(function(resolve, reject) {
		var reourcesArray = [];

		for (var resource in RESOURCES) {
			reourcesArray.push({
				name: resource,
				source: RESOURCES_FOLDER_PATH + RESOURCES[resource],
			});
		}

		var index = 0;

		function loadNext() {
			if (!reourcesArray[index]) {
				var roof = new Roof(self, 0);

				self.scene.spiderman = spiderman;
				self.scene.roofs = [roof];
				self.update();
				self.playSound(AUDIO_LOOP[0], false, 0);

				// if game was muted in initial options
				if (self.muted) self.mute();

				return resolve();
			}

			var resource = reourcesArray[index];
			var img = new Image();

			img.onload = function() {
				index++;
				self.resources[resource.name] = img;
				loadNext();
			}
			img.src = resource.source;
		}

		loadNext();
	});
}

SpidermanGame.prototype.setSlowmotion = function(slowmo) {
	if (slowmo) {
		this.slowmotion = true;

		window.requestAnimFrame = function(callback) {
			setTimeout(callback, 1000 / 10);
		}

		for (var audio in AUDIO_RESOURCES) {
			AUDIO_RESOURCES[audio].playbackRate = 0.5;
		}
	} else {
		this.slowmotion = false;

		window.requestAnimFrame = requestAnimationFrame;

		for (var audio in AUDIO_RESOURCES) {
			AUDIO_RESOURCES[audio].playbackRate = 1;
		}
	}
}

SpidermanGame.prototype.mute = function() {
	this.muted = true;

	for (var audio in AUDIO_RESOURCES) {
		AUDIO_RESOURCES[audio].volume = 0;
	}
}

SpidermanGame.prototype.unmute = function() {
	this.muted = false;

	for (var audio in AUDIO_RESOURCES) {
		AUDIO_RESOURCES[audio].volume = 1;
	}
}

SpidermanGame.prototype.showPauseMenu = function() {
	if (this.gameoverMenu.style.display == "block") return;
	var pauseMenu = this.pauseMenu;

	var canvasRect = this.canvas.getBoundingClientRect(); // includes CSS translations
	var left = canvasRect.left;
	var top = canvasRect.top;

	this.pauseMenu.style.display = "block";
	this.pauseMenu.style.left = (left + this.canvas.width / 2) + "px";
	this.pauseMenu.style.top = (top + this.canvas.height / 2) + "px";
}

SpidermanGame.prototype.showGameoverMenu = function() {
	var gameoverMenu = this.gameoverMenu;
	this.gameoverMenu.querySelector(".spiderman-game-score").innerHTML = this.score;

	var canvasRect = this.canvas.getBoundingClientRect(); // includes CSS translations
	var left = canvasRect.left;
	var top = canvasRect.top;

	this.gameoverMenu.style.display = "block";
	this.gameoverMenu.style.left = (left + this.canvas.width / 2) + "px";
	this.gameoverMenu.style.top = (top + this.canvas.height / 2) + "px";
}

SpidermanGame.prototype.pause = function() {
	this.paused = true;
	this.showPauseMenu();
};

SpidermanGame.prototype.unpause = function() {
	this.paused = false;

	this.pauseMenu.style.display = "none";

	this.update();
}

SpidermanGame.prototype.playSound = function(audio, clone, currentTime) {
	audio = audio && audio.play ? audio : AUDIO_RESOURCES[audio];

	if (audio && audio.play) {
		if (clone) {
			audio = audio.cloneNode(true);
		}

		if (currentTime != undefined) {
			audio.currentTime = currentTime;
		}

		return audio.play();
	}
};

SpidermanGame.prototype.pauseSound = function(audio) {
	if (audio && audio.pause) {
		return audio.pause();
	}

	if (AUDIO_RESOURCES[audio]) {
		AUDIO_RESOURCES[audio].pause();
	}
}

SpidermanGame.prototype.drawBackground = function() {
	var background = this.resources.BACKGROUND;
	var backgroundWidth = background.width;
	var backgroundHeight = background.height;

	var x = this.cameraX / 5 * -1;
	var y = 0;

	x %= Math.min(background.width, this.canvas.width);

	var ratio = backgroundWidth / backgroundHeight;
	this.ctx.drawImage(background, x, y, this.canvas.height * ratio, this.canvas.height);
	this.ctx.drawImage(background, x + this.canvas.height * ratio, y, this.canvas.height * ratio, this.canvas.height);
}

SpidermanGame.prototype.drawRoofs = function() {
	var roofs = this.scene.roofs;

	for (var i = 0; i < roofs.length; i++) {
		roofs[i].update();
	}

	// if roof left the frame and was removed, add another one
	if (roofs.length < 3) {
		var lastRoof = roofs[roofs.length - 1];
		var x = lastRoof.x + lastRoof.fullWidth + Math.round(Math.random() * 50) + 100;

		var roof = new Roof(this, x);
		this.addRoof(roof);
		roofs[0].update();
	}
}

SpidermanGame.prototype.drawEnemies = function() {
	var enemies = this.scene.enemies;

	for (var i = 0; i < enemies.length; i++) {
		enemies[i].update();
	}
}

SpidermanGame.prototype.update = function() {
	if (this.paused) return;
	if (this.gameIsOver) return;

	// draw the scene
	var scene = this.scene;
	var spiderman = scene.spiderman;
	var projectiles = scene.projectiles;

	// clear the canvas for re drawing
	this.ctx.clearRect(0, 0, this.canvas.width, this.canvas.height);
	this.drawBackground();
	this.drawRoofs();
	this.drawEnemies();

	for (var i = 0; i < projectiles.length; i++) {
		projectiles[i].update();
	}

	spiderman.update();

	this.ctx.fillStyle = "white";
	this.ctx.font = "20px SpidermanGamePixelFont, Monospace, Helvetica";
	this.ctx.textAlign = "center";
	this.ctx.textBaseline = "top";
	this.ctx.fillText(this.score, this.canvas.width / 2, 5);

	for (var i = 0; i < projectiles.length; i++) {
		var projectile = projectiles[i];
		var x = projectile.x;
		var y = projectile.y;

		var character = this.isCharacterAtPoint(x, y);
		if (character) {
			projectile.handleHitWithCharacter(character);
			character.handleHitWithProjectile(projectile);
		}
	}

	requestAnimFrame(this.update.bind(this));
}

SpidermanGame.prototype.addProjectile = function(projectile) {
	if (projectile instanceof Projectile) {
		this.scene.projectiles.push(projectile);
	}
}

SpidermanGame.prototype.removeProjectile = function(projectile) {
	var projectiles = this.scene.projectiles;
	if (projectiles.indexOf(projectile) > -1) {
		projectiles.splice(projectiles.indexOf(projectile), 1);
	}
}

SpidermanGame.prototype.addEnemy = function(enemy) {
	if (enemy instanceof Enemy) {
		this.scene.enemies.push(enemy);
	}
}

SpidermanGame.prototype.removeEnemy = function(enemy) {
	var enemies = this.scene.enemies;
	if (enemies.indexOf(enemy) > -1) {
		enemies.splice(enemies.indexOf(enemy), 1);
	}
}

SpidermanGame.prototype.addRoof = function(roof) {
	if (roof instanceof Roof) {
		this.scene.roofs.push(roof);
	}
}

SpidermanGame.prototype.removeRoof = function(roof) {
	var roofs = this.scene.roofs;
	if (roofs.indexOf(roof) > -1) {
		roofs.splice(roofs.indexOf(roof), 1);
	}
}

// checks if given point is roof
SpidermanGame.prototype.isRoofAtPoint = function(x, y) {
	x -= this.cameraX; // to move point relative to canvas
	for (var i = 0; i < this.scene.roofs.length; i++) {
		var roof = this.scene.roofs[i];

		// since character is relative to the camera, calculate X of roof relative to camera as well
		var roofX = roof.x - this.cameraX;

		if (roofX <= x && roofX + roof.fullWidth >= x && y >= roof.y) return roof;
	}

	return false;
}

SpidermanGame.prototype.isCharacterAtPoint = function(x, y) {
	// enemies + spiderman
	var characters = this.scene.enemies.concat(this.spiderman);
	x -= this.cameraX;

	for (var i = 0; i < characters.length; i++) {
		var character = characters[i];
		var stateImg = character.stateImg || {};

		var left = character.x - this.cameraX;
		var top = character.y;
		var right = left + stateImg.width * character.scale;
		var bottom = top + stateImg.height * character.scale;

		var isCharacter = 
			   left   <= x // check left bound
			&& top    <= y // top bound
			&& right  >= x // right bound
			&& bottom >= y; // bottom bound

		if (isCharacter) return character;
	}

	return false;
}

SpidermanGame.prototype.restart = function() {
	var roof = new Roof(this);
	roof.x = 0;

	this.spiderman = new SpiderMan(this);
	this.scene.spiderman = this.spiderman;
	this.scene.projectiles = [];
	this.scene.roofs = [roof];
	this.scene.enemies = [];
	this.cameraX = 0;
	this.score = 0;

	this.paused = false;
	this.gameIsOver = false;

	this.gameoverMenu.style.display = "none";
	this.pauseMenu.style.display = "none";

	this.update();
}

SpidermanGame.prototype.gameover = function() {
	this.gameIsOver = true;

	this.showGameoverMenu();
}

function SpiderMan(game) {
	this.game = game;
	this.canvas = game.canvas;
	this.ctx = game.ctx;
	this.name = "SPIDER_MAN";
	this.x = 0;
	this.y = 0; 
	this.states = ["STANDING"];
	this.scale = 0.5;
	this.keydowns = [];
	this.health = 5;
	this.maxHealth = 5;

	this.web = 50;

	this.velocityX = 0;
	this.velocityY = 0;

	// to regenerate every N fps (approximately N / 60 seconds)
	this.regenerationSpeed = 1200;

	// how many frames have passed
	this.frame = 0;

	this.runningFrames = ["RUNNING_RIGHT_STEP", "RUNNING_CHANGE_STEP", "RUNNING_LEFT_STEP", "RUNNING_CHANGE_STEP"];
	this.runningShootingFrames = ["SHOOT_RIGHT-STEP", "SHOOT_CHANGE_STEP", "SHOOT_LEFT-STEP", "SHOOT_CHANGE_STEP"];
	this.runningFrame = 0;

	this.gravityForce = 0.7;

	this.runningDirection = 0;
	this.runningSpeed = 5;

	this.shootingFrame = 0;
	this.wasDamagedOnPreviousFrame = false;
}

SpiderMan.prototype.keyIsDown = function(keyCode) {
	return this.keydowns.indexOf(keyCode) > -1;
}

SpiderMan.prototype.hasState = function(state) {
	return this.states.indexOf(state) > -1;
}

SpiderMan.prototype.hasStates = function(states) {
	states = states.split(" ");
	var hasStates = true;
	for (var i = 0; i < states.length; i++) {
		hasState = hasState && this.hasState(states[i]);
	}
	return hasStates;
}

SpiderMan.prototype.addState = function(state) {
	if (this.hasState(state) === false) this.states.push(state);
}

SpiderMan.prototype.removeState = function(state) {
	if (state instanceof Array) {
		for (var i = 0; i < state.length; i++) {
			this.removeState(state[i]);
		}
	}

	if (this.hasState(state)) this.states.splice(this.states.indexOf(state), 1);
}

SpiderMan.prototype.handleHitWithProjectile = function(projectile) {
	if (projectile.name != "WEB") {
		this.health -= projectile.damage;
		this.wasDamagedOnPreviousFrame = true;
	}
}

// returns the image to draw in position of spiderman
SpiderMan.prototype.stateImage = function() {
	var state = "STANDING";

	if (this.hasState("JUMP")) {
		state = "JUMP";

		if (this.velocityY == 0) {
			this.velocityY = -15;
		}
	}

	if (this.velocityY >= 0) this.removeState("JUMP");

	if (this.hasState("RUNNING")) {
		state = this.runningFrames[this.runningFrame];

		// if user is shooting while running
		if (this.hasState("SHOOT")) state = this.runningShootingFrames[this.runningFrame];

		// every 10th frame update the image
		if (this.frame % 10 === 0) {
			this.runningFrame++;
			this.runningFrame %= this.runningFrames.length - 1;
		}

		this.velocityX = this.runningDirection * this.runningSpeed;
	} else {
		this.velocityX = 0;
	}

	if (this.hasState("SHOOT")) {
		if (!this.hasState("RUNNING")) state = "SHOOT";
		if (this.shootingFrame % 20 === 0) {
			this.shoot(this.game.resources.SHOOT);
		}
		this.shootingFrame++;
	}

	var image = this.game.resources[state] || this.game.resources["STANDING"];
	this.stateImg = image; // so that stateImage is accessible

	return image;
}

SpiderMan.prototype.keydown = function(keyCode) {
	this.keydowns.push(keyCode);
}

SpiderMan.prototype.keyup = function(keyCode) {
	this.runningFrame = 0;

	if (keyCode == KEY.ARROW_RIGHT || keyCode == KEY.ARROW_LEFT) {
		this.removeState("RUNNING");
	}

	if (keyCode == KEY.SPACEBAR) {
		this.removeState("SHOOT");
		// reset the shootingFrame so if user presses space rapidly, it shoots rapidly
		// but if user holds the space, it shoots every 20 frame
		this.shootingFrame = 0;
	}

	while (this.keydowns.indexOf(keyCode) > -1) {
		this.keydowns.splice(this.keydowns.indexOf(keyCode), 1);
	}
}

SpiderMan.prototype.regenerate = function() {
	// if this is 300th fps, regenerate
	if (this.frame % this.regenerationSpeed === 0 && this.health < this.maxHealth) {
		this.health = Math.round(this.health + 1);
	}
}

SpiderMan.prototype.shoot = function(img) {
	if (this.web <= 0) return;

	var direction = this.runningDirection || 1;
	var web = new Projectile(this.game);

	web.name = "WEB";
	web.damage = 2;

	web.x = this.x + img.width * this.scale + 1;
	if (this.runningDirection == DIRECTION.LEFT) {
		web.x = this.x - 1; // left hand will be the X position of the spiderman
	}
	web.y = this.y + img.height * this.scale / 2;

	web.update = function() {            
		var x = this.x - this.game.cameraX;
		var y = this.y;

		if (direction == DIRECTION.LEFT) {
			// if spiderman is turned to left,
			// move web by 20pixels since X coordinates start from LEFT to right
			x -= 20;
		}

		this.ctx.drawImage(this.game.resources["WEB_PROJECTILE"], x, y - 10, 20, 20);

		this.x += direction * 10;
		if (this.x - this.game.cameraX >= this.canvas.width || this.x <= 0) this.remove();
	}

	web.handleHitWithCharacter = function(character) {
		// somtimes projectile is being hit by the spiderman ON launch
		// the best way is probably to launch it better but for now, i'll just make sure
		// it doesn't get destroyed on launch
		if (character.name != "SPIDER_MAN") return this.remove();
	}

	web.spiderman = this;

	this.game.addProjectile(web);
	if (this.game.soundEffects == true) {
		this.game.playSound("SHOOT", true, 0);
	}

	this.web--;
}

SpiderMan.prototype.drawHealthbar = function() {
	var heart = {
		width: 25,
		height: 25,
	};

	for (var i = 0; i < this.health; i++) {
		// (i + 1) * 5 for every 5 pixel padding per heart
		var x = i * heart.width + 5 * (i + 1);
		var y = 5;
		this.ctx.drawImage(this.game.resources.HEART, x, y, heart.width, heart.height);
	}
}

SpiderMan.prototype.drawWebbar = function() {
	var img = this.game.resources.WEB_PROJECTILE;
	var string = "X " + this.web;
	this.ctx.fillStyle = "white";
	this.ctx.font = "15px SpidermanGamePixelFont, Monospace, Arial";
	this.ctx.textAlign = "start";
	this.ctx.textBaseline = "top";

	var web = {
		width: 20,
		height: 20,
	};

	var text = {
		string: string,
		width: this.ctx.measureText(string).width,
		verticalPadding: 5,
		horizontalPadding: 10,
	};

	var x = this.canvas.width - web.width - text.width - text.horizontalPadding * 2;
	var y = text.verticalPadding;

	var textX = x + web.width + text.horizontalPadding;
	var textY = y;

	this.ctx.drawImage(img, x, y, web.width, web.height);
	this.ctx.fillText(text.string, textX, textY);
}

// function that gets called with global update function
SpiderMan.prototype.update = function() {
	if (this.keyIsDown(KEY.ARROW_UP) && !this.hasState("FALL")) {
		this.addState("JUMP");
	}
	if (this.keyIsDown(KEY.ARROW_RIGHT)) {
		this.addState("RUNNING");
		this.runningDirection = DIRECTION.RIGHT;
	}
	if (this.keyIsDown(KEY.ARROW_LEFT)) {
		this.addState("RUNNING");
		this.runningDirection = DIRECTION.LEFT;
	}
	if (this.keyIsDown(KEY.SPACEBAR)) {
		this.addState("SHOOT");
	}

	if (this.y >= this.canvas.height || !this.health || !this.web) {
		this.game.gameover();
	}

	var img = this.stateImage();

	this.velocityY += this.gravityForce;

	this.y += this.velocityY;
	this.x += this.velocityX;

	if (this.x - this.game.cameraX < 0) {
		this.x = this.game.cameraX; // dont allow going left
	}

	if (this.x - this.game.cameraX > 150) {
		this.game.cameraX += this.velocityX;
	}
	
	// check if coordinates are on the roof, before increasing it by velocityX, because it might BE inside the building
	// after velocityX
	// check if left side is on the roof
	var roofLeft = this.game.isRoofAtPoint(this.x - this.velocityX, this.y + img.height * this.scale + 1);
	// check if right X hit the roof
	var roofRight = this.game.isRoofAtPoint(this.x + img.width * this.scale - this.velocityX, this.y + img.height * this.scale + 1);

	// check if spiderman is standing on the ground (roof)
	if (roofLeft || roofRight) {
		var roof = roofLeft || roofRight;

		// since velocity might kinda make the spiderman go INSIDE the wall by adding too much Y,
		// we'll just check if spider's y is INSIDE the wall just because of the velocityY
		// just to make sure that spider is actually on the roof
		if (roof.y + this.velocityY <= this.y) {
			this.x -= this.velocityX;
			this.velocityX = 0;
		} else {
			this.y = this.canvas.height - roof.height - img.height * this.scale;
			this.velocityY = 0;
			this.removeState("FALL");
		}
	}

	var x = this.x - this.game.cameraX;
	var y = this.y;
	var width = img.width * this.scale;
	var height = img.height * this.scale;

	this.ctx.save();

	// if the spiderman is running to the left, flip him
	if (this.runningDirection == DIRECTION.LEFT) {
		this.ctx.scale(-1, 1);
		x *= -1;
		x -= width;
	}

	this.ctx.drawImage(img, x, y, width, height);
	this.ctx.restore();

	if (this.wasDamagedOnPreviousFrame) {
		this.wasDamagedOnPreviousFrame = false;

		this.ctx.fillStyle = "rgba(0, 0, 0, 0.2)";
		this.ctx.fillRect(x, y, width, height);
	}

	this.regenerate();
	this.drawHealthbar();
	this.drawWebbar();

	this.frame++;
}

function Projectile(game) {
	this.x = 0;
	this.y = 0;

	this.damage = 0;
	this.name = "UNKNOWN";

	this.canvas = game.canvas;
	this.ctx = game.ctx;
	this.game = game;
}

Projectile.prototype.update = function() {
}

Projectile.prototype.remove = function() {
	this.game.removeProjectile(this);
}

Projectile.prototype.handleHitWithCharacter = function() {
	this.remove();
}

function Roof(game, x, y) {
	this.game = game;
	this.canvas = game.canvas;
	this.ctx = game.ctx;

	this.width = Math.round(Math.random() * (this.game.resources.BUILDING.width - 200)) + 200;
	this.height = Math.round(Math.random() * 50) + 100;
	this.fullWidth = this.width + 15; // 15 pixels for right end of the roof top

	this.x = x || 0;
	this.y = this.canvas.height - this.height;

	// 70% chance?
	var shouldSpawnEnemy = Math.round(Math.random() * 100) >= 30;
	if (shouldSpawnEnemy) {
		var enemy = new Enemy(this.game, {
			x: this.x + this.width / 2,
		});
		enemy.y = this.y - 1 - enemy.stateImg.height * enemy.scale;
		this.game.addEnemy(enemy);
		this.enemy = enemy;
	}
}

Roof.prototype.update = function() {
	var renderX = this.x - this.game.cameraX;
	var roof = this.game.resources.BUILDING;

	this.ctx.drawImage(roof, 0, 0, this.width, this.height, renderX, this.y, this.width, this.height);
	this.ctx.drawImage(roof, this.width, 0, 15, 26, renderX + this.width, this.y, 15, 26);

	if (renderX + this.width <= 0) {
		this.game.removeRoof(this);
		this.game.removeEnemy(this.enemy);
	}
}


function Enemy(game, opts) {
	opts = opts || {};

	this.game = game;
	this.canvas = game.canvas;
	this.ctx = game.ctx;

	this.health = opts.health || 4;
	this.maxHealth = opts.maxHealth || this.health;
	this.name = opts.name || "THUG";
	this.x = opts.x || this.canvas.width - 50;
	this.y = opts.y || 0;
	// just to control the scaling of an image
	this.scale = 0.5;
	this.stateImg = this.game.resources[this.name];

	this.wasDamagedOnPreviousFrame = false;
	this.frame = 0;
};

Enemy.prototype.shoot = function() {
	var self = this;
	var knife = this.game.resources.KNIFE;

	var projectile = new Projectile(this.game);
	projectile.name = "KNIFE";
	projectile.damage = 1;

	projectile.x = this.x - knife.width * this.scale / 2;
	// so knifes height is divided by 4 because, 2 is for center, and another 2 is for 0.5 scale
	projectile.y = this.y + (this.stateImg.height * this.scale / 2) - (knife.height * this.scale / 4);
	projectile.update = function() {
		this.ctx.drawImage(knife, this.x - this.game.cameraX, this.y, knife.width * self.scale / 2, knife.height * self.scale / 2);

		this.x -= 10;
	}

	this.game.addProjectile(projectile);
}

Enemy.prototype.drawHealthbar = function() {
	var healthbar = {
		height: 5,
		width: 100,
		style: "red",
		borderWidth: 2,
		borderStyle: "black"
	};

	var x = this.x - this.game.cameraX;
	x -= healthbar.width / 2; // to center the healthbar with the X of the character
	x += this.stateImg.width * this.scale / 2; // to center the healthbar with the X of characters center

	var y      = this.y - (healthbar.height + healthbar.borderWidth * 2) - 5;
	var width  = healthbar.width * this.health / this.maxHealth; // get the width for current health
	var height = healthbar.height;

	var borderX      = x - healthbar.borderWidth;
	var borderY      = y - healthbar.borderWidth;
	var borderWidth  = healthbar.width + healthbar.borderWidth * 2;
	var borderHeight = healthbar.height + healthbar.borderWidth * 2;

	this.ctx.fillStyle = healthbar.borderStyle;
	this.ctx.fillRect(borderX, borderY, borderWidth, borderHeight);

	this.ctx.fillStyle = healthbar.style;
	this.ctx.fillRect(x, y, width, height);
}

Enemy.prototype.update = function() {
	var img = this.game.resources[this.name];
	this.stateImg = img;

	if (this.health <= 0) {
		this.remove();
	}

	this.drawHealthbar();

	var x = this.x - this.game.cameraX;
	var y = this.y;
	var width = img.width * this.scale;
	var height = img.height * this.scale;

	this.ctx.save();
	this.ctx.scale(-1, 1);

	this.ctx.drawImage(this.game.resources[this.name], (x + width) * -1, y, width, height);
	this.ctx.restore();

	if (this.wasDamagedOnPreviousFrame) {
		this.wasDamagedOnPreviousFrame = false;
		this.ctx.fillStyle = "rgba(255, 0, 0, 0.2)";
		this.ctx.fillRect(x, y, width, height);
	}

	var isInScreen = this.x - this.game.cameraX <= this.canvas.width;

	if (this.frame % 100 === 0 && isInScreen) {
		this.shoot();
	}

	this.frame++;
}

Enemy.prototype.remove = function() {
	this.game.score++;
	this.game.spiderman.web += this.maxHealth;
	this.game.removeEnemy(this);	
}

Enemy.prototype.handleHitWithProjectile = function(projectile) {
	if (projectile.name == "WEB") {
		this.health -= projectile.damage;
		this.wasDamagedOnPreviousFrame = true;
	}
}

window.SpidermanGame = SpidermanGame;
window.Projectile    = Projectile;
window.SpiderMan     = SpiderMan;
window.Enemy         = Enemy;
window.Roof          = Roof;

})(window, document);