Boids Real Game

by ElijahCirioli

HTML

<canvas id="myCanvas" width="800" height="600"></canvas>

JavaScript

var canvas = document.getElementById("myCanvas");
var context = canvas.getContext("2d");

var p; //the player
var c; //the camera

var screenBounds = [1400, 1400]; //the width and height of the playfield
var explosionParticles = [];

function setup() {
	p = new Player(screenBounds[0] / 2, screenBounds[1] / 2, -Math.PI / 2);
  c = new Camera(p.x, p.y);
	setInterval(update, 1000 / 60);
}

function update() {
	p.update();
	c.update();
}

Camera.prototype.render = function() {
	var offsetX = this.x - (canvas.width / 2);
	var offsetY = this.y - (canvas.height / 2);
	
	var plX = (this.x - (screenBounds[0] / 2)) / (300 + c.edgeBuffer);
	var plY = (this.y - (screenBounds[1] / 2)) / (400 + c.edgeBuffer);

	//draw backgrounds
	context.fillStyle = "black";
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.drawImage(bl1Img, 50 + (plX * 50), 150 + (plY * 150), canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
	context.drawImage(bl4Img, 150 + (plX * 75), 250 + (plY * 175), canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
	context.drawImage(bl2Img, 100 + (plX * 100), 200 + (plY * 200), canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
	context.fillStyle = "rgba(0, 0, 0, 0.25)";
	context.fillRect(0, 0, canvas.width, canvas.height);
	context.drawImage(bl3Img, 200 + (plX * 200), 300 + (plY * 300), canvas.width, canvas.height, 0, 0, canvas.width, canvas.height);
	//draw borders
	context.fillStyle = "rgba(50, 100, 255, 0.4)";
	context.fillRect(-30 - offsetX, -30 - offsetY, 1460, 30);
	context.fillRect(-30 - offsetX, -offsetY, 30, 1430);
	context.fillRect(-offsetX, 1400 - offsetY, 1430, 30);
	context.fillRect(1400 - offsetX, -offsetY, 30, 1400);
	
	for (var i = 0; i < p.exhaust.length; i++) {
		if (p.exhaust[i].draw(offsetX, offsetY)) {
			p.exhaust.splice(i, 1);
			i--;
		}
	}
	
	for (var j = 0; j < p.bullets.length; j++) {
		context.save();
		context.translate(p.bullets[j].x - offsetX, p.bullets[j].y -...