博客园_当耐特砖家--Iamzhanglei.com

HTML5 割绳子加载动画

2012-04-03T02:40:00Z

2012-04-03T02:40:00Z2012-04-03T02:40:00Z【当耐特砖家】http://www.cnblogs.com/iamzhanglei/

HTML5人工智能基础及OO实践

2012-03-29T00:42:00Z

简介

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

基础类

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

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));

使用该类需要特别注意和区分的地方是：
它什么时候代表点、什么时候代表向量。
当其代表向量的时候，它的几何意义是什么？
不能把其当成一个黑盒来调用，需要知其然并知其所以然。

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

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

其中

小球拥有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三个类之后，终于可以开始实现一点东西出来！

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 }

其中分三个步骤：收集所有像素、像素点和小球转换、生成随机速度。整个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) < 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);

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

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

在线演示

这你也敢叫人工智能？ok，未完待续......

本文链接

HTML5 Canvas【所见===所得】编程工具正式发布

2012-03-28T00:28:00Z

+ -

使用指南

基本使用：

var c=document.getElementById("myCanvas");
var cxt=c.getContext("2d");
cxt.fillStyle="#FF0000";
cxt.beginPath();
cxt.arc(70,18,15,0,Math.PI*2,true);
cxt.closePath();
cxt.fill();

拷贝至编辑器并修改代码试一试！！

动画支持：

var canvas = document.getElementById("myCanvas");
var ctx = canvas.getContext("2d");
var cyc = 100;
ctx.fillStyle = "#000";
var loadingPosition = new Vector2(200, 200);
var loadingRadius = 50;
var intervalAngle = 45;
var bigCircleRadius = 8;
var bigCirclePosition = new Vector2(200, 150);
function drawLoading() {
    for (var i = 0; i < 11; i++) {
        ctx.beginPath();
        ctx.arc(bigCirclePosition.x, bigCirclePosition.y, bigCircleRadius, 0, Math.PI * 2, true);
        ctx.closePath();
        ctx.fill();
        bigCircleRadius -= 1;
        bigCirclePosition.rotateSelf(loadingPosition, 30);
    }
}
CANVASLOOP=setInterval(function () {
    bigCircleRadius = 10;
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawLoading();
}, 50);

拷贝至编辑器并修改代码试一试！！

这里值得注意的是，我约定好了loop的名称叫做：CANVASLOOP。一定要使用CANVASLOOP,不然的话在IE下会出现loop叠加混乱的问题。

代码支持缩放功能(重新打开浏览器会记住上一次的font-size)！试一试右上角的+号和-号！！!要获得很好的体验，请在浏览器F11全屏模式调试编辑代码。

HAVE FUN!!

Happy Fun Coding!

本文链接

HTML5 Canvas开发者和读者的福音

2012-03-27T04:25:00Z

演示

今天看到可见即可得的编程，其中是在svg中实现的。理所当然，它可以搬到 canvas当中，而且支持canvas动画播放，而不是仅仅是静态的svg。效果如下所示:

修改颜色(fillsStyle)或者count或者angle等值试试！
var canvas = document.getElementById('myCanvas');var ctx = canvas.getContext("2d");function taiji(x, y, radius, angle, wise) {angle = angle || 0;wise = wise ? 1 : -1;ctx.save();ctx.translate(x, y);ctx.rotate(angle);ctx.fillStyle = '#000';ctx.beginPath();ctx.arc(0, 0, radius, 0, Math.PI, true);ctx.fill();ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(0, 0, radius, 0, Math.PI, false);ctx.fill();ctx.fillStyle = '#fff';ctx.beginPath();ctx.arc(wise * -0.5 * radius, 0, radius / 2, 0, Math.PI * 2, true);ctx.fill();ctx.beginPath();ctx.fillStyle = '#000';ctx.arc(wise * +0.5 * radius, 0, radius / 2, 0, Math.PI * 2, false);ctx.arc(wise * -0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);ctx.fill();ctx.beginPath();ctx.fillStyle = '#fff';ctx.arc(wise * +0.5 * radius, 0, radius / 10, 0, Math.PI * 2, true);ctx.fill();ctx.restore();}var angle = 0;var count = 360;loop = setInterval(function () {beginTag = true;ctx.clearRect(0, 0, canvas.width, canvas.height);taiji(200, 200, 200, Math.PI * (angle / count) * 2, true);taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);angle = (angle + 5) % count;}, 50);

