ninjapanzer/fixed_example_render.png

## fixed_example_render.png

      
    Raw
  

              fixed_example_render.png
            
          
## index.html
<html>
  <head></head>
  <body>
    <canvas id='canvasBg' height="600px" width="800px" style="position: absolute"></canvas>
    <canvas id='canvasEntities' height="600px" width="800px" style="position: absolute"></canvas>
    <div class='score'></div>
    <script src="./spaceblock.js"></script>
  </body>
</html>

## spaceblock.js
var canvasBg = document.getElementById("canvasBg"),
	ctxBg = canvasBg.getContext("2d"),
	canvasEntities = document.getElementById("canvasEntities"),
	ctxEntities = canvasEntities.getContext("2d"),
	canvasWidth = canvasBg.width,
	canvasHeight = canvasBg.height,
	background = new Background(0, 0),
	spaceship = new Spaceship(0, canvasHeight/2),
	alienShip = new AlienShip(100, 0),
	alienShip2 = new AlienShip(300, 500),
	alienShip3 = new AlienShip(500, 0),
	requestAnimFrame = window.requestAnimationFrame ||
					   window.webkitRequestAnimationFrame ||
					   window.mozRequestAnimationFrame ||
					   window.oRequestAnimationFrame ||
					   window.msRequestAnimationFrame ||
					   function(callback) {
					   	window.setTimeout(callback, 1000 / 60);
					   },
	imgSprite = new Image(),
	imgSprite2 = new Image(),
	imgSprite3 = new Image();
imgSprite.src = "images/Background.png";
imgSprite.addEventListener("load", init, false); //3 zoom ins
imgSprite2.src = "images/Spaceship.png";
imgSprite2.addEventListener("load", init, false);
imgSprite3.src = "images/Alien Ship2.png";
imgSprite3.addEventListener("load", init, false);

var score = document.getElementsByClassName("score")[0];
score.style.position = "absolute";
score.style.height = 30;
score.style.width = 30;
score.style.fontsize = "30em";
score.style.top = "3%";
score.style.left = "14.5%";
score.style.background = "blue";

var scoreValue = 1;

function updateScore() {
	score.innerHTML = scoreValue;
	if(scoreValue > 0) {
		scoreValue += 1;
	} else {
		scoreValue = 0;
	}
}

function init() {
	document.addEventListener("keydown", function(e) {checkKey(e, true);}, false);
	document.addEventListener("keyup", function(e) {checkKey(e, false);}, false);
	begin();
}

function begin() {
	isPlaying = true;
	requestAnimFrame(loop);
}

function update() {
	clearCtx(ctxBg);
	clearCtx(ctxEntities);
	spaceship.update();
	alienShip.update();
	alienShip2.update();
	alienShip3.update();
}

function draw() {
	background.draw();
	spaceship.draw();
	alienShip.draw();
	alienShip2.draw();
	alienShip3.draw();
}

function loop() {
	if (isPlaying) {
		update();
		draw();
		requestAnimFrame(loop);
	}
}

function clearCtx(ctx) {
	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
}

function Background(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = canvasHeight;
	this.width = canvasWidth;
}

Background.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite, this.drawX, this.drawY, canvasWidth, canvasHeight);
}

function Spaceship(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = 50;
	this.width = 50;
	this.isMovingRight = false;
	this.isMovingLeft = false;
}

Spaceship.prototype.update = function() {
	if(this.isMovingRight) {
		this.drawX += 2;
		if(this.drawX >= canvasWidth - this.width) {
			this.drawX = canvasWidth;
			alert("You've made it past the aliens!");
			location.reload(true);
		}
	}
	if(this.isMovingLeft) {
		this.drawX -= 2;
		if(this.drawX <= 0) {
			this.drawX = 0;
		}
	}
	if(collision(spaceship, alienShip)) {
		//console.log(collision);
		updateScore();
	}
	if(collision(spaceship, alienShip2)) {
		//console.log(collision);
		updateScore();
	}
	if(collision(spaceship, alienShip3)) {
		//console.log(collision);
		updateScore();
	}
}

Spaceship.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, this.width, this.height);
}

function AlienShip(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = 125;
	this.width = 125;
	this.isMovingUp = false;
	this.isMovingDown = true;
}

AlienShip.prototype.update = function() {
	if(this.drawY <= 0) {
		this.drawY = 0;
		this.isMovingDown = true;
		this.isMovingUp = false;
	}
	if(this.drawY >= canvasHeight - this.height && this.isMovingDown) {
		this.drawY = canvasHeight - this.height;
		this.isMovingUp = true;
		this.isMovingDown = false;
	}
	if(this.isMovingDown) {
		this.drawY += randomRange(1, 6);
	}
	if(this.isMovingUp) {
		this.drawY -= randomRange(3, 6);
	}
}

AlienShip.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, this.height, this.width);
}

function randomRange (min, max) {
	return Math.floor(Math.random() * (max + 1 - min)) + min;
}

function checkKey(e, value) {
	var keyID = e.keyCode || e.which;
	if(keyID === 39) {
		spaceship.isMovingRight = value;
		e.preventDefault();
	}
	if(keyID === 37) {
		spaceship.isMovingLeft = value;
		e.preventDefault();
	}
}

function testCollision(a, b){
	return a.drawX <= b.drawX + b.width &&
		a.drawX >= b.drawX &&
		a.drawY <= b.drawY + b.height &&
		a.drawY >= b.drawY;
}

