HTML5人工智能基础及OO实践

HTML5人工智能基础及OO实践

简介

人工智能(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) 代表了点与点之间的距离，这里判断小球是否到了集合点或家。这里其几何意义就不再向量了。

在线演示

作者： 张磊  
出处： http://www.cnblogs.com/iamzhanglei
出处： IamZhangLei.com
本文版权归【当耐特砖家】和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

 

随笔分类 -HTML5

HTML5人工智能基础及OO实践 2012-03-29 08:42 by 【当耐特砖家】, 370 visits,  网摘 ,  收藏 ,  编辑

摘要： 简介 人工智能(Artificial Intelligence) ，英文缩写为AI。它是研究、开发用于模拟、延伸和扩展智能的理论、方法、技术及应用系统的一门新的技术科学。本篇从严格意义上说属于人工智能的范畴，但也是基础中的基础。本篇的目的是要赋予小球解散和集合两项基本指令（智商），本篇内容子弹追踪等塔防类游戏当中。 基础类 二维向量(2D vector)可谓2D游戏或是动画里最常用型别了...  阅读全文

5 Comment Categories:  Javascript ,  HTML5

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...  阅读全文

34 Comment Categories:  Javascript ,  项目实战 ,  HTML5

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  阅读全文

8 Comment Categories:  HTML5

HTML5 【IE9割绳子】制作教程来袭···· 2012-03-26 08:04 by 【当耐特砖家】, 2426 visits,  网摘 ,  收藏 ,  编辑

摘要： 回顾 与“Angry Birds”一样，2010年发布的“割绳子”是一款火爆的手机游戏，首先推出的是iOS版，于去年6月份推出Android版。它的游戏内容是：一个叫Om Nom的绿怪兽饿了，你必须喂他糖果，而要得到糖果，你要先割断绳子以及操纵安全气袋和泡泡，过程中还要收集星星来获取额外积分。 为了进一步宣传IE9和华丽的Web应用程序，微软与该款游戏的开发商ZeptoLab联合推出了HTML...  阅读全文

25 Comment Categories:  Javascript ,  项目实战 ,  HTML5

HTML5动感菜单来了 2012-03-22 08:59 by 【当耐特砖家】, 4256 visits,  网摘 ,  收藏 ,  编辑

摘要： 简介 上篇tween阐之未尽，今日继续。 上篇使用tween来制作对联下滑效果，提及tween可以用于各种开场动画、游戏画面切换等场景当中。其实tween的一个重要应用场景还包括----动感菜单制作。 一款好的游戏必须搭配一个体验很好的导航菜单,tween可以帮助我们实现。如下图所示，这是小鸟的菜单，本篇实现一个比小鸟还要酷炫的菜单。 菜单分类 菜单是游戏当中必须的元素，是游戏中出现...  阅读全文

32 Comment Categories:  Javascript ,  HTML5

HTML5对联来了 2012-03-20 07:51 by 【当耐特砖家】, 3771 visits,  网摘 ,  收藏 ,  编辑

摘要： 今天看到园子里的运动学基础，里面介绍了一些基本的缓动效果，突发创意利用tween效果制作了HTML5对联。 对联 对联，又称楹联或对子，是写在纸、布上或刻在竹子、木头、柱子上的对偶语句言简意深，对仗工整，平仄协调，是一字一音的中文语言独特的艺术形式。对联相传起于五代后蜀主孟昶。它是中华民族的文化瑰宝。 使用计算机制作对联作用如下： 1.整合入游戏，使其参入中国风； 2.广告视频制作； 3.网站左右悬挂，比如春节过年、圣诞、情人节、程序员节（1024）等节日悬挂相应的问候对联。 缓动 缓动的最大用处就是应用在设计的运动表现上，他可以结合物理...  阅读全文

11 Comment Categories:  Javascript ,  HTML5

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; ...  阅读全文

1 Comment Categories:  Javascript ,  HTML5

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美元 其中的最受欢迎且耳熟能详的莫过于下面这款： 这是一个打字射击游戏，该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏，总体感觉...  阅读全文

