JavaScript ファイル分割

js1
最近JavaScriptを勉強していますが、Flasherである自分はどうしてもファイルを分割したくなってしまいます。AS3で言うと、メインクラス→管理クラス→子クラスといった風にしたいのです。なので今回は簡単なパーティクルをファイル分割を意識して作成してみました。

作成したものはこちらです。
http://works.mztm.jp/msok/JS/particle/index.html

JavaScriptファイルは以下のような構成になっています。

main.js
[sourcecode language=”js”]
(function(){
var canvas = document.getElementById("canvas");
var context = canvas.getContext("2d");

var particles = new ParticleCanvas(canvas);
particles.startParticles();
}());
[/sourcecode]

particleCanvas.js　→　全てのパーティクルを管理するjs
[sourcecode language=”js”]
function ParticleCanvas(canvas){
var NUM_PARTICLE = 500;
var pointList = [];
var canvas = canvas;
var context = canvas.getContext("2d");
var gravity = 0.1;

function update(){
var i, point, len = pointList.length;
for(i = 0; i < len; i++){
point = pointList[i];
point.update();
}
};

function draw(){
var i, point, len = pointList.length;
context.fillStyle = "rgba(0,0,0,0.05)";
context.fillRect(0, 0, canvas.width, canvas.height);
for(i = 0; i < len; i += 1) {
point = pointList[i];
context.fillStyle = point.color;
context.beginPath();
context.arc(point.x, point.y, point.radius, 0, Math.PI * 2, false);
context.fill();
}
};

function addPoint(){
var point;
if(pointList.length < NUM_PARTICLE) {
point = new Particle(canvas);
point.initPoint();
pointList.push(point);
}
};

this.startParticles = function(){
setInterval(function() {
addPoint();
update();
draw();
}, 1000/60)
};
}
[/sourcecode]

particle.js　→　ひとつのパーティクル
[sourcecode language=”js”]
function Particle(canvas){
this.width = canvas.width;
this.height = canvas.height;
this.gravity = 0.1;
};

Particle.prototype = {

initPoint : function(){
this.x = this.width / 2;
this.y = this.height;
this.vx = Math.random() * 4 -2;
this.vy = Math.random() * (-6) -4;
this.radius = Math.random() * 5 + 1;
this.color = this.randomColor();
},

randomColor : function(){
var r, g, b;
r = Math.floor(Math.random() * 255);
g = Math.floor(Math.random() * 255);
b = Math.floor(Math.random() * 255);
return "rgb(" + r + "," + g + "," + b + ")";
},

update : function(){
this.vy += this.gravity;
this.x += this.vx;
this.y += this.vy;
if(this.x > this.width || this.x < 0 || this.y > this.height || this.y < 0) {
this.initPoint();
}
}
}
[/sourcecode]

JavaScriptを書く際はJavaScriptの流儀に従って書くべきで、無理矢理他言語のやり方を適応すべきではないと思うので、果たしてこの書き方が良いのかどうか自信はありません。が、Flasherとしてはなんとなく納得のいく書き方となった気がします。

パーティクルの参考サイト
・http://www.bit-101.com/blog/?p=3155
・http://www.bit-101.com/blog/?p=3140

Related Posts