簡  介

人工智能(Artificial Intelligence) ，英文縮寫為AI。它是研究、開發用于模擬、延伸和擴展智能的理論、方法、技術及應用系統的一門新的技術科學。本篇從嚴格意義上說屬于人工智能的范疇，但也是基礎中的基礎。本篇的目的是要賦予小球解散和集合兩項基本指令（智商），本篇內容中相關算法適用于子彈追蹤等塔防類游戲當中。

基礎類

二維向量(2D vector)可謂2D游戲或是動畫里最常用型別了。這里二維向量用Vector2類實現，用(x, y)表示。 Vector2亦用來表示空間中的點(point)，而不另建類。先看代碼：

var Vector2 = function(x, y) {  
         this.x = x || 0;  
         this.y = y || 0;  
     };  
     Vector2.prototype = {  
         set: function(x, y) {  
             this.x = x;  
             this.y = y;  
             return this;  
         },  
         sub: function(v) {  
             return new Vector2(this.x - v.x, this.y - v.y);  
         },  
         multiplyScalar: function(s) {  
             this.x *= s;  
             this.y *= s;  
             return this;  
         },  
         divideScalar: function(s) {  
             if (s) {  
                 this.x /= s;  
                 this.y /= s;  
             } else {  
                 this.set(0, 0);  
             }  
             return this;  
         },  
         length: function() {  
             return Math.sqrt(this.lengthSq());  
         },  
         normalize: function() {  
             return this.divideScalar(this.length());  
         },  
         lengthSq: function() {  
             return this.x * this.x + this.y * this.y;  
         },  
         distanceToSquared: function(v) {  
             var dx = this.x - v.x,  
             dy = this.y - v.y;  
             return dx * dx + dy * dy;  
         },  
         distanceTo: function(v) {  
             return Math.sqrt(this.distanceToSquared(v));  
         },  
         setLength: function(l) {  
             return this.normalize().multiplyScalar(l);  
         }  
     };  
     window.Vector2 = Vector2;  
 } (window)); 

在下面的使用的過程當中，我會特別標注其代表點還是向量；代表向量時，其幾何意義是什么？

給小球賦予智商，顧名思義需要小球類：

(function(window) {  
    var Ball = function(r, v, p, cp) {  
        this.radius = r;  
        this.velocity = v;  
        this.position = p;  
        this.collectionPosition = cp 
    }  
    Ball.prototype = {  
        collection: function(v) {  
            thisthis.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));   

其中

小球擁有4個屬性，分別是：radius半徑、velocity速度（Vector2）、position位置(Vector2)、collectionPosition集合點/小球的家(Vector2)。

小球擁有2個方法，分別是：collection集合、disband解散。

小球的集合方法所傳遞的參數為集合的速度，因為小球都有一個集合點的屬性，所以這里不用再傳入集合點/家給小球。

這里詳細分析一下collection方法，這也是整個demo的關鍵代碼。

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

因為setLength設置向量的長度：

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

所以collection可以改成：

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

normalize是獲取單位向量，也可以改成：

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

整個Vector2黑盒就全部展現出來，其整個過程都是向量的運算，代表含義如下所示：

this.collectionPosition

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

.divideScalar(this.length()) 得到該向量的單位向量；

.multiplyScalar(v); 改變該向量的長度。

最后把所得到的向量賦給小球的速度。

上面我們還是用到了解散方法，其過程是幫小球生成一個隨機速度，用到了MathHelp類的一個靜態方法：

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

粒子生成

寫了Vector2、Ball、MathHeper三個類之后，終于可以開始實現一點東西出來！

var ps = [],  
balls = [];  
function init(tex) {  
balls.length = 0;  
ps.length = 0;  
cxt.clearRect(0, 0, canvas.width, canvas.height);  
cxt.fillStyle = "rgba(0,0,0,1)";  
cxt.fillRect(0, 0, canvas.width, canvas.height);  
cxt.fillStyle = "rgba(255,255,255,1)";  
cxt.font = "bolder 160px 宋體";  
cxt.textBaseline = 'top';  
cxt.fillText(tex, 20, 20);  
 
//收集所有像素  
for (y = 1; y < canvas.height; y += 7) {  
for (x = 1; x < canvas.width; x += 7) {  
imageData = cxt.getImageData(20 + x, 20 + y, 1, 1);  
mageData.data[0] > 170) {  
ps.push({  
px: 20 + x,  
py: 20 + y  
})  
}  
}  
};  
cxt.fillStyle = "rgba(0,0,0,1)";  
cxt.fillRect(20, 20, canvas.width, canvas.height);  
   
//像素點和小球轉換  
for (var i in ps) {  
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));  
balls.push(ball);  
};  
   
cxt.fillStyle = "#fff";  
for (i in balls) {  
cxt.beginPath();  
cxt.arc(balls[i].position.x, balls[i].position.y, balls[i].radius, 0, Math.PI * 2, true);  
cxt.closePath();  
cxt.fill();  
}  
 
//解散：生成隨機速度  
for (var i in balls) {  
balls[i].disband(); 

其中分三個步驟：收集所有像素、 像素點和小球轉換、生成隨機速度。整個demo我們需要一個loop：

var time = 0;  
var cyc = 15;  
var a = 80;  
var collectionCMD = false;  
setInterval(function() {  
cxt.fillStyle = "rgba(0, 0, 0, .3)";  
cxt.fillRect(0, 0, canvas.width, canvas.height);  
cxt.fillStyle = "#fff";  
time += cyc;  
for (var i in balls) {  
if (collectionCMD === true && balls[i].position.distanceTo(balls[i].collectionPosition) <   
{  
balls[i].velocity.y = 0;  
balls[i].velocity.x = 0;  
CMD = true;  
for (var i in balls) {  
balls[i].collection(230);  
}  
}  
if (time === 7500) {  
time = 0;  
collectionCMD = false;  
or (var i in balls) {  
balls[i].velocity.y * cyc / 1000;  
balls[i].position.x += balls[i].velocity.x * cyc / 1000;  
}  
},  
 
cyc);  

這里使用time整體控制，使其無限loop。ps:這里還有一點不夠OO的地方就是應當為ball提供一個draw方法。

其中的balls[i].position.distanceTo(balls[i].collectionPosition) 代表了點與點之間的距離，這里判斷小球是否到了集合點或家。這里其幾何意義就不再向量了。

在線演示

請移步原文

原文鏈接:http://www.cnblogs.com/iamzhanglei/archive/2012/03/29/2422618.html

【編輯推薦】

1. 10個絕對讓你瘋狂的HTML5和JS實驗性展示
2. 淺談Web自動化測試原理
3. HTML5游戲開發的五個最佳實踐
4. 分享21個最新的超酷web設計特效
5. 關于HTML5的七個傳說