だんまくさんぷる２

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;

/* ------------------------------------------------------------------------- */
//  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.w     = ('w'  in mover) ? mover.w  : 10;
	this.h     = ('h'  in mover) ? mover.h  : 10;
	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").drawEllipse({
			x         : this.x,
			y         : this.y,
			width     : this.w,
			height    : this.h,
			fillStyle : '#fff',
		});
	},
	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();
main();

/* ------------------------------------------------------------------------- */
//  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),
				})
			);
			console.log(Movers.array.length);
		}

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

});