技术实现

循环执行富文本中的code:

1         setInterval("executeCode()", 500)
2         function executeCode() {
3             try {
4                 if (!beginTag) {
5                     eval(document.getElementById('code').value);
6                 }
7             } catch (e) {
8
9             }
10         }

半秒执行一次，半秒以内的延迟是可以接受的。这里有一个beginTag是标志富文本中代码的循环是否已经开始执行，倘若已经开始执行则不再执行外部的loop。

事件监听：

富文本框监听用户的键盘事件，如果发生，则重新执行code:

        var loop;
        function restart() {
            beginTag = false;
            clearInterval(loop);
        }

其中该loop定义在富文本框的代码当中：

        loop = setInterval(function () {
            beginTag = true;
            ctx.clearRect(0, 0, c2.width, c2.height);
            taiji(200, 200, 200, Math.PI * (angle / count) * 2, true);
            taiji(350, 350, 50, Math.PI * ((count - angle) / count) * 2, false);
            angle = (angle + 5) % count;
        }, 50);

对于富文本框中，代码不高亮的问题，有没有什么好的想法？

本文链接

HTML5 【IE9割绳子】制作教程来袭····

2012-03-26T00:04:00Z

回顾

与“Angry Birds”一样，2010年发布的“割绳子”是一款火爆的手机游戏，首先推出的是iOS版，于去年6月份推出Android版。它的游戏内容是：一个叫Om Nom的绿怪兽饿了，你必须喂他糖果，而要得到糖果，你要先割断绳子以及操纵安全气袋和泡泡，过程中还要收集星星来获取额外积分。

为了进一步宣传IE9和华丽的Web应用程序，微软与该款游戏的开发商ZeptoLab联合推出了HTML 5版“割绳子”游戏。

尽管这款游戏是为IE 9开发的，但它可以在任何兼容HTML 5的浏览器上运行。

背后的开发故事

在IE9割绳子推出一段时间后，微软发布了“《割绳子》HTML 5版背后的开发故事”一文。在此文当中，除了推荐了一个PxLoader资源加载库和一堆开发工具和平台（Windows8、IE9、Visual Web Developer 2010 Express），没有透露一丁点对开发人员有价值的东西。而作为广大的技术狂热份子们，更关心的是GUI组件、游戏引擎、物理引擎、绳子、机关、气囊等物理模型的算法、引擎之间的集成等问题。

所以本人打算从零开始，一步一步带领大家制作一个完整的IE9割''绳子''以及制作其相关的物理引擎。如果有可能的话，在IE9割绳子基础上做一些有趣的扩展。

教程目录

其中包括：

（1）HTML5 【IE9割绳子】制作教程来袭····

（2）游戏框架搭建

（3）资源加载

（4）动感气泡loading制作

（5）开场动画

（6）菜单制作

（7）对象建立

（8）碰撞检测

（9）游戏音效

（10）鼠标控制

（11）绳子

（12）气球

（13）喷气囊

（14）机关

（15）物理引擎制作

（16）集成物理引擎

（17）关卡

（18）可玩性扩展

其中【碰撞检测】将会拆成几篇分别介绍，分别如下所示：

球与青蛙、气泡、星星碰撞检测

球与青蛙、气泡、星星碰撞反应

鼠标与绳子、气囊和气泡碰撞检测

鼠标与绳子、气囊和气泡碰撞反应

其中的【物理引擎制作】将会拆分为十四篇分别介绍，分别如下所示：

概述

面向对象编程

建立基本对象

集成单元测试框架

集成图形化输出接口

碰撞检测

AABB

OBB

碰撞反应

重叠处理

静止接触（待定）

物体休眠算法（待定）

关节、机关、绳子、气球、汽车

贴图

由于割绳子不同于《愤怒的小鸟》，其游戏整个过程不包含静止接触接触的状况，所以静止接触和物体休眠算法优先级最低。也就是说：不包含这两项功能的物理引擎也可以满足割绳子游戏的正常制作。

Hello cut the rope在线演示

素材

素材已经从IE9割绳子官网全部拷贝下来，我已经准备好了，你准备好了吗？

本文链接

