gravitywell/scenery.js

function Scenery(camera, parallax) {
	this.position = {x: 0, y: 0};
	this.width = 786;
	this.height = 786;
	this.spriteCanvas = null;
	this.spriteContext = null;
	this.canvasWidth = 128;
	this.canvasHeight = 128;
	this.debug = false;
	this.parallaxDepth = parallax;

	this.update = function(canvas) {
		this.canvasWidth = canvas.width;
		this.canvasHeight = canvas.height;	

		var truePos = {x: 0, y: 0};
		truePos.x = (camera.x * this.parallaxDepth) + this.position.x;
		truePos.y = (camera.y * this.parallaxDepth) + this.position.y;

		if(truePos.x < -this.width) {
			this.position.x += this.width;
		}

		if(truePos.x > 0) {
			this.position.x -= this.width;
		}

		if(truePos.y < -this.height) {
			this.position.y += this.height;
		}

		if(truePos.y > 0) {
			this.position.y -= this.height;
		}
	}

	this.preRender = function() {
		if(this.spriteContext == null) {
			this.spriteCanvas = document.createElement("canvas");
			this.spriteCanvas.width = this.width;
			this.spriteCanvas.height = this.height;
			this.spriteContext = this.spriteCanvas.getContext("2d");

			this.spriteContext.fillStyle = "#DDDDDD";
			
			var starCount = parseInt(Math.sqrt(this.width));
			for(var i = 0; i < starCount; i++) {
				var position = {x: parseInt(this.width * Math.random()), y: parseInt(this.height * Math.random())};
				this.spriteContext.beginPath();	
				this.spriteContext.arc(position.x, position.y, parseInt((20 * this.parallaxDepth) * Math.random() + 1), 0, 2 * Math.PI);
				this.spriteContext.fill();
			}
		}
	}

	this.draw = function(context) {
		this.preRender();

		var truePos = {x: 0, y: 0};
		truePos.x = (camera.x * this.parallaxDepth) + this.position.x;
		truePos.y = (camera.y * this.parallaxDepth) + this.position.y;

		for(var x = 0; x < this.canvasWidth / this.width + 1; x++) {
			for(var y = 0; y < this.canvasHeight / this.height + 1; y++) {
				context.drawImage(this.spriteCanvas, truePos.x + (x * this.width), truePos.y + (y * this.height));
			}
		}

		if(this.debug) {
			context.strokeStyle = "#33DD33";
			context.lineWidth = 3;
			context.beginPath();
			context.rect(truePos.x, truePos.y, this.width, this.height);
			context.stroke();
		}
	}
};