flappydick/js/assets.js

var assets = {
};

/*
 * Image source.
 * If animation, the images must be stacked on top of each other.
 */
function ImageSource(src, frameh) {
	var ext = ".png";

	this.img = document.createElement("img");
	this.ready = false;
	this.width = 0;
	this.height = 0;
	this.frameh = frameh == null ? -1 : frameh;
	this.steps = 1;

	this.img.onload = function() {
		this.ready = true;
		this.width = this.img.width;
		this.height = this.img.height;

		if (this.frameh === -1)
			this.frameh = this.height;

		this.steps = this.height / this.frameh;
		if (this.steps !== Math.round(this.steps)) {
			this.steps = Math.round(this.steps);
			console.log(
				"Warning: '"+src+ext+"': "+
				"Height isn't evenly divisible by frame height. "+
				"Height: "+this.height+", frame height: "+this.frameh);
		}
	}.bind(this);

	this.img.src = "assets/"+src+ext;
}
ImageSource.prototype.draw = function(ctx, step) {
	if (!step) step = 0;

	ctx.drawImage(this.img, 0, 0,
		this.width, this.frameh,
		0, this.frameh * step,
		this.width, this.frameh);
}

function Animation(imgSrc, type, loop, fps) {
	this.type = type || "forward";
	this.loop = loop || false;
	this.imgSrc = imgSrc;
	this.fps = fps || 12;
	this.waitTime = 1000 / this.fps;
	this.done = false;

	this.doStep = true;

	if (type === "forward" || type === "bounce") {
		this.step = 0;
		this.direction = 1;
	} else if (type === "reverse" || type === "bounce-reverse") {
		this.step = -1;
		this.direction = -1;
	}

	// We don't care about the direction after setting this.direction
	if (this.type === "bounce-reverse")
		this.type = "bounce";
	else if (this.type === "reverse")
		this.type = "forward";
}
Animation.prototype.nextFrame = function() {
	if (!this.imgSrc.ready) {
		return;
	} else if (this.step === -1) {
		this.step = this.imgSrc.steps - 1;
		return;
	} else if (this.imgSrc.steps === 1) {
		return;
	}

	var next = this.step + this.direction;
	if (next < 0 || next > this.imgSrc.steps - 1) {
		if (this.loop) {
			this.direction = -this.direction;
			next = this.step + this.direction;
		} else {
			this.done = true;
			return;
		}
	}
	this.step = next;
}
Animation.prototype.draw = function(ctx) {
	if (!this.imgSrc.ready)
		return;

	this.imgSrc.draw(ctx, this.step);

	if (this.doStep) {
		this.nextFrame();
		this.doStep = false;
		this.setTimeout(function() {
			this.doStep = true;
		}.bind(this), this.waitTime);
	}
}