HTML5动感菜单来了

2012-03-22T00:59:00Z

简介

上篇tween阐之未尽，今日继续。

上篇使用tween来制作对联下滑效果，提及tween可以用于各种开场动画、游戏画面切换等场景当中。其实tween的一个重要应用场景还包括----动感菜单制作。

一款好的游戏必须搭配一个体验很好的导航菜单,tween可以帮助我们实现。如下图所示，这是小鸟的菜单，本篇实现一个比小鸟还要酷炫的菜单。

菜单分类

菜单是游戏当中必须的元素，是游戏中出现在显示屏上的选项列表，如开始游戏、关于作者、退出游戏、游戏设置等等，这些都是游戏中必备的元素。每款游戏的菜单风格也有较大差异。菜单一般是由可点击的文字或者图片区域组成。作为一款canvas游戏，菜单可以有两种形式：（1）Dom对象的按钮 a.button标签 b.img标签 c.a标签（2）canvas中的按钮 a.图片按钮 b.文字按钮

那么我们什么时候使用canvas中的按钮，什么时候使用Dom对象的按钮呢？

在一款完整的游戏当中，哪些使用dom对象，哪些使用canvas中的元素对象，这要因游戏而议。有的性能洁癖的开发者，认为canvas只负责显示游戏内容，菜单、弹出层、泡泡提示什么的都使用dom对象。但其实把所有东西都塞进canvas对性能影响不大、微乎其微，只要你的游戏引擎（canvas引擎）做好了缓存层。有的开发者是想绕过dom事件过度给canvas的流程，以及避开图片跨域、精确像素等麻烦事，所以直接使用dom对象。就菜单、弹出、泡泡等元素的粒子个数相对于游戏中丰富的内容，其粒子个数实在是微乎其微、可以忽略不计。

所以一般不使用canvas中元素菜单的原因如下：

1.性能洁癖

2.没有统一的GUI组建（比如button、silder、menu、popup、tip、progressbar、loading），而dom对象中都有成熟的插件。

由此也可以看出，这是html5相对于flash来说的一个优势所在，因为html5多了一种选择。

HTML5动感菜单

Have Fun!明天继续

本文链接

HTML5对联来了

2012-03-19T23:51:00Z

今天看到园子里的运动学基础，里面介绍了一些基本的缓动效果，突发创意利用tween效果制作了HTML5对联。

对联

对联，又称楹联或对子，是写在纸、布上或刻在竹子、木头、柱子上的对偶语句言简意深，对仗工整，平仄协调，是一字一音的中文语言独特的艺术形式。对联相传起于五代后蜀主孟昶。它是中华民族的文化瑰宝。

使用计算机制作对联作用如下：

1.整合入游戏，使其参入中国风；

2.广告视频制作；

3.网站左右悬挂，比如春节过年、圣诞、情人节、程序员节（1024）等节日悬挂相应的问候对联。

缓动

缓动的最大用处就是应用在设计的运动表现上，他可以结合物理，数学等原理真实地模拟显示生活中的运动现象。缓动还用于各种开场动画、游戏画面切换等场景当中。

flash、XNA、silverlight、HTML5、C++等各语言平台都有成熟的缓动库。

缓动函数

利用缓动函数可将自定义数学公式应用于动画。例如，您可能希望某对象真实地弹跳或其行为如同在弹簧上一样。您可以使用关键帧动画甚至 To/wait/To/wait·····动画来实现伪积分操作，大致模拟这些效果，但可能需要执行大量的工作，并且与使用数学公式相比动画的精确性将降低。所以：

在没有大量的粒子并且粒子之间没有相互作用的情况之下，推荐使用缓动函数。

一般成熟缓动库都包含下列这些缓动函数（同时开发开发者自定义缓动算法），方便开发者来创建常见效果。

BackEase：在某一动画开始沿指示的路径进行动画处理前稍稍收回该动画的移动。
BounceEase：创建弹跳效果。
CircleEase：创建使用循环函数加速和/或减速的动画。
CubicEase：创建使用公式 f(t) = t3 加速和/或减速的动画。
ElasticEase：创建类似于弹簧在停止前来回振荡的动画。
ExponentialEase：创建使用指数公式加速和/或减速的动画。
PowerEase：创建使用公式 f(t) = tp（其中，p 等于 Power属性）加速和/或减速的动画。
QuadraticEase：创建使用公式 f(t) = t2 加速和/或减速的动画。
QuarticEase：创建使用公式 f(t) = t4 加速和/或减速的动画。
QuinticEase：创建使用公式 f(t) = t5 加速和/或减速的动画。
SineEase：创建使用正弦公式加速和/或减速的动画。