function collision(a, b) {
	return testCollision(a, b) || testCollision(b, a)
}
	<html>
	<head></head>
	<body>
	<canvas id='canvasBg' height="600px" width="800px" style="position: absolute"></canvas>
	<canvas id='canvasEntities' height="600px" width="800px" style="position: absolute"></canvas>
	<div class='score'></div>
	<script src="./spaceblock.js"></script>
	</body>
	</html>
	var canvasBg = document.getElementById("canvasBg"),
	ctxBg = canvasBg.getContext("2d"),
	canvasEntities = document.getElementById("canvasEntities"),
	ctxEntities = canvasEntities.getContext("2d"),
	canvasWidth = canvasBg.width,
	canvasHeight = canvasBg.height,
	background = new Background(0, 0),
	spaceship = new Spaceship(0, canvasHeight/2),
	alienShip = new AlienShip(100, 0),
	alienShip2 = new AlienShip(300, 500),
	alienShip3 = new AlienShip(500, 0),
	requestAnimFrame = window.requestAnimationFrame \|\|
	window.webkitRequestAnimationFrame \|\|
	window.mozRequestAnimationFrame \|\|
	window.oRequestAnimationFrame \|\|
	window.msRequestAnimationFrame \|\|
	function(callback) {
	window.setTimeout(callback, 1000 / 60);
	},
	imgSprite = new Image(),
	imgSprite2 = new Image(),
	imgSprite3 = new Image();
	imgSprite.src = "images/Background.png";
	imgSprite.addEventListener("load", init, false); //3 zoom ins
	imgSprite2.src = "images/Spaceship.png";
	imgSprite2.addEventListener("load", init, false);
	imgSprite3.src = "images/Alien Ship2.png";
	imgSprite3.addEventListener("load", init, false);

	var score = document.getElementsByClassName("score")[0];
	score.style.position = "absolute";
	score.style.height = 30;
	score.style.width = 30;
	score.style.fontsize = "30em";
	score.style.top = "3%";
	score.style.left = "14.5%";
	score.style.background = "blue";

	var scoreValue = 1;

	function updateScore() {
	score.innerHTML = scoreValue;
	if(scoreValue > 0) {
	scoreValue += 1;
	} else {
	scoreValue = 0;
	}
	}

	function init() {
	document.addEventListener("keydown", function(e) {checkKey(e, true);}, false);
	document.addEventListener("keyup", function(e) {checkKey(e, false);}, false);
	begin();
	}

	function begin() {
	isPlaying = true;
	requestAnimFrame(loop);
	}

	function update() {
	clearCtx(ctxBg);
	clearCtx(ctxEntities);
	spaceship.update();
	alienShip.update();
	alienShip2.update();
	alienShip3.update();
	}

	function draw() {
	background.draw();
	spaceship.draw();
	alienShip.draw();
	alienShip2.draw();
	alienShip3.draw();
	}

	function loop() {
	if (isPlaying) {
	update();
	draw();
	requestAnimFrame(loop);
	}
	}

	function clearCtx(ctx) {
	ctx.clearRect(0, 0, canvasWidth, canvasHeight);
	}

	function Background(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = canvasHeight;
	this.width = canvasWidth;
	}

	Background.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite, this.drawX, this.drawY, canvasWidth, canvasHeight);
	}

	function Spaceship(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = 50;
	this.width = 50;
	this.isMovingRight = false;
	this.isMovingLeft = false;
	}

	Spaceship.prototype.update = function() {
	if(this.isMovingRight) {
	this.drawX += 2;
	if(this.drawX >= canvasWidth - this.width) {
	this.drawX = canvasWidth;
	alert("You've made it past the aliens!");
	location.reload(true);
	}
	}
	if(this.isMovingLeft) {
	this.drawX -= 2;
	if(this.drawX <= 0) {
	this.drawX = 0;
	}
	}
	if(collision(spaceship, alienShip)) {
	//console.log(collision);
	updateScore();
	}
	if(collision(spaceship, alienShip2)) {
	//console.log(collision);
	updateScore();
	}
	if(collision(spaceship, alienShip3)) {
	//console.log(collision);
	updateScore();
	}
	}

	Spaceship.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite2, this.drawX, this.drawY, this.width, this.height);
	}

	function AlienShip(x, y) {
	this.drawX = x;
	this.drawY = y;
	this.height = 125;
	this.width = 125;
	this.isMovingUp = false;
	this.isMovingDown = true;
	}

	AlienShip.prototype.update = function() {
	if(this.drawY <= 0) {
	this.drawY = 0;
	this.isMovingDown = true;
	this.isMovingUp = false;
	}
	if(this.drawY >= canvasHeight - this.height && this.isMovingDown) {
	this.drawY = canvasHeight - this.height;
	this.isMovingUp = true;
	this.isMovingDown = false;
	}
	if(this.isMovingDown) {
	this.drawY += randomRange(1, 6);
	}
	if(this.isMovingUp) {
	this.drawY -= randomRange(3, 6);
	}
	}

	AlienShip.prototype.draw = function() {
	ctxEntities.drawImage(imgSprite3, this.drawX, this.drawY, this.height, this.width);
	}

	function randomRange (min, max) {
	return Math.floor(Math.random() * (max + 1 - min)) + min;
	}

	function checkKey(e, value) {
	var keyID = e.keyCode \|\| e.which;
	if(keyID === 39) {
	spaceship.isMovingRight = value;
	e.preventDefault();
	}
	if(keyID === 37) {
	spaceship.isMovingLeft = value;
	e.preventDefault();
	}
	}

	function testCollision(a, b){
	return a.drawX <= b.drawX + b.width &&
	a.drawX >= b.drawX &&
	a.drawY <= b.drawY + b.height &&
	a.drawY >= b.drawY;
	}

	function collision(a, b) {
	return testCollision(a, b) \|\| testCollision(b, a)
	}