だんまくさんぷる３

shooting.js

/**
 * Shooting Sample
 * created by @hecomi
 * web: http://d.hatena.ne.jp/hecomi/
 */

$(function(){
/* ------------------------------------------------------------------------- */
//  Global Parameters
/* ------------------------------------------------------------------------- */
const FPS    = 30;
const MARGIN = 50;
const WIDTH  = 640;
const HEIGHT = 480;

// color
const COLOR = {
	RED     : 0,
	GREEN   : 1,
	BLUE    : 2,
	YELLOW  : 3,
	PURPLE  : 4,
	PINK    : 5,
	ORANGE  : 6,
	SKYBLUE : 7,
	BLACK   : 8,
	WHITE   : 9,
};

/* ------------------------------------------------------------------------- */
//  Image Loader
/* ------------------------------------------------------------------------- */
var ImageLoader = function(imgPath) {
	this.loaded = false;
	this.img    = new Image();
	this.path   = imgPath + "?" + new Date().getTime();
};

ImageLoader.prototype = {
	load  : function() {
		this.img.onload = function(_this) {
			return function() {
				_this.loaded = true;
			}
		}(this);
		this.img.src = this.path;
	},
};

/* ------------------------------------------------------------------------- */
//  Materials Container
/* ------------------------------------------------------------------------- */
var Materials = {
	map : {},
	add : function(material) {
		var key = material.key;
		this.map[key] = {
			instance : new ImageLoader(material.path),
			path     : material.path,
			width    : material.width,
			height   : material.height,
			cd       : material.cd,
		};
		this.map[key].instance.load();
	},
	loaded : function() {
		for (var key in this.map) {
			if (!this.map[key].instance.loaded) return false;
		}
		return true;
	},
	img : function(key) {
		return this.map[key].instance.img;
	},
	path : function(key) {
		return this.map[key].path;
	},
	width : function(key) {
		return this.map[key].width;
	},
	height : function(key) {
		return this.map[key].height;
	},
	cd : function(key) {
		return this.map[key].cd;
	},
}

/* ------------------------------------------------------------------------- */
//  Container
/* ------------------------------------------------------------------------- */
var Container = function() {
	this.array = [];
}

Container.prototype = {
	add   : function(instance) {
		this.array.push(instance);
	},
	move  : function() {
		var n = 0;
		for (var i in this.array) {
			this.array[i].move();
			if (!this.array[i].flag) {
				this.array.splice(n, 1);
			}
			++n;
		}
	},
	draw : function() {
		for (var i in this.array) {
			this.array[i].draw();
		}
	},
};


/* ------------------------------------------------------------------------- */
//  Mover
/* ------------------------------------------------------------------------- */
var Mover = function(mover) {
	this.x     = ('x'     in mover) ? mover.x     : 0;
	this.y     = ('y'     in mover) ? mover.y     : 0;
	this.vx    = ('vx'    in mover) ? mover.vx    : 0;
	this.vy    = ('vy'    in mover) ? mover.vy    : 3;
	this.color = ('color' in mover) ? mover.color : 0;
	this.key   = ('key'   in mover) ? mover.key   : null,
	this.w     = ('key'   in mover) ? Materials.width(mover.key)  : 0;
	this.h     = ('key'   in mover) ? Materials.height(mover.key) : 0;
	this.cd    = ('key'   in mover) ? Materials.cd(mover.key)     : 0;
	this.sx    = this.w * this.color;
	this.sy    = 0;
	this.cnt   = 0;
	this.flag  = true;
};

Mover.prototype = {
	move : function() {
		this.x += this.vx;
		this.y += this.vy;
		this.chkBoundary();
		++this.cnt;
	},
	draw : function() {
		$('#canvas').drawImage({
			source  : Materials.path(this.key),
			x       : this.x,
			y       : this.y,
			width   : this.w,
			height  : this.h,
			sWidth  : this.w,
			sHeight : this.h,
			sx      : this.sx,
			sy      : this.sy,
			cropFromCenter: false,
		});
	},
	chkBoundary : function() {
		if (this.x < -this.w - MARGIN || this.x > WIDTH  + this.w + MARGIN ||
			this.y < -this.h - MARGIN || this.y > HEIGHT + this.h + MARGIN) {
			this.flag = false;
		}
	},
};

/* ------------------------------------------------------------------------- */
//  Canvas
/* ------------------------------------------------------------------------- */
var Canvas = {
	resize : function() {
		var wRate = $(window).width()  / WIDTH;
		var hRate = $(window).height() / HEIGHT;
		var rate = Math.min(wRate, hRate);

		$('#canvas').css({
			width  : WIDTH  * rate,
			height : HEIGHT * rate,
		});
	},
	clear  : function() {
		$('#canvas').clearCanvas();
	},
};

/* ------------------------------------------------------------------------- */
//  OnLoad
/* ------------------------------------------------------------------------- */
$(window).bind({
	resize : Canvas.resize
});
Canvas.resize();

/* ------------------------------------------------------------------------- */
//  Resource
/* ------------------------------------------------------------------------- */
Materials.add({
	key    : 'bullet.normal',
	path   : 'img/bullet/normal.png',
	width  : 20,
	height : 20,
	cd     : 5,
});

var loadTimer = setInterval(function(){
	if (Materials.loaded()) {
		clearInterval(loadTimer);
		main();
	}
}, 100);

/* ------------------------------------------------------------------------- */
//  Main
/* ------------------------------------------------------------------------- */
function main() {
	var frame = 0;
	var Movers = new Container();

	setInterval(function(){
		if (frame%5 === 0) {
			var angle = 2 * Math.PI * Math.random();
			Movers.add(
				new Mover({
					x     : WIDTH/2,
					y     : HEIGHT/2,
					w     : 10,
					h     : 10,
					vx    : 3 * Math.sin(angle),
					vy    : 3 * Math.cos(angle),
					key   : 'bullet.normal',
					color : COLOR.BLUE,
				})
			);
		}

		Movers.move();
		Canvas.clear();
		Movers.draw();
		++frame;
	}, 1000/FPS);
}

});