HTML5对联在线演示

本文链接

HTML5错误的绳子算法

2012-03-12T06:31:00Z

        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;
                this.g = g;
            },
            computeControlPoint: function () {
                var centerPoint = new Vector2((this.p1.x + this.p2.x) / 2, (this.p1.y + this.p2.y) / 2);
                var reduceLength = this.length - (this.p1.distanceTo(this.p2));
                var nv = new Vector2().sub(this.p1, this.p2).normalize();
                centerPoint.addSelf(nv.vertical().multiplyScalar(reduceLength / 2));
                this.controlPoint = new Vector2(Math.abs(centerPoint.x), centerPoint.y + this.g);
            }
        }
        var stage,l, i = 300;
        function init() {
            var canvas = document.getElementById("testCanvas");
            stage = new Stage(canvas);
            Ticker.addListener(window);
            Ticker.setFPS(30);
        }
        function tick() {
            l = new line(new Vector2(100, 130), new Vector2(70, i), 200, 50);
            if (l.p1.distanceTo(l.p2) < l.length) {
                i--;
                stage.removeAllChildren();
                l.computeControlPoint();
                var g = new Graphics();
                g.setStrokeStyle(6, "round", "round")
                g.beginStroke("#000");
                g.drawCircle(l.p2.x, i, 12);
                g.moveTo(l.p1.x, l.p1.y).bezierCurveTo(l.controlPoint.x, l.controlPoint.y, l.controlPoint.x, l.controlPoint.y, l.p2.x, l.p2.y);
                var s = new Shape(g);
                s.x = 100;
                s.y = 100;
                stage.addChild(s);
                stage.update();
            }
        }

本文链接

HTML5热门游戏制作---没有99美元的Impact也行

2012-03-06T00:38:00Z

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美元

其中的最受欢迎且耳熟能详的莫过于下面这款：

这是一个打字射击游戏，该游戏被国外很多网站评选为二十款优秀游戏之一。综合分析了一下该款游戏，总体感觉----注重细节。

游戏技术要素

1.资源加载和进度显示，这HTML5游戏中很重要的一个元素。当然也可以使用loading的方式，如：HTML5实验室【四十一】--怎么把CanvasLoading插件嵌入你的游戏。或者loading配合进度条，这给玩家的体验最好了。

不过还有一种最好的方式就是，预先加载一个无聊的小游戏，然后让玩家打发loading期间的时间。比如新浪微博中的很多微游戏，都提供了loading期间打地鼠的游戏。如下图所示：

下面是游戏加载的进度条，上面是打地鼠游戏。

菜单

如下图所示：

细节如图标注所示，另外文字menu的鼠标事件精确到矩形区域，而不是像素，这点很重要。就像我以前做的那款3D贪吃蛇，鼠标事件精确到文字，这样的用户体验非常不好，应该是立方体。

爆炸效果

如图所示，该款游戏的爆炸不是固定不变使用连续的图片。而是利用3张图片，随机运动+旋转组成的，改细节也是一个亮点。

发射动画

如上图所示，在飞船发射子弹的过程当中，不是不动的，而是有一个发射的动画。这在很多射击类游戏中都没有考虑。

关卡过度动画及网格动态背景

不使用Impact

这是我不使用Impact制作的类似的游戏（我也很注重细节）：

加载游戏：

菜单：

扫射与爆炸：

网格动态背景

当粒子很多的时候，谷歌浏览器也可以达到40帧以上，IE9和IE10表现良好，一直都在60帧以上。

在线演示(AD+J)

Have Fun!

本文链接

你必须知道的【闭包】陷阱和案例

2012-02-26T23:39:00Z

闭包

In some languages, a closure may occur when a function is defined within another function, and the inner function refers to local variables of the outer function.

At run-time, when the outer function executes, a closure is formed, consisting of the inner function’s code and references (the upvalues) to any variables of the outer function required by the closure.

翻译：

