人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容子弹追踪等塔防类游戏当中。
基础类
二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里三维向量用Vector2类实现，用(x, y)表示。 Vector2亦用来表示空间中的点(point)，而不另建类。先看代码：
(function(window) {
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) {
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));
其中
小球拥有4个属性，分别是：radius半径、velocity速度（Vector2）、position位置(Vector2)、collectionPosition集合点/小球的家(Vector2)。
小球拥有2个方法，分别是：collection集合、disband解散。
小球的集合方法所传递的参数为集合的速度，因为小球都有一个集合点的属性，所以这里不用再传入集合点/家给小球。
这里详细分析一下collection方法，这也是整个demo的关键代码。
collection: function (v) {
this.velocity = this.collectionPosition.sub(this.position).setLength(v);
},
因为setLength设置向量的长度：
setLength: function (l) {
return this.normalize().multiplyScalar(l);
}
所以collection可以改成：
this.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);
if (imageData.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) < 2) {
balls[i].velocity.y = 0;
balls[i].velocity.x = 0;
}
}
if (time === 3000) {
collectionCMD = true;
for (var i in balls) {
balls[i].collection(230);
}
}
if (time === 7500) {
time = 0;
collectionCMD = false;
for (var i in balls) {
balls[i].disband();
}
}
for (var 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();
balls[i].position.y += 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) 代表了点与点之间的距离，这里判断小球是否到了集合点或家。这里其几何意义就不再向量了。
在线演示
IamZhangLei.com
本文版权归【当耐特砖家】和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
本文版权归【当耐特砖家】和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。
随笔分类 -HTML5
HTML5人工智能基础及OO实践
2012-03-29 08:42 by 【当耐特砖家】, 370 visits, 网摘, 收藏, 编辑
摘要：简介 人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容子弹追踪等塔防类游戏当中。 基础类 二维向量(2D vector)可谓2D游戏或是动画里最常用型别了... 阅读全文
HTML5 Canvas【所见===所得】编程工具正式发布
2012-03-28 08:28 by 【当耐特砖家】, 3322 visits, 网摘, 收藏, 编辑
摘要：+ - 使用指南 基本使用： var c=document.getElementById("myCanvas");var cxt=c.getContext("2d");cxt.fillStyle="#FF0000";cxt.beginPath();cxt.arc(70,18... 阅读全文
HTML5 Canvas开发者和读者的福音
2012-03-27 12:25 by 【当耐特砖家】, 1936 visits, 网摘, 收藏, 编辑
摘要：演示今天看到可见即可得的编程 ，其中是在svg中实现的。理所当然，它可以搬到 canvas当中，而且支持canvas动画播放，而不是仅仅是静态的svg。效果如下所示: Your browser does not support the canvas element. 修改颜色(fillsStyle)或者count或者angle等值试试！var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext("2d");function taiji(x, y, radius, a 阅读全文
HTML5 【IE9割绳子】制作教程来袭····
2012-03-26 08:04 by 【当耐特砖家】, 2426 visits, 网摘, 收藏, 编辑
摘要：回顾 与“Angry Birds”一样，2010年发布的“割绳子”是一款火爆的手机游戏，首先推出的是iOS版，于去年6月份推出Android版。它的游戏内容是：一个叫Om Nom的绿怪兽饿了，你必须喂他糖果，而要得到糖果，你要先割断绳子以及操纵安全气袋和泡泡，过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序，微软与该款游戏的开发商ZeptoLab联合推出了HTML... 阅读全文
HTML5动感菜单来了
2012-03-22 08:59 by 【当耐特砖家】, 4256 visits, 网摘, 收藏, 编辑
摘要：简介 上篇tween阐之未尽，今日继续。 上篇使用tween来制作对联下滑效果，提及tween可以用于各种开场动画、游戏画面切换等场景当中。其实tween的一个重要应用场景还包括----动感菜单制作。 一款好的游戏必须搭配一个体验很好的导航菜单,tween可以帮助我们实现。如下图所示，这是小鸟的菜单，本篇实现一个比小鸟还要酷炫的菜单。 菜单分类 菜单是游戏当中必须的元素，是游戏中出现... 阅读全文
HTML5对联来了
2012-03-20 07:51 by 【当耐特砖家】, 3771 visits, 网摘, 收藏, 编辑
摘要：今天看到园子里的运动学基础，里面介绍了一些基本的缓动效果，突发创意利用tween效果制作了HTML5对联。 对联 对联，又称楹联或对子，是写在纸、布上或刻在竹子、木头、柱子上的对偶语句言简意深，对仗工整，平仄协调，是一字一音的中文语言独特的艺术形式。对联相传起于五代后蜀主孟昶。它是中华民族的文化瑰宝。 使用计算机制作对联作用如下： 1.整合入游戏，使其参入中国风； 2.广告视频制作； 3.网站左右悬挂，比如春节过年、圣诞、情人节、程序员节（1024）等节日悬挂相应的问候对联。 缓动 缓动的最大用处就是应用在设计的运动表现上，他可以结合物理... 阅读全文
HTML5错误的绳子算法
2012-03-12 14:31 by 【当耐特砖家】, 712 visits, 网摘, 收藏, 编辑
摘要：var line = function (p1, p2, length, g) { this.initialize(p1, p2, length, g); } line.prototype = { initialize: function (p1, p2, length, g) { this.p1 = p1; this.p2 = p2; this.length = length; ... 阅读全文
HTML5热门游戏制作---没有99美元的Impact也行
2012-03-06 08:38 by 【当耐特砖家】, 2543 visits, 网摘, 收藏, 编辑
摘要：Impact 简介 Impact is a JavaScript Game Engine that allows you to develop stunning HTML5 Games for desktop and mobile browsers. Impact 一款让开发者在桌面浏览器和移动终端浏览器开发优秀的HTML5游戏的javascript游戏引擎。 官网地址：http://impactjs.com/ 售价：99美元 其中的最受欢迎且耳熟能详的莫过于下面这款： 这是一个打字射击游戏，该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏，总体感觉... 阅读全文
HTML5实验室【四十二】—javascript挑战流体实验
2011-12-12 07:33 by 【当耐特砖家】, 8674 visits, 网摘, 收藏, 编辑
摘要：一.简介 把现实世界当中的物体模拟到计算机当中，一些简单的物理实验、碰撞旋转等等难度还是不算很大，难度较大的应当算流体模拟。 本文将在Canvas当中模拟出一个2D平面内的水珠，涉及的知识点和技巧包括：Jscex基础知识，贝塞尔曲线的绘制，合理利用CanvasRenderingContext2D的translate和rotate等API。 二.绘制椭圆 在模拟水滴之前，我们先思考一下怎么在canvas当中绘制一个椭圆。 大家可以很容易想到 下面几种方案： 1.根据椭圆笛卡尔坐标系方程绘制 2.根据椭圆极坐标方程绘制 3.根据椭圆曲率变化绘制 4.利... 阅读全文
HTML5游戏制作完全指南
2011-12-08 18:28 by 【当耐特砖家】, 4080 visits, 网摘, 收藏, 编辑
摘要：简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前，我们必须创建一个画布。因... 阅读全文
HTML5实验室【四十一】--怎么把CanvasLoading插件嵌入你的游戏
2011-12-07 17:01 by 【当耐特砖家】, 1716 visits, 网摘, 收藏, 编辑
摘要：一.简介 CanvasLoading插件适用于任何基于Canvas游戏的loading过程展示。 二.插件源码 Loading = function (text, fontSize,baseFontSize, color, position, interval, font, bolder) { this.text = text; ... 阅读全文
HTML5书籍【下载】
2011-12-06 07:10 by 【当耐特砖家】, 8859 visits, 网摘, 收藏, 编辑
摘要：排名分先后:)一.HTML5实验室 链接：http://www.cnblogs.com/iamzhanglei/archive/2011/11/06/2237870.html 二.中文学习教程 下载链接：中文学习教程 三.Canvas速查表 下载链接：Canvas速查表 四.HTML5高级程序设计 下载链接1：part1 下载链接2：part2 五.HTML5 Up and Running 下载链接：HTML5 Up and Running 六.New.Riders.Introducing.HTML5 下载链接：New.R... 阅读全文
HTML5实验室【四十】—Jscex版Loading插件V11.12.05发布
2011-12-05 17:22 by 【当耐特砖家】, 1994 visits, 网摘, 收藏, 编辑
摘要：一.简介 本插件适用于基于Canvas的游戏loading过程中的显示。 更新内容： a.loading显示的文字可配置 b.文字大小可配置 c.文字位置可配置 d.文字与文字的间距可配置 e.文字颜色、字体、是否加粗可配置 二.插件源码 Vector2 = function (x, y) { this.x =... 阅读全文
HTML5实验室【三十九】—Jscex版Loading插件预览版本抢先看
2011-12-04 17:30 by 【当耐特砖家】, 1920 visits, 网摘, 收藏, 编辑
摘要：一.简介 在大量游戏制作过程当中，必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到，比如《XXX》的Loading 一个好的Loading,可以给用户不错... 阅读全文
HTML5实验室【三十八】--玩转像素系列【二】
2011-12-03 14:11 by 【当耐特砖家】, 1886 visits, 网摘, 收藏, 编辑
摘要：一.简介 Canvas API最有用的特性之一是允许开发人员直接访问canvas底层像素数据。这种数据访问是双向的：一方面，可以以数值数组形式获取像素数据；另一方面，可以修改数组的值以将其应用于canvas。这要归功于context API内置的三个函数。 其中最重要的一个是context.getImageData(sx, sy, sw, sh)。这个函数返回当前canvas状态并以数值数组的... 阅读全文
HTML5实验室【三十七】--玩转像素系列【一】
2011-12-02 18:36 by 【当耐特砖家】, 2045 visits, 网摘, 收藏, 编辑
摘要：一.简介 Canvas相对于SVG来说的一大优势就是像素级别的操作，而SVG相对于Canvas来说的一大优势就是方便添加事件，当然这个Canvas可以用第三方库来弥补。 在理论上：SVG能做到的，Canvas都能做到；Canvas能做到的，SVG不一定能做到（或者复杂度相当之高）。 二.两种像素操作 我们首先画两个圆形： var c = document.getElementById("myCanvas"); var cxt = c.getContext("2d"); cxt.strokeStyle = "#fff"; cxt.beg 阅读全文
HTML5实验室【三十六】--借来的创意
2011-12-01 08:54 by 【当耐特砖家】, 2568 visits, 网摘, 收藏, 编辑
摘要：一.简介 计数是一种最简单基本的运算，计数器就是实现这种运算的逻辑电路，计数器在数字系统中主要是对脉冲的个数进行计数，以实现测量、计数和控制的功能，同时兼有分频功能，计数器是由基本的计数单元和一些控制门所组成，计数单元则由一系列具有存储信息功能的各类触发器构成，这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛，如在电子计算机的控制器中对指令地址进行计数，以便顺序取出下一条指令，在运算器中作乘法、除法运算时记下加法、减法次数，又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态，一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主... 阅读全文
HTML5实验室【三十五】--你必须知道的10个提高Canvas性能技巧
2011-11-29 17:07 by 【当耐特砖家】, 3443 visits, 网摘, 收藏, 编辑
摘要：你还在抱怨自己写的canvas demo徘徊在10帧以下吗？你还在烦恼打开自己写的应用就听见CUP风扇转吗？你正在写一个javascript Canvas库吗？那么下面九点就是你必须知道的！ 一.预渲染 错误代码： var canvas = document.getElementById("myCanvas"); var context = this.canvas.getContext('2d'); var drawAsync = eval(Jscex.compile("async", function () { while (true) 阅读全文
HTML5实验室【三十】—Text Particle Systems
2011-11-25 08:41 by 【当耐特砖家】, 2034 visits, 网摘, 收藏, 编辑
摘要：一.简介 在一些企业广告或者网站需要一些动态文字特效的时候,往往有下面这几种选择： 1.Flash制作的文字特效 2.制作一个动态的GIF 3.Javascript+dom+css 4.SVG 二.javascript+Canvas文字特效 这篇我为大家介绍第五种，也是最强大的一种，上面四种都有局限性。 我使用的是javascript+Canvas,当然我们依然用Jscex,为什么Canvas制作文字特效最强大?? 因为Canvas支持像素级别操作，它不仅可以宏观上制作一些文字特效，也可以深入实现文字粒子系统特效----Text Particle Systems。 当然... 阅读全文
HTML5实验室【二十九】—我的HTML5游戏大赛参赛作品（下载试玩）
2011-11-22 07:29 by 【当耐特砖家】, 3501 visits, 网摘, 收藏, 编辑
摘要：一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物，累积数量来通关，随着摄取食物的增加，蛇身体会慢慢变长变肥大。游戏开放了许多快捷键，方便玩家操作。游戏一共七个关卡，一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验，推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎，使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 （按钮），没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍... 阅读全文
HTML5实验室【二十八】—Canvas+Video打造酷炫播放体验
2011-11-21 08:32 by 【当耐特砖家】, 3810 visits, 网摘, 收藏, 编辑
摘要：一.简介 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如： 二.Canvas+VideoHTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas ... 阅读全文
HTML5实验室【二十七】—WebSocket
2011-11-20 08:01 by 【当耐特砖家】, 2799 visits, 网摘, 收藏, 编辑
摘要：一.简介 WebSocket 是HTML5一种新的协议。它是实现了浏览器与服务器的双向通讯。 在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 现在，很多网站为了实现即时通讯，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器... 阅读全文
HTML5实验室【二十六】--本地存储及应用
2011-11-18 21:10 by 【当耐特砖家】, 1961 visits, 网摘, 收藏, 编辑
摘要：一.简介 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求传... 阅读全文
HTML5实验室【二十四】--令人震撼的表白,你hold住吗？
2011-11-15 09:02 by 【当耐特砖家】, 7286 visits, 网摘, 收藏, 编辑
摘要：一.简介 为什么程序员单身的多呢？因为面向对象的编程中，经常会遇到一个错误：找不到对象。 本文也属于单身程序员的福音范畴，让单身程序员勇敢示爱·····，但是老天保佑你的示爱对象不要用IE678~~ 本文动画效果全部基于Jscex，然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解，本篇先饱饱眼福。 二.作品一：心碎 Your browser does not support ... 阅读全文
HTML5实验室系列【十七】—爱♥曲线,单身程序猿福音
2011-11-07 08:41 by 【当耐特砖家】, 5593 visits, 网摘, 收藏, 编辑
摘要：一.笛卡尔♥ 笛卡尔（René Descartes）是17 世纪著名的法国哲学家、数学家，有着“现代哲学之父”的称号。笛卡尔对数学的贡献也是功不可没，他创造了解析几何，开创了数学、物理学、天文学、地质学等诸多学科的新时代。 传闻，笛卡尔曾流落到瑞典，邂逅美丽的瑞典公主克里斯蒂娜（Christina）。笛卡尔发现克里斯蒂娜公主聪明伶俐，便做起了 公主的数学老师， 于是两人完全沉浸在了数学的世界中... 阅读全文
HTML5实验室【目录】(持续更新···)
2011-11-06 10:05 by 【当耐特砖家】, 14648 visits, 网摘, 收藏, 编辑
摘要：一.本博客资源 HTML5实验室【一】--用Jscex画圆 HTML5实验室【二】--Jscex版火拼俄罗斯【荐】 HTML5实验室【四】--Jscex+Easeljs制作坦克大战【二】：Jscex并行编程模型 HTML5实验室【六】--摄像机、投影、3D旋转以及缩放【荐】 HTML5实验室【七】--CnBlogs博文demo演示技巧比较：jsfiddle完胜【荐】 HTML5实验室【... 阅读全文
HTML5实验室【十五】----艺术！不是吗？
2011-11-02 08:48 by 【当耐特砖家】, 7316 visits, 网摘, 收藏, 编辑
摘要：一.简介 每周优秀代码赏析系列致力于挖掘一些优雅的语法糖，也挖掘一些优秀的算法，艺术作品更加不能放过。 当我看到这件作品的时候，我表示非常喜欢。这个作品的产生不仅仅需要编程和算法，作者肯定是个充满了艺术细胞的人。 倘若有什么canvas艺术作品比赛的话，我想它就是获奖的那个。 二.代码公布 下面就揭开本周优秀代码的神秘面纱： HTML如下：代码不多，没有引用任何js库。对于我这样的代码语意... 阅读全文
HTML5版3D实验室系列【七】----锥
2011-11-01 13:57 by 【当耐特砖家】, 2667 visits, 网摘, 收藏, 编辑
摘要：一.简介 圆锥，数学领域术语，有两种定义。 解析几何定义：圆锥面和一个截它的平面（满足交线为圆）组成的空间几何图形叫圆锥。 立体几何定义：以直角三角形的一条直角边所在直线为旋转轴，其余两边旋转形成的面所围成的旋转体叫做圆锥。该直角边叫圆锥的轴 。 二.圆锥模拟 通过以上两个定义，我可以模拟出圆锥上所有的点： i 既是h,又是半径r。这个时候，我们生成的 Z都是大于零的，不过没有关系... 阅读全文
HTML5版3D实验室系列【六】----WAVE
2011-10-31 10:53 by 【当耐特砖家】, 2689 visits, 网摘, 收藏, 编辑
摘要：一.简介 波，在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播，这个物理量（或其扰动，下同）成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量（或其扰动）的传播速度。物理量函数称为波函数，数学上它是一个叫波动方程的在特定边界条件下的解。 物理定义：某一物理量的... 阅读全文
HTML5版3D实验室系列【三】----JavaScript玩转3D粒子系统
2011-10-19 12:41 by 【当耐特砖家】, 5872 visits, 网摘, 收藏, 编辑
摘要：一.简介 这里所说的粒子系统，指得是大量的物体的聚集，我就把它叫做Particle Sytem。下面这个例子主要展示了物体的旋转运动，你应该可以看到一个大量分子（400个位置随机产生的星星）组成的旋转球体。 二.球体模拟 在三维笛卡尔坐标系当中，球心在原点（0，0，0）的球方程如下： X2 +Y2+Z2=R2 在模拟球体之前，我们先定义一个三维矢量， Vector3 = function (x, y, z) { this.x = x || 0; th... 阅读全文
世界上最短的时钟代码！更短的，有木有？
2011-10-16 09:15 by 【当耐特砖家】, 9744 visits, 网摘, 收藏, 编辑
摘要：一.简介Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。Processing.js是一个开放的编程... 阅读全文
javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布
2011-10-08 07:41 by 【当耐特砖家】, 3538 visits, 网摘, 收藏, 编辑
摘要：一.简介1976年，Gremlin平台推出了一款经典街机游戏Blockade。游戏中，两名玩家分别控制一个角色在屏幕上移动，所经之处砌起围栏。角色只能向左、右方向90度转弯，游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂？其实就是下面这个样子： 基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋，玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。 Blockade 很受欢迎，类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏—— 阅读全文
CnBlogs博文demo演示技巧比较：jsfiddle完胜
2011-10-07 20:46 by 【当耐特砖家】, 5344 visits, 网摘, 收藏, 编辑
摘要：一.简介如果你是一名前端博主，你希望通过代码+演示来透彻的讲解一些技巧，并且无缝嵌入你的博客，那么jsfiddle是一个很好的选择。本文将比较博客园前端dev们各种演示方式，大家可以挑选自己喜欢的方式。二.jsFiddle简介jsFiddle的官方网站：http://jsfiddle.net/它包括了顶端的控制按钮，如下图：分别代表：运行、保存、重置、代码格式化，代码语法错误检查下面的4个windows你可以分别调试HTML，CSS，Javascript，右下角显示代码的运行结果。在左边的操作区，你可以选择相关的js类库，支持的还是相当全的。当然，也支持自定义的类库，这个很不错。这个工具可以有 阅读全文
HTML5实验室系列【四】----摄像机、投影、3D旋转、缩放
2011-09-23 08:18 by 【当耐特砖家】, 10710 visits, 网摘, 收藏, 编辑
摘要：【简述】 3D效果分两种，一种是伪3D骨架，一种是3D实体.3D骨架：是通过大量的计算将3D世界中所有点投影到二维平面中。3D实体:通过摄像机向投影面发射射线与世界中的物体交汇，把与物体交汇点的颜色渲染到投影面（光线追踪的基础） 。本系列的所有演示都是3D骨架，非3D实体。本文将穿插图片、公式、代码、演示，让读者深刻理解3D的基本概念极其思想。 【对象及概念介绍】 对象一：摄像机。 大家都有一个基本常识，在不同的角度观看到的物体是不同的。摄像机对象有自己的空间的坐标（vidiconX,vidiconY,vidiconZ）。 对象二：显示屏 任何三维物体，都会以二维的形式投... 阅读全文
javascript异步编程系列【目录】
2011-09-20 08:31 by 【当耐特砖家】, 1643 visits, 网摘, 收藏, 编辑
摘要：javascript异步编程系列【一】----用Jscex画圆 javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较 javascript异步编程系列... 阅读全文
人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容子弹追踪等塔防类游戏当中。
基础类
二维向量(2D vector)可谓2D游戏或是动画里最常用型别了。这里三维向量用Vector2类实现，用(x, y)表示。 Vector2亦用来表示空间中的点(point)，而不另建类。先看代码：
(function(window) {
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) {
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));
其中
小球拥有4个属性，分别是：radius半径、velocity速度（Vector2）、position位置(Vector2)、collectionPosition集合点/小球的家(Vector2)。
小球拥有2个方法，分别是：collection集合、disband解散。
小球的集合方法所传递的参数为集合的速度，因为小球都有一个集合点的属性，所以这里不用再传入集合点/家给小球。
这里详细分析一下collection方法，这也是整个demo的关键代码。
collection: function (v) {
this.velocity = this.collectionPosition.sub(this.position).setLength(v);
},
因为setLength设置向量的长度：
setLength: function (l) {
return this.normalize().multiplyScalar(l);
}
所以collection可以改成：
this.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);
if (imageData.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) < 2) {
balls[i].velocity.y = 0;
balls[i].velocity.x = 0;
}
}
if (time === 3000) {
collectionCMD = true;
for (var i in balls) {
balls[i].collection(230);
}
}
if (time === 7500) {
time = 0;
collectionCMD = false;
for (var i in balls) {
balls[i].disband();
}
}
for (var 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();
balls[i].position.y += 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) 代表了点与点之间的距离，这里判断小球是否到了集合点或家。这里其几何意义就不再向量了。