adrift/viewport.js

var Viewport = function() {

	var canvas, context, backgroundOffset, angleRadians, shipDamage, velocity, isThrusting, isDocked;
	var shipImage, backgroundImageshipDamageImage, shipThrustImage, spaceStationImage;

	this.setup = function() {
		canvas = document.getElementById('viewport');
		if (screen.width < 360) {
			canvas.width = screen.width;
			canvas.height = screen.width;
		} else {
			canvas.width = 360;
			canvas.height = 360;
		}
		context = canvas.getContext('2d');

		shipImage = document.getElementById("shipImage");
		shipDamageImage = [];
		shipDamageImage.push(document.getElementById("shipDamage1Image"));
		shipDamageImage.push(document.getElementById("shipDamage2Image"));
		shipDamageImage.push(document.getElementById("shipDamage3Image"));
		shipThrustImage = document.getElementById("shipThrustImage");
		backgroundImage = document.getElementById("backgroundImage");
		spaceStationImage = document.getElementById("spaceStationImage");
		backgroundOffset = {
			x : 0,
			y : 0
		};
		shipDamage = 0;
		this.setStateIdle();
	};

	this.update = function() {
		backgroundOffset.x += velocity.x;
		backgroundOffset.y += velocity.y;

		backgroundOffset.x = backgroundOffset.x % backgroundImage.width;
		backgroundOffset.y = backgroundOffset.y % backgroundImage.height;
	};

	this.draw = function() {
		this.update();
		context.clearRect(0, 0, canvas.width, canvas.height);
		for (var x = -1; x < Math.ceil(canvas.width / backgroundImage.width) + 2; x++) {
			for (var y = -1; y < Math.ceil(canvas.height
					/ backgroundImage.height) + 2; y++) {
				context.drawImage(backgroundImage, x * backgroundImage.width
						+ backgroundOffset.x, y * backgroundImage.height
						+ backgroundOffset.y);
			}
		}

		context.save();
		context.translate(canvas.width / 2, canvas.height / 2);
		context.rotate(angleRadians);
		if (isThrusting) {
			context.drawImage(shipThrustImage, -(shipThrustImage.width / 2),
					shipImage.height / 2);
		}
		context.drawImage(shipImage, -(shipImage.width / 2),
				-(shipImage.height / 2));
		if (shipDamage > 0) {
			context.drawImage(shipDamageImage[shipDamage - 1],
					-(shipImage.width / 2), -(shipImage.height / 2));
		}

		context.restore();

		if (isDocked) {
			context.save();
			context.translate(-(spaceStationImage.width / 2),
					-(spaceStationImage.height / 2));
			context.translate(canvas.width * 3 / 4, canvas.height * 1 / 8);
			context.scale(4, 4);
			context.drawImage(spaceStationImage, 0, 0);
			context.restore();
		}
	};
	this.setDamage = function(amount) {
		shipDamage = amount % 4;
		return shipDamage;
	}

	this.setState = function(state) {
		switch (state) {
		case 'adrift':
			this.setStateAdrift();
			break;
		case 'idle':
			this.setStateIdle();
			break;
		case 'travel':
			this.setStateTravel();
			break;
		case 'docking':
			this.setStateDocking();
			break;
		case 'dock':
			this.setStateDock();
			break;
		}
	};

	this.setStateAdrift = function() {
		angleRadians = 37 * (Math.PI / 180);
		velocity = {
			x : 0.2,
			y : 0.2
		};

		isThrusting = false;
	}

	this.setStateIdle = function() {
		angleRadians = 0 * (Math.PI / 180);
		velocity = {
			x : 0.0,
			y : 0.0
		};
		isThrusting = false;
	}

	this.setStateTravel = function() {
		angleRadians = 0 * (Math.PI / 180);
		velocity = {
			x : 0.0,
			y : 5.0
		};
		isThrusting = true;
	};

	this.setStateDocking = function() {
		angleRadians = 90 * (Math.PI / 180);
		velocity = {
			x : -1.0,
			y : 0.0
		};
		isThrusting = false;
	};

	this.setStateDock = function() {
		isDocked = true;
		angleRadians = 90 * (Math.PI / 180);
		velocity = {
			x : 0.0,
			y : 0.0
		};
		isThrusting = false;
	};
};

var viewport = new Viewport();