pohy/race.html

## race.html
<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Race</title>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		body {
			background-color: #4a4a4a;
		}
		.canvas {
			width: 854px;
			height: 480px;
			margin: 0 auto;
			margin-top: 30px;
		}
		#images {
			display: none;
		}
	</style>
</head>
<body>
	<div id="images">
		<img id="image_lisa" width="32" height="32" src="lisa.png">
		<img id="image_meggie" width="32" height="32" src="meggie.png">
	</div>
	<div class="canvas">
		<canvas id="canvas" width="854" height="480"></canvas>
	</div>

	<script type="text/javascript">
		/**
		 * Game
		**/
		var Game = function() {
			var canvas = document.getElementById('canvas');
			this.ctx = canvas.getContext('2d');
			this.height = parseInt(canvas.attributes.height.value);
			this.width = parseInt(canvas.attributes.width.value);

			window.mouse = new Mouse(canvas);
			window.graphics = new Graphics(this.ctx, this.width, this.height);
			window.util = new Util();

			var players = [];
			players.push(new Player(0, 'image_lisa'));
			players.push(new Player(1, 'image_meggie'));
			this.objects = [];
			this.objects.push(new Dice(players));
			for(var i = 0; i < players.length; i++) {
				this.objects.push(players[i]);
			}

			this.update();
		};

		Game.prototype.update = function() {
			for(var i = 0; i < this.objects.length; i++) {
				this.objects[i].update();
			}

			this.render();

			window.mouse.nextFrame();
			setTimeout(this.update.bind(this), 16);
		};

		Game.prototype.render = function() {
			graphics.clearScreen();

			for(var i = 0; i < this.objects.length; i++) {
				this.objects[i].render();
			}
		};

		Game.prototype.mouseMove = function(e) {
			window.mouse.x = e.offsetX;
			window.mouse.y = e.offsetY;
		};

		/**
		 * Graphics
		**/
		var Graphics = function(ctx, width, height) {
			this.ctx = ctx;
			this.width = width;
			this.height = height;
			this.images = {};
		};

		Graphics.prototype.clearScreen = function() {
			this.ctx.clearRect(0, 0, this.width, this.height);
			this.drawRect(0, 0, this.width, this.height);
		};

		Graphics.prototype.drawRect = function(x, y, w, h, c, a) {
			if(typeof c === 'undefined') c = '#000';
			if(typeof a === 'undefined') a = 1;

			this.ctx.fillStyle = c;
			this.ctx.globalAlpha = a;
			this.ctx.fillRect(x, y, w, h);
		};

		Graphics.prototype.drawOutline = function(x, y, w, h, c, a) {
			if(typeof c === 'undefined') c = '#000';
			if(typeof a === 'undefined') a = 1;

			this.ctx.strokeStyle = c;
			this.ctx.globalAlpha = a;
			this.ctx.strokeRect(x, y, w, h);
		};

		Graphics.prototype.drawImage = function(imageId, x, y) {
			this.ctx.drawImage(this.getImage(imageId), x, y);
		};

		Graphics.prototype.drawText = function(text, x, y, c, font, a) {
			if(typeof c === 'undefined') c = '#000';
			if(typeof a === 'undefined') a = 1;
			if(typeof font === 'undefined') font = '12pt Arial';

			this.ctx.fillStyle = c;
			this.ctx.globalAlpha = a;
			this.ctx.font = font;
			this.ctx.fillText(text, x, y);
		};

		Graphics.prototype.getImage = function(imageId) {
			if(typeof this.images[imageId] === 'undefined') {
				var image = document.getElementById(imageId);
				if(image === null) {
					console.error('Image with id ' + imageId + ' was not found');
					return undefined;
				}
				this.images[imageId] = image;
			}
			return this.images[imageId];
		};

		/**
		 * Player
		**/
		var Player = function(row, imageId) {
			var image = graphics.getImage(imageId);
			this.imageId = imageId;
			this.x = 0;
			this.y = row * image.height;
			this.w = image.width;
			this.h = image.height;
		};

		Player.prototype.update = function() {
		};

		Player.prototype.render = function() {
			graphics.drawImage(this.imageId, this.x, this.y);
		};

		Player.prototype.advance = function(step) {
			this.x += step * this.w;
		};

		Player.prototype.reset = function() {
			this.x = 0;
		};

		/**
		 * Dice
		**/
		var Dice = function(players) {
			this.x = 64;
			this.y = 256;
			this.w = 64;
			this.h = 64;
			this.collision = new Collision();
			this.hover = false;
			this.value;
			this.players = players;
			this.currentPlayer = 0;
			this.advanceVal = 0;
			this.maxDistance = 500;
			this.playerWon = null;
		}

		Dice.prototype.update = function() {
			if(this.collision.rect(mouse.x, mouse.y, this.x, this.y, this.w, this.h)) {
				this.hover = true;
			} else {
				this.hover = false;
			}
			if(mouse.up === true) {
				if(this.playerWon === null) {
					this.play();
				} else {
					for(var i = 0; i < this.players.length; i++) {
						this.players[i].reset();
					}
					this.playerWon = null;
					this.currentPlayer = 0;
					this.advanceVal = 0;
				}
			}
		};

		Dice.prototype.render = function() {
			if(this.hover) {
				graphics.drawRect(this.x, this.y, this.h, this.w, '#faca0a');
				graphics.drawText(this.advanceVal, this.x + this.w / 2, this. y + this.h / 2);
			} else {
				graphics.drawOutline(this.x, this.y, this.h, this.w, '#faca0a');
				graphics.drawText(this.advanceVal, this.x + this.w / 2, this. y + this.h / 2, '#faca0a');
			}

			if(this.playerWon !== null) {
				graphics.drawText('Player ' + this.currentPlayer + ' won!', 50, game.height / 2, '#fff', '72pt Arial');
			}
		};

		Dice.prototype.play = function() {
			this.advanceVal = util.randomRange(1, 6);
			this.players[this.currentPlayer].advance(this.advanceVal);
			this.checkWin();
			if(this.currentPlayer < this.players.length - 1) {
				this.currentPlayer++;
			} else {
				this.currentPlayer = 0;
			}
		};

		Dice.prototype.checkWin = function() {
			var player = this.players[this.currentPlayer];
			if(player.x + player.w > this.maxDistance) {
				this.playerWon = player;
			}
		};

		/**
		 * Collision
		**/
		var Collision = function() {};

		Collision.prototype.rect = function(x, y, x2, y2, w, h) {
			if(x > x2 && x < x2 + w) {
				if(y > y2 && y < y2 +h) {
					return true;
				}
			}
			return false;
		};

		window.onload = function() {
			window.game = new Game();
		}

		var Mouse = function(canvas) {
			this.x = 0;
			this.y = 0;
			this.up = false;
			this.down = false;

			canvas.addEventListener('mousemove', (this.mouseMove).bind(this));
			canvas.addEventListener('mouseup', (this.mouseUp).bind(this));
			canvas.addEventListener('mousedown', (this.mouseDown).bind(this));
		}

		Mouse.prototype.mouseMove = function(e) {
			this.x = e.offsetX;
			this.y = e.offsetY;
		};

		Mouse.prototype.mouseUp = function() {
			this.up = true;
		};

		Mouse.prototype.mouseDown = function() {
			this.down = true;
		};

		Mouse.prototype.nextFrame = function() {
			this.up = false;
			this.down = false;
		};

		var Util = function() {};

		Util.prototype.randomRange = function(min, max) {
			return Math.floor(Math.random() * (max - min + 1)) + min;
		};
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>Race</title>
	<style type="text/css">
	* {
	margin: 0;
	padding: 0;
	}
	body {
	background-color: #4a4a4a;
	}
	.canvas {
	width: 854px;
	height: 480px;
	margin: 0 auto;
	margin-top: 30px;
	}
	#images {
	display: none;
	}
	</style>
	</head>
	<body>
	<div id="images">
	<img id="image_lisa" width="32" height="32" src="lisa.png">
	<img id="image_meggie" width="32" height="32" src="meggie.png">
	</div>
	<div class="canvas">
	<canvas id="canvas" width="854" height="480"></canvas>
	</div>

	<script type="text/javascript">
	/**
	* Game
	**/
	var Game = function() {
	var canvas = document.getElementById('canvas');
	this.ctx = canvas.getContext('2d');
	this.height = parseInt(canvas.attributes.height.value);
	this.width = parseInt(canvas.attributes.width.value);

	window.mouse = new Mouse(canvas);
	window.graphics = new Graphics(this.ctx, this.width, this.height);
	window.util = new Util();

	var players = [];
	players.push(new Player(0, 'image_lisa'));
	players.push(new Player(1, 'image_meggie'));
	this.objects = [];
	this.objects.push(new Dice(players));
	for(var i = 0; i < players.length; i++) {
	this.objects.push(players[i]);
	}

	this.update();
	};

	Game.prototype.update = function() {
	for(var i = 0; i < this.objects.length; i++) {
	this.objects[i].update();
	}

	this.render();

	window.mouse.nextFrame();
	setTimeout(this.update.bind(this), 16);
	};

	Game.prototype.render = function() {
	graphics.clearScreen();

	for(var i = 0; i < this.objects.length; i++) {
	this.objects[i].render();
	}
	};

	Game.prototype.mouseMove = function(e) {
	window.mouse.x = e.offsetX;
	window.mouse.y = e.offsetY;
	};

	/**
	* Graphics
	**/
	var Graphics = function(ctx, width, height) {
	this.ctx = ctx;
	this.width = width;
	this.height = height;
	this.images = {};
	};

	Graphics.prototype.clearScreen = function() {
	this.ctx.clearRect(0, 0, this.width, this.height);
	this.drawRect(0, 0, this.width, this.height);
	};

	Graphics.prototype.drawRect = function(x, y, w, h, c, a) {
	if(typeof c === 'undefined') c = '#000';
	if(typeof a === 'undefined') a = 1;

	this.ctx.fillStyle = c;
	this.ctx.globalAlpha = a;
	this.ctx.fillRect(x, y, w, h);
	};

	Graphics.prototype.drawOutline = function(x, y, w, h, c, a) {
	if(typeof c === 'undefined') c = '#000';
	if(typeof a === 'undefined') a = 1;

	this.ctx.strokeStyle = c;
	this.ctx.globalAlpha = a;
	this.ctx.strokeRect(x, y, w, h);
	};

	Graphics.prototype.drawImage = function(imageId, x, y) {
	this.ctx.drawImage(this.getImage(imageId), x, y);
	};

	Graphics.prototype.drawText = function(text, x, y, c, font, a) {
	if(typeof c === 'undefined') c = '#000';
	if(typeof a === 'undefined') a = 1;
	if(typeof font === 'undefined') font = '12pt Arial';

	this.ctx.fillStyle = c;
	this.ctx.globalAlpha = a;
	this.ctx.font = font;
	this.ctx.fillText(text, x, y);
	};

	Graphics.prototype.getImage = function(imageId) {
	if(typeof this.images[imageId] === 'undefined') {
	var image = document.getElementById(imageId);
	if(image === null) {
	console.error('Image with id ' + imageId + ' was not found');
	return undefined;
	}
	this.images[imageId] = image;
	}
	return this.images[imageId];
	};

	/**
	* Player
	**/
	var Player = function(row, imageId) {
	var image = graphics.getImage(imageId);
	this.imageId = imageId;
	this.x = 0;
	this.y = row * image.height;
	this.w = image.width;
	this.h = image.height;
	};

	Player.prototype.update = function() {
	};

	Player.prototype.render = function() {
	graphics.drawImage(this.imageId, this.x, this.y);
	};

	Player.prototype.advance = function(step) {
	this.x += step * this.w;
	};

	Player.prototype.reset = function() {
	this.x = 0;
	};

	/**
	* Dice
	**/
	var Dice = function(players) {
	this.x = 64;
	this.y = 256;
	this.w = 64;
	this.h = 64;
	this.collision = new Collision();
	this.hover = false;
	this.value;
	this.players = players;
	this.currentPlayer = 0;
	this.advanceVal = 0;
	this.maxDistance = 500;
	this.playerWon = null;
	}

	Dice.prototype.update = function() {
	if(this.collision.rect(mouse.x, mouse.y, this.x, this.y, this.w, this.h)) {
	this.hover = true;
	} else {
	this.hover = false;
	}
	if(mouse.up === true) {
	if(this.playerWon === null) {
	this.play();
	} else {
	for(var i = 0; i < this.players.length; i++) {
	this.players[i].reset();
	}
	this.playerWon = null;
	this.currentPlayer = 0;
	this.advanceVal = 0;
	}
	}
	};

	Dice.prototype.render = function() {
	if(this.hover) {
	graphics.drawRect(this.x, this.y, this.h, this.w, '#faca0a');
	graphics.drawText(this.advanceVal, this.x + this.w / 2, this. y + this.h / 2);
	} else {
	graphics.drawOutline(this.x, this.y, this.h, this.w, '#faca0a');
	graphics.drawText(this.advanceVal, this.x + this.w / 2, this. y + this.h / 2, '#faca0a');
	}

	if(this.playerWon !== null) {
	graphics.drawText('Player ' + this.currentPlayer + ' won!', 50, game.height / 2, '#fff', '72pt Arial');
	}
	};

	Dice.prototype.play = function() {
	this.advanceVal = util.randomRange(1, 6);
	this.players[this.currentPlayer].advance(this.advanceVal);
	this.checkWin();
	if(this.currentPlayer < this.players.length - 1) {
	this.currentPlayer++;
	} else {
	this.currentPlayer = 0;
	}
	};

	Dice.prototype.checkWin = function() {
	var player = this.players[this.currentPlayer];
	if(player.x + player.w > this.maxDistance) {
	this.playerWon = player;
	}
	};

	/**
	* Collision
	**/
	var Collision = function() {};

	Collision.prototype.rect = function(x, y, x2, y2, w, h) {
	if(x > x2 && x < x2 + w) {
	if(y > y2 && y < y2 +h) {
	return true;
	}
	}
	return false;
	};

	window.onload = function() {
	window.game = new Game();
	}

	var Mouse = function(canvas) {
	this.x = 0;
	this.y = 0;
	this.up = false;
	this.down = false;

	canvas.addEventListener('mousemove', (this.mouseMove).bind(this));
	canvas.addEventListener('mouseup', (this.mouseUp).bind(this));
	canvas.addEventListener('mousedown', (this.mouseDown).bind(this));
	}

	Mouse.prototype.mouseMove = function(e) {
	this.x = e.offsetX;
	this.y = e.offsetY;
	};

	Mouse.prototype.mouseUp = function() {
	this.up = true;
	};

	Mouse.prototype.mouseDown = function() {
	this.down = true;
	};

	Mouse.prototype.nextFrame = function() {
	this.up = false;
	this.down = false;
	};

	var Util = function() {};

	Util.prototype.randomRange = function(min, max) {
	return Math.floor(Math.random() * (max - min + 1)) + min;
	};
	</script>
	</body>
	</html>