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(); } } };