## HTML5 OO实践

2012-03-29 08:42  【当耐特】  阅读(7704)  评论(26编辑  收藏

# 基础类

1  (function(window) {

2     var Vector2 = function(x, y) {
3         this.x = x || 0;
4         this.y = y || 0;
5     };
6     Vector2.prototype = {
7         set: function(x, y) {
8             this.x = x;
9             this.y = y;
10             return this;
11         },
12         sub: function(v) {
13             return new Vector2(this.x - v.x, this.y - v.y);
14         },
15         multiplyScalar: function(s) {
16             this.x *= s;
17             this.y *= s;
18             return this;
19         },
20         divideScalar: function(s) {
21             if (s) {
22                 this.x /= s;
23                 this.y /= s;
24             } else {
25                 this.set(0, 0);
26             }
27             return this;
28         },
29         length: function() {
30             return Math.sqrt(this.lengthSq());
31         },
32         normalize: function() {
33             return this.divideScalar(this.length());
34         },
35         lengthSq: function() {
36             return this.x * this.x + this.y * this.y;
37         },
38         distanceToSquared: function(v) {
39             var dx = this.x - v.x,
40             dy = this.y - v.y;
41             return dx * dx + dy * dy;
42         },
43         distanceTo: function(v) {
44             return Math.sqrt(this.distanceToSquared(v));
45         },
46         setLength: function(l) {
47             return this.normalize().multiplyScalar(l);
48         }
49     };
50     window.Vector2 = Vector2;
51 } (window));

(function(window) {
var Ball = function(r, v, p, cp) {
this.velocity = v;
this.position = p;
this.collectionPosition = cp
}
Ball.prototype = {
collection: function(v) {
this.velocity = this.collectionPosition.sub(this.position).setLength(v)
},
disband: function() {
this.velocity = new Vector2(MathHelp.getRandomNumber( - 230, 230), MathHelp.getRandomNumber( - 230, 230))
}
}
window.Ball = Ball
} (window));

collection: function (v) {
this.velocity =this.collectionPosition.sub(this.position).setLength(v);
},

setLength: function (l) {
return this.normalize().multiplyScalar(l);

}

this.velocity = this.collectionPosition.sub(this.position).normalize().multiplyScalar(v);

normalize是获取单位向量，也可以改成：

this.collectionPosition.sub(this.position).divideScalar(this.length()).multiplyScalar(v);

this.collectionPosition

.sub(this.position)                获取小球所在位置指向小球集合位置的向量；

.divideScalar(this.length()) 得到该向量的单位向量；
.multiplyScalar(v);               改变该向量的长度。

(function (window) {
var MathHelp = {};
MathHelp.getRandomNumber = function (min, max) {
return (min + Math.floor(Math.random() * (max - min + 1)));
}
window.MathHelp = MathHelp;

} (window));

# 粒子生成

1 var ps = [],
2 balls = [];
3 function init(tex) {
4     balls.length = 0;
5     ps.length = 0;
6     cxt.clearRect(0, 0, canvas.width, canvas.height);
7     cxt.fillStyle = "rgba(0,0,0,1)";
8     cxt.fillRect(0, 0, canvas.width, canvas.height);
9     cxt.fillStyle = "rgba(255,255,255,1)";
10     cxt.font = "bolder 160px 宋体";
11     cxt.textBaseline = 'top';
12     cxt.fillText(tex, 20, 20);
13
14     //收集所有像素
15     for (y = 1; y < canvas.height; y += 7) {
16         for (x = 1; x < canvas.width; x += 7) {
17             imageData = cxt.getImageData(20 + x, 20 + y, 1, 1);
18             if (imageData.data[0] > 170) {
19                 ps.push({
20                     px: 20 + x,
21                     py: 20 + y
22                 })
23             }
24         }
25     };
26     cxt.fillStyle = "rgba(0,0,0,1)";
27     cxt.fillRect(20, 20, canvas.width, canvas.height);
28
29     //像素点和小球转换
30     for (var i in ps) {
31         var ball = new Ball(2, new Vector2(0, 0), new Vector2(ps[i].px, ps[i].py), new Vector2(ps[i].px, ps[i].py));
32         balls.push(ball);
33     };
34
35     cxt.fillStyle = "#fff";
36     for (i in balls) {
37         cxt.beginPath();
38         cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);
39         cxt.closePath();
40         cxt.fill();
41     }
42
43     //解散：生成随机速度
44     for (var i in balls) {
45         balls[i].disband();
46     }

47 }

1 var time = 0;
2 var cyc = 15;
3 var a = 80;
4 var collectionCMD = false;
5 setInterval(function() {
6     cxt.fillStyle = "rgba(0, 0, 0, .3)";
7     cxt.fillRect(0, 0, canvas.width, canvas.height);
8     cxt.fillStyle = "#fff";
9     time += cyc;
10     for (var i in balls) {
11         if (collectionCMD === true && balls[i].position.distanceTo(balls[i].collectionPosition) < 2) {
12             balls[i].velocity.y = 0;
13             balls[i].velocity.x = 0;
14         }
15     }
16
17     if (time === 3000) {
18         collectionCMD = true;
19         for (var i in balls) {
20             balls[i].collection(230);
21         }
22     }
23     if (time === 7500) {
24         time = 0;
25         collectionCMD = false;
26         for (var i in balls) {
27             balls[i].disband();
28         }
29     }
30
31     for (var i in balls) {
32         cxt.beginPath();
33         cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);
34         cxt.closePath();
35         cxt.fill();
36         balls[i].position.y += balls[i].velocity.y * cyc / 1000;
37         balls[i].position.x += balls[i].velocity.x * cyc / 1000;
38     }
39 },

40 cyc);