75 Comment Categories:  Javascript ,  项目实战 ,  HTML5

HTML5实验室【四十二】—javascript挑战流体实验 2011-12-12 07:33 by 【当耐特砖家】, 8674 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 把现实世界当中的物体模拟到计算机当中，一些简单的物理实验、碰撞旋转等等难度还是不算很大，难度较大的应当算流体模拟。 本文将在Canvas当中模拟出一个2D平面内的水珠，涉及的知识点和技巧包括：Jscex基础知识，贝塞尔曲线的绘制，合理利用CanvasRenderingContext2D的translate和rotate等API。 二.绘制椭圆 在模拟水滴之前，我们先思考一下怎么在canvas当中绘制一个椭圆。 大家可以很容易想到 下面几种方案： 1.根据椭圆笛卡尔坐标系方程绘制 2.根据椭圆极坐标方程绘制 3.根据椭圆曲率变化绘制 4.利...  阅读全文

16 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5游戏制作完全指南 2011-12-08 18:28 by 【当耐特砖家】, 4080 visits,  网摘 ,  收藏 ,  编辑

摘要： 简介 创建画布 游戏循环 Hello world 创建player 键盘控制 a:使用jQuery Hotkeys b:移动player 添加更多游戏元素 炮弹 敌人 使用图片 碰撞检测 声音 简介 你想使用HTML5的Canvas制作一款游戏吗？跟着这个教程，你将立刻上道儿。 阅读该教程需要至少熟悉javascript相关知识。 你可以先玩这款游戏或者直接阅读文章并且下载游戏源码。 创建画布 在画任何东西之前，我们必须创建一个画布。因...  阅读全文

6 Comment Categories:  Javascript ,  Jscex ,  HTML5

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; ...  阅读全文

5 Comment Categories:  Javascript ,  Jscex ,  HTML5

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...  阅读全文

53 Comment Categories:  Javascript ,  Jscex ,  HTML5

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 =...  阅读全文

1 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5 CanvasAPI速查以及CanvasAPI.chm下载 2011-12-04 18:44 by 【当耐特砖家】, 1256 visits,  网摘 ,  收藏 ,  编辑

 

4 Comment Categories:  HTML5

HTML5实验室【三十九】—Jscex版Loading插件预览版本抢先看 2011-12-04 17:30 by 【当耐特砖家】, 1920 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 在大量游戏制作过程当中，必不可少的一个重要元素就是Loading.在大量的flash游戏当中我们经常可以看到，比如《XXX》的Loading 一个好的Loading,可以给用户不错...  阅读全文

2 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室【三十八】--玩转像素系列【二】 2011-12-03 14:11 by 【当耐特砖家】, 1886 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 Canvas API最有用的特性之一是允许开发人员直接访问canvas底层像素数据。这种数据访问是双向的：一方面，可以以数值数组形式获取像素数据；另一方面，可以修改数组的值以将其应用于canvas。这要归功于context API内置的三个函数。 其中最重要的一个是context.getImageData(sx, sy, sw, sh)。这个函数返回当前canvas状态并以数值数组的...  阅读全文

1 Comment Categories:  Javascript ,  Jscex ,  HTML5

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  阅读全文

0 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室【三十六】--借来的创意 2011-12-01 08:54 by 【当耐特砖家】, 2568 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 计数是一种最简单基本的运算，计数器就是实现这种运算的逻辑电路，计数器在数字系统中主要是对脉冲的个数进行计数，以实现测量、计数和控制的功能，同时兼有分频功能，计数器是由基本的计数单元和一些控制门所组成，计数单元则由一系列具有存储信息功能的各类触发器构成，这些触发器有RS触发器、T触发器、D触发器及JK触发器等。计数器在数字系统中应用广泛，如在电子计算机的控制器中对指令地址进行计数，以便顺序取出下一条指令，在运算器中作乘法、除法运算时记下加法、减法次数，又如在数字仪器中对脉冲的计数等等。计数器可以用来显示产品的工作状态，一般来说主要是用来表示产品已经完成了多少份的折页配页工作。它主...  阅读全文

8 Comment Categories:  Javascript ,  Jscex ,  HTML5

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)  阅读全文

23 Comment Categories:  Javascript ,  Jscex ,  HTML5

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。 当然...  阅读全文

2 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室【二十九】—我的HTML5游戏大赛参赛作品（下载试玩） 2011-11-22 07:29 by 【当耐特砖家】, 3501 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 3D贪吃蛇是贪吃蛇游戏的3D版本。通过摄取食物，累积数量来通关，随着摄取食物的增加，蛇身体会慢慢变长变肥大。游戏开放了许多快捷键，方便玩家操作。游戏一共七个关卡，一关比一关难。最后一关的随机障碍物更加是玩家的噩梦。为了获取更好的游戏体验，推荐使用谷歌浏览器或者枫树浏览器。 二.游戏框架和开发团队 这个游戏是使用Jscex作为动画引擎，使用Three.js框架作为3D引擎开发的HTML5游戏. 使用到的HTML5特性主要包括Canvas, CSS3 （按钮），没有使用WebGL。后期打算加入localStorage存储关卡信息。 在游戏中, 控制小蛇躲避前方的障碍...  阅读全文

14 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室【二十八】—Canvas+Video打造酷炫播放体验 2011-11-21 08:32 by 【当耐特砖家】, 3810 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 直到现在，仍然不存在一项旨在网页上显示视频的标准。 今天，大多数视频是通过插件（比如 Flash）来显示的。然而，并非所有浏览器都拥有同样的插件。 HTML5 规定了一种通过 video 元素来包含视频的标准方法。如：   二.Canvas+VideoHTML5中引入新的元素canvas，其drawImage 方法允许在 canvas 中插入其他图像( img 和 canvas ...  阅读全文

18 Comment Categories:  Javascript ,  HTML5

HTML5实验室【二十七】—WebSocket 2011-11-20 08:01 by 【当耐特砖家】, 2799 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 WebSocket 是HTML5一种新的协议。它是实现了浏览器与服务器的双向通讯。 在 WebSocket API 中，浏览器和服务器只需要要做一个握手的动作，然后，浏览器和服务器之间就形成了一条快速通道。两者之间就直接可以数据互相传送。 现在，很多网站为了实现即时通讯，所用的技术都是轮询。轮询是在特定的的时间间隔（如每1秒），由浏览器对服务器发出HTTP request，然后由服务器...  阅读全文

9 Comment Categories:  Javascript ,  HTML5

HTML5实验室【二十六】--本地存储及应用 2011-11-18 21:10 by 【当耐特砖家】, 1961 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 HTML5 提供了两种在客户端存储数据的新方法： localStorage - 没有时间限制的数据存储 sessionStorage - 针对一个 session 的数据存储 之前，这些都是由 cookie 完成的。但是 cookie 不适合大量数据的存储，因为它们由每个对服务器的请求来传递，这使得 cookie 速度很慢而且效率也不高。 在 HTML5 中，数据不是由每个服务器请求传...  阅读全文

2 Comment Categories:  Javascript ,  HTML5

HTML5实验室【二十四】--令人震撼的表白,你hold住吗？ 2011-11-15 09:02 by 【当耐特砖家】, 7286 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 为什么程序员单身的多呢？因为面向对象的编程中，经常会遇到一个错误：找不到对象。 本文也属于单身程序员的福音范畴，让单身程序员勇敢示爱·····，但是老天保佑你的示爱对象不要用IE678~~ 本文动画效果全部基于Jscex，然后结合一些函数、粒子系统、重力场实现。下一篇带来作品讲解，本篇先饱饱眼福。   二.作品一：心碎 Your browser does not support ...  阅读全文

41 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室系列【十七】—爱?曲线,单身程序猿福音 2011-11-07 08:41 by 【当耐特砖家】, 5593 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.笛卡尔? 笛卡尔（René Descartes）是17 世纪著名的法国哲学家、数学家，有着“现代哲学之父”的称号。笛卡尔对数学的贡献也是功不可没，他创造了解析几何，开创了数学、物理学、天文学、地质学等诸多学科的新时代。 传闻，笛卡尔曾流落到瑞典，邂逅美丽的瑞典公主克里斯蒂娜（Christina）。笛卡尔发现克里斯蒂娜公主聪明伶俐，便做起了 公主的数学老师， 于是两人完全沉浸在了数学的世界中...  阅读全文

55 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室【目录】(持续更新···) 2011-11-06 10:05 by 【当耐特砖家】, 14648 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.本博客资源 HTML5实验室【一】--用Jscex画圆 HTML5实验室【二】--Jscex版火拼俄罗斯【荐】 HTML5实验室【四】--Jscex+Easeljs制作坦克大战【二】：Jscex并行编程模型 HTML5实验室【六】--摄像机、投影、3D旋转以及缩放【荐】 HTML5实验室【七】--CnBlogs博文demo演示技巧比较：jsfiddle完胜【荐】 HTML5实验室【...  阅读全文

14 Comment Categories:  Javascript ,  HTML5

HTML5实验室【十五】----艺术！不是吗？ 2011-11-02 08:48 by 【当耐特砖家】, 7316 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 每周优秀代码赏析系列致力于挖掘一些优雅的语法糖，也挖掘一些优秀的算法，艺术作品更加不能放过。 当我看到这件作品的时候，我表示非常喜欢。这个作品的产生不仅仅需要编程和算法，作者肯定是个充满了艺术细胞的人。 倘若有什么canvas艺术作品比赛的话，我想它就是获奖的那个。 二.代码公布 下面就揭开本周优秀代码的神秘面纱： HTML如下：代码不多，没有引用任何js库。对于我这样的代码语意...  阅读全文

38 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5版3D实验室系列【七】----锥 2011-11-01 13:57 by 【当耐特砖家】, 2667 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 圆锥，数学领域术语，有两种定义。 解析几何定义：圆锥面和一个截它的平面（满足交线为圆）组成的空间几何图形叫圆锥。 立体几何定义：以直角三角形的一条直角边所在直线为旋转轴，其余两边旋转形成的面所围成的旋转体叫做圆锥。该直角边叫圆锥的轴 。   二.圆锥模拟 通过以上两个定义，我可以模拟出圆锥上所有的点： i 既是h,又是半径r。这个时候，我们生成的 Z都是大于零的，不过没有关系...  阅读全文

6 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5版3D实验室系列【六】----WAVE 2011-10-31 10:53 by 【当耐特砖家】, 2689 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介 波，在空间以特定形式传播的物理量或物理量的扰动。由于是以特定的形式传播，这个物理量（或其扰动，下同）成为空间位置和时间的函数,而且是这样的函数,即在时间t出现在空间r处周围的分布,会在时间(t+t┡)出现在空间(r+vt┡)的周围。 v一般说是个常矢量,就是有关物理量（或其扰动）的传播速度。物理量函数称为波函数，数学上它是一个叫波动方程的在特定边界条件下的解。 物理定义：某一物理量的...  阅读全文

9 Comment Categories:  Javascript ,  Jscex ,  HTML5

祝你生日快乐！ 2011-10-23 23:26 by 【当耐特砖家】, 1881 visits,  网摘 ,  收藏 ,  编辑

摘要：    阅读全文

5 Comment Categories:  HTML5

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...  阅读全文

20 Comment Categories:  Javascript ,  Jscex ,  HTML5

世界上最短的时钟代码！更短的，有木有？ 2011-10-16 09:15 by 【当耐特砖家】, 9744 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介Processing.js作者是John Resig，这是继Jquery之后，他的第二个力作。Processing.js提供了教学可视化的编程语言及运行环境。通过编写processing程序，教师可以将复杂的物理、化学、数学原理形象的展示给学生。比如绘制各种曲线图，波线，粒子，绘制分子结构，当然在生理卫生课上还可以绘制一群小蝌蚪在游泳等动态的图形。Processing.js是一个开放的编程...  阅读全文

45 Comment Categories:  Javascript ,  HTML5

javascript异步编程系列【十一】----HTML5 canvas编程入门游戏发布 2011-10-08 07:41 by 【当耐特砖家】, 3538 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介1976年，Gremlin平台推出了一款经典街机游戏Blockade。游戏中，两名玩家分别控制一个角色在屏幕上移动，所经之处砌起围栏。角色只能向左、右方向90度转弯，游戏目标保证让对方先撞上屏幕或围栏。 听起来有点复杂？其实就是下面这个样子： 基本上就是两条每走一步都会长大的贪吃蛇比谁后完蛋，玩家要做的就是避免撞上障碍物和越来越长的身体。更多照片、视频可以看 GamesDBase 的介绍。 Blockade 很受欢迎，类似的游戏先后出现在 Atari 2600、TRS-80、苹果 2 等早期游戏机、计算机上。但真正让这种游戏形式红遍全球的还是21年后随诺基亚手机走向世界的贪吃蛇游戏——  阅读全文

6 Comment Categories:  Javascript ,  Jscex ,  HTML5

CnBlogs博文demo演示技巧比较：jsfiddle完胜 2011-10-07 20:46 by 【当耐特砖家】, 5344 visits,  网摘 ,  收藏 ,  编辑

摘要： 一.简介如果你是一名前端博主，你希望通过代码+演示来透彻的讲解一些技巧，并且无缝嵌入你的博客，那么jsfiddle是一个很好的选择。本文将比较博客园前端dev们各种演示方式，大家可以挑选自己喜欢的方式。二.jsFiddle简介jsFiddle的官方网站：http://jsfiddle.net/它包括了顶端的控制按钮，如下图：分别代表：运行、保存、重置、代码格式化，代码语法错误检查下面的4个windows你可以分别调试HTML，CSS，Javascript，右下角显示代码的运行结果。在左边的操作区，你可以选择相关的js类库，支持的还是相当全的。当然，也支持自定义的类库，这个很不错。这个工具可以有  阅读全文

32 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室系列【目录】 2011-09-30 19:23 by 【当耐特砖家】, 2284 visits,  网摘 ,  收藏 ,  编辑

 

0 Comment Categories:  Javascript ,  Jscex ,  HTML5

HTML5实验室系列【四】----摄像机、投影、3D旋转、缩放 2011-09-23 08:18 by 【当耐特砖家】, 10710 visits,  网摘 ,  收藏 ,  编辑

摘要： 【简述】 3D效果分两种，一种是伪3D骨架，一种是3D实体.3D骨架：是通过大量的计算将3D世界中所有点投影到二维平面中。3D实体:通过摄像机向投影面发射射线与世界中的物体交汇，把与物体交汇点的颜色渲染到投影面（光线追踪的基础） 。本系列的所有演示都是3D骨架，非3D实体。本文将穿插图片、公式、代码、演示，让读者深刻理解3D的基本概念极其思想。 【对象及概念介绍】 对象一：摄像机。 大家都有一个基本常识，在不同的角度观看到的物体是不同的。摄像机对象有自己的空间的坐标（vidiconX,vidiconY,vidiconZ）。 对象二：显示屏 任何三维物体，都会以二维的形式投...  阅读全文

59 Comment Categories:  Javascript ,  Jscex ,  HTML5

javascript异步编程系列【目录】 2011-09-20 08:31 by 【当耐特砖家】, 1643 visits,  网摘 ,  收藏 ,  编辑

摘要： javascript异步编程系列【一】----用Jscex画圆 javascript异步编程系列【二】----Jscex模拟重力场与google苹果logo的比较 javascript异步编程系列...  阅读全文

0 Comment Categories:  Javascript ,  Jscex ,  HTML5

作者： Leo_wl

　　　　

出处： http://www.cnblogs.com/Leo_wl/

　　　　

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利。

版权信息

查看更多关于HTML5人工智能基础及OO实践的详细内容...

声明：本文来自网络，不代表【好得很程序员自学网】立场，转载请注明出处：http://haodehen.cn/did49585