HTML5人工智能基础及实践

简  介

人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容中相关算法适用于子弹追踪等塔防类游戏当中。

基础类

二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里二维向量用Vector2类实现，用(x, y)表示。 Vector2亦用来表示空间中的点(point)，而不另建类。先看代码：

1. 		var Vector2 = function(x, y) {  

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

在下面的使用的过程当中，我会特别标注其代表点还是向量；代表向量时，其几何意义是什么？

给小球赋予智商，顾名思义需要小球类：

1. 		(function(window) {  

2.     var Ball = function(r, v, p, cp) {  
3.         this.radius = r;  
4.         this.velocity = v;  
5.         this.position = p;  
6.         this.collectionPosition = cp 
7.     }  
8.     Ball.prototype = {  
9.         collection: function(v) {  
10.             thisthis.velocity = this.collectionPosition.sub(this.position).setLength(v)  
11.         },  
12.         disband: function() {  
13.             this.velocity = new Vector2(MathHelp.getRandomNumber( - 230, 230), MathHelp.getRandomNumber( - 230, 230))  
14.         }  
15.     }  
16.     window.Ball = Ball  
17. } (window));   

其中

小球拥有4个属性，分别是：radius半径、velocity速度（Vector2）、position位置(Vector2)、collectionPosition集合点/小球的家(Vector2)。

小球拥有2个方法，分别是：collection集合、disband解散。

小球的集合方法所传递的参数为集合的速度，因为小球都有一个集合点的属性，所以这里不用再传入集合点/家给小球。

这里详细分析一下collection方法，这也是整个demo的关键代码。

1. 		collection: function (v) {  

2. thisthis.velocity =this.collectionPosition.sub(this.position).setLength(v);  
3. },  

因为setLength设置向量的长度：

1. 		setLength: function (l) {  

2.  return this.normalize().multiplyScalar(l);  
3.  
4.  }  

所以collection可以改成：

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

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

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

整个Vector2黑盒就全部展现出来，其整个过程都是向量的运算，代表含义如下所示：

this.collectionPosition

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

.divideScalar(this.length()) 得到该向量的单位向量；

.multiplyScalar(v); 改变该向量的长度。

最后把所得到的向量赋给小球的速度。

上面我们还是用到了解散方法，其过程是帮小球生成一个随机速度，用到了MathHelp类的一个静态方法：

1. 		(function (window) {  

2. var MathHelp = {};  
3. MathHelp.getRandomNumber = function (min, max) {  
4. return (min + Math.floor(Math.random() * (max - min + 1)));  
5. }  
6. window.MathHelp = MathHelp;  
7.  
8. } (window));  

粒子生成

写了Vector2、Ball、MathHeper三个类之后，终于可以开始实现一点东西出来！

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. mageData.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(); 

其中分三个步骤：收集所有像素、 像素点和小球转换、生成随机速度。整个demo我们需要一个loop：

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) <   
12. {  
13. balls[i].velocity.y = 0;  
14. balls[i].velocity.x = 0;  
15. CMD = true;  
16. for (var i in balls) {  
17. balls[i].collection(230);  
18. }  
19. }  
20. if (time === 7500) {  
21. time = 0;  
22. collectionCMD = false;  
23. or (var i in balls) {  
24. balls[i].velocity.y * cyc / 1000;  
25. balls[i].position.x += balls[i].velocity.x * cyc / 1000;  
26. }  
27. },  
28.  
29. cyc);  

这里使用time整体控制，使其无限loop。ps:这里还有一点不够OO的地方就是应当为ball提供一个draw方法。

其中的balls[i].position.distanceTo(balls[i].collectionPosition) 代表了点与点之间的距离，这里判断小球是否到了集合点或家。这里其几何意义就不再向量了。

查看原文