在一些编程语言当中，闭包发生：在一个函数内部定义了另外一个函数，并且内部的函数引用了外部函数的本地变量。

在运行的时候，当外部函数执行，这个时候形成了一个闭包，由内部函数的代码和对外部函数任意变量引用组成，这写引用都依赖于此闭包。

// ECMAScript 
var f, g; 
function foo() { 
    var x = 0; 
    f = function () { return ++x; }; 
    g = function () { return --x; }; 
    x = 1; 
    alert('inside foo, call to f(): ' + f()); // "2" 
} 
//外部函数执行，这个时候形成了闭包
foo(); 
//因为有了闭包，所以才访问到了 foo中的x 
alert('call to g(): ' + g()); // "1" 
//因为有了闭包，所以才访问到了 foo中的x 
alert('call to f(): ' + f()); // "2"

javascript闭包陷阱与案例

在很多时候，由于内部函数的变量覆盖了闭包的变量，我们如果需要引用外部函数同名的变量，需要通过执行匿名函数，不外部函数的变量作为参数传递进来。如下所示：

（function(out_xxx){
//这里面就可以使用out_xxx
 }(xxx)）

可以看得出来，使用这种方式最多的地方是在我们定义对象的时候：

(function (window) {
    var MyObject = function () {
        this.initialize();
    }
    var p = MyObject.prototype;
    p.initialize = function () { 
    
    }
    window.MyObject = MyObject;
} (window));

这样定义对象有两个好处：

1.避免污染外部变量

2.传递参数的形式减少作用域查找

javascript为我们埋了很多坑，在许多场景下，我们需要利用以上的形式去解决问题，下面依依列出。

场景1 :

如下所示，我需要在cc方法中调用到外面的name：

    var bb, cc;
    function aa() {
        var name = "当耐特";
        bb = function () {
            var name = "砖家";
            cc = function () {
                var name = "张磊";
                alert(name);
            }
        }
    }
        aa();
        bb();
        cc();//输出 “张磊”

因为内部的函数定义的变量覆盖了外部函数的变量，所以结果输出“张磊”。

解决办法：

    var bb, cc;
    function aa() {
        var name = "当耐特";
        (function (aa_name) {
            bb = function () {
                var name = "砖家";
                (function (bb_name, aa_name) {
                    cc = function () {
                        var name = "张磊";
                        alert(aa_name);
                        alert(bb_name);
                        alert(name);
                    }
                })(name, aa_name);
            }
        })(name);
    }
        aa();
        bb();
        cc();//输出“当耐特” “砖家”  “张磊”

真实案例：

记得上周，我的一个同事（实习生），对下面一段代码产生疑惑，所以咨询我。如下所示：

    $("#dialog-form").dialog({
        autoOpen: false,
        height: 300,
        width: 350,
        modal: true,
        buttons: {
            "Create an account": function () {
                var bValid = true;
                allFields.removeClass("ui-state-error");
                bValid = bValid && checkLength(name, "username", 3, 16);
                bValid = bValid && checkLength(email, "email", 6, 80);
                bValid = bValid && checkLength(password, "password", 5, 16);
                if (bValid) {
                    $.ajax({
                        type: "POST",
                        url: "xxxxx.aspx",
                        data: "name=xxxxx&email=xxxxx&password=xxxx"
                    }).done(function (msg) {
                        alert("Data Saved: " + msg);
                        $(this).dialog("close");
                    });
                }
            },
            Cancel: function () {
                $(this).dialog("close");
            }
        },
        close: function () {
            allFields.val("").removeClass("ui-state-error");
        }
    });

这里用的是JqueryUI的dialog插件。详见： http://jqueryui.com/demos/dialog/#modal-form

他想要的效果是点击create发起一个异步提交，然后在回调的时候关闭弹出层。令他困惑的地方是，弹出层关闭不了。

他抱怨着说：

Cancel: function () {
                $(this).dialog("close");
            }

我的cancel都能关闭。为什么

                if (bValid) {
                    $.ajax({
                        type: "POST",
                        url: "xxxxx.aspx",
                        data: "name=xxxxx&email=xxxxx&password=xxxx"
                    }).done(function (msg) {
                        alert("Data Saved: " + msg);
                        $(this).dialog("close");
                    });
                }

这里面的$(this).dialog("close")为什么就不能关闭？
这是一个很典型的场景，解决办法：

                if (bValid) {
                    (function (outThis) {
                        $.ajax({
                            type: "POST",
                            url: "xxxxx.aspx",
                            data: "name=xxxxx&email=xxxxx&password=xxxx"
                        }).done(function (msg) {
                            alert("Data Saved: " + msg);
                            $(outThis).dialog("close");
                        });
                    } 
                }(this))
            },

除了上面的解决方案，我们完全可以使用

var _name=name;

var __name=name;

var _this =this;

然后内部函数使用新定义的变量就可以。然而，下面的几种场景却必须使用匿名函数。

场景2---循环中的内部函数

    function TestObj(name) {
        this.name = name;
    }
    var objs = [];
    var obj;
    function test() {
        for (var i = 0; i < 100; i++) {
            var name = "张磊" + i;
            obj = new TestObj(name);
            obj.printName = function () {
                    console.log(obj.name);
                }
            objs.push(obj);
        }
    }
    //外部函数执行，闭包形成。内部函数obj.printName中的obj全部指向最后一次new TestObj(name);
    test();
    //所以这里会输出100次-----"张磊99"
    for (var i in objs) {
        objs[i].printName();
    }

解决办法

    function TestObj(name) {
        this.name = name;
    }
    var objs = [];
    var obj;
    function test() {
        for (var i = 0; i < 100; i++) {
            var name = "张磊" + i;
            obj = new TestObj(name);
              (function (target) {
            obj.printName = function () {
                console.log(target.name);
            }
               } (obj))
            objs.push(obj);
        }
    }
    test();
    for (var i in objs) {
        objs[i].printName();
    }

真实案例：

// create and populate the screen with random daisies: 
for(var i = 0; i < 100; i++){ 
    bitmap = new Bitmap(image); 
    container.addChild(bitmap); 
    bitmap.x = canvas.width * Math.random()|0; 
    bitmap.y = canvas.height * Math.random()|0; 
    bitmap.rotation = 360 * Math.random()|0; 
    bitmap.regX = bitmap.image.width/2|0; 
    bitmap.regY = bitmap.image.height/2|0; 
    bitmap.scaleX = bitmap.scaleY = bitmap.scale = Math.random()*0.4+0.6; 
    bitmap.name = "bmp_"+i;
    // wrapper function to provide scope for the event handlers: 
    (function(target) { 
        bitmap.onPress = function(evt) { 
            // bump the target in front of it's siblings: 
            container.addChild(target); 
            var offset = {x:target.x-evt.stageX, y:target.y-evt.stageY};
            // add a handler to the event object's onMouseMove callback 
            // this will be active until the user releases the mouse button: 
            evt.onMouseMove = function(ev) { 
                target.x = ev.stageX+offset.x; 
                target.y = ev.stageY+offset.y; 
                // indicate that the stage should be updated on the next tick: 
                update = true; 
            } 
        } 
        bitmap.onMouseOver = function() { 
            target.scaleX = target.scaleY = target.scale*1.2; 
            update = true; 
        } 
        bitmap.onMouseOut = function() { 
            target.scaleX = target.scaleY = target.scale; 
            update = true; 
        } 
    })(bitmap); 
}

这是Easeljs官网demo的一段代码，因为内部函数不会立即执行，所以当执行的时候,内部函数引用外部函数变量的时候，该变量已经被外层的for循环覆盖了N次，所以要通过上面的方式来解决这个问题。

小结

这是javascript蹩脚的一个方面，除了这个，还有javascript的 getter和setter也是该语言语法特性中令人憋屈的地方。另外，在javascript 的一些OOP方式中，我们经常用下划线（_xxxx）的方式代表其为私有变量，但是外部却可以访问，用约定来弥补其语法上的不足。

我相信经过人类的不懈努力，总有那么一天：static 、namespace、interface、private、protected 、class、enum·············都能成为javascript的关键字，而不是五花八门的技巧，对应这些关键字的所有文章笔记心得日记技巧随笔后门都将沉尸谷底、永无翻身之日。相信那个时候，HTML5已经成熟。正如小胖所说:什么时候做html5游戏的朋友能够不再纠结于什么js技巧 canvas性能优化的，那就说明html5游戏这个领域成熟了。

本文链接