博客园_Floyd

Html5小游戏之小小塔防

2011-06-18T08:46:00Z

很久没有更新博客了，最近比较忙，而且也没什么idea！

最近看了一个坦克大战的html5源码，发觉颇有收获。所以抽空写了一个相对于以前的小游戏复杂些的塔防游戏！也算是一种对于自身的突破！

虽然是demo版，也不能太丑，所以我还是找了一些素材图片，找素材图片还真麻烦！

本次用到了5个canvas画布标签！

map：用于绘制背景地图，基本上画上一次就不会重画。

main：用于绘制敌人与子弹，因为这两个基本上会一直变，需要一直重画。

tower：用于绘制塔，塔基本上画上去后，不会动，最多也是会给擦出。

select：用于绘制塔的选择区域，攻击范围等，会根据用户的操作而进行重画画布。

info：用于绘制游戏的基本数据信息，会跟据金钱分数关卡等数据而变化。

该游戏支持ff,chrome,ie9,safari。ie6,7,8就不支持了，你懂，其余的没测试过，理论上支持html5的浏览器都能用。

说明：每种塔都可以升级到3级，升级的价格与本身建造相同，卖掉的话就是总额的一半。

第一种塔：升级到3级，有小偷功能，每攻击一次会偷取1块钱。

第二种塔：减速攻击，3级时可以同时减速两个。

第三种塔：多重攻击。攻击多个目标。

第四种塔：穿刺攻击，攻击一条线上，攻击力最高。

第五种塔：秒杀攻击，有一定几率把敌人秒杀。

选择地图,然后按开始游戏！

bug肯定也会有。。源码有注释，希望大家能看得懂，也希望能给那些跟我一样刚学习html5的人一点点帮助！有不懂，有bug，都可以直接私信，我很乐意回答！

这是源码-》完整源码

本文链接

【随笔】一个简单的JavaScript异步处理事件队列

2011-03-24T06:46:00Z

当我们需要连续执行几个函数，而这几个函数会一直对页面元素进行操作时，很可能页面会出现短暂的卡，然后，一下子爆炸性的出现所有信息。

一般我们会用setTimeout(fn,0);这种来执行，其实js的setTimeout，特别是IE6的，响应时间最快也要17毫秒左右，所以，设置成0，意义不大。

而且，这种做法，存在不连续，不连贯性。所以，自己写了个简单的。

1 /**
2  * @author floyd
3  * @name 异步处理事件队列
4  * @example var qe = new QueneEnginer();qe.add(fn,context,arrParam);qe.start();
5  */
6
7 var QueneEnginer = function(){
8
9     this.Quene = [];
10 }
11 QueneEnginer.prototype = {
12     processTime : 20,
13     /**
14      * 添加事件到队列中
15      * @param {function} fn 函数对象
16      * @param {object} context 上下文对象可为空
17      * @param {array} arrParam 参数数组可为空
18      */
19     add : function(fn,context,arrParam){
20
21         this.Quene.push(
22             {
23                 fn : fn,
24                 context : context,
25                 param : arrParam
26             }
27         );
28     },
29     start : function(){
30         var that = this;
31         setTimeout(function(){that.process();},that.processTime);
32     },
33     process : function(){
34
35         var quene = this.Quene.shift();
36
37         if(!quene)return ;
38
39         quene.fn.apply(quene.context,quene.param);
40
41         quene = null;
42
43         this.start();
44     }
45 }

本文链接

JavaScript游戏之跳云

2011-02-21T06:49:00Z

最近在android手机上，发现一款小游戏，叫跳云，玩法很简单，点击一下屏幕，小人就会往下跳，要站在云上，不然就结束了，在跳的过程中，会收到风的影响，使下落偏移。所以我就想用js来迅速山寨一个来试试。

发觉以前的js游戏，都是用了很多个setTimeout的计时器，效率不咋D，所以采用html5的写法来写js游戏，用一个setInterval来实现。思路跟以前很不同。

玩法很简单，单击游戏屏幕就可以了，注意风向。

风向：无

层数：0

UI就做得比较粗糙啦。。。BUG也会有的。。。希望大家会喜欢。。。注释源码上都有

完整源码>>

顺带说一句，在偶然的机会，发现，竟然有人用我的js小游戏去参加IE9开发大赛，而且，神奇的通过了，有人会欣赏，我是很高兴的，不过，那些都跟IE9不沾边的，为啥能通过的？

本文链接

Html5小游戏之【是男人就忍30秒】

2011-01-17T10:25:00Z

好久没写过小游戏了，最近抽时间写了一个，看了一些高人写的游戏，无限感慨呀。。。也从中学到了不少东西。

我不会写什么大的游戏，因为需要很多时间与精力，而且自认水平有限，个人喜欢写些小游戏。

这次的游戏是【是男人就忍30秒】，游戏玩法很简单，就是用键盘控制飞机，飞来飞去，躲开子弹，看你能撑多久。

本来是打算写一个教程来一步步说明的，但后来想了想，还是算了，免得误人子弟，在源码上加些注释就可以。

没有测试过IE9，因为没有IE9。。。鄙人还是用XP的。。。所以还是请用谷歌或者FF或者Safari吧。

刚刚修复了在FF下不能使用的问题，因为没给canvas设置tabindex属性，它就不能触发keydown事件，以及设置canvas为focus，现在可以了。。。

游戏预览如下：

此游戏用了四个js文件。

1。canvas.js，简单了封装了一些需要用到的画图方法，相信一看就懂了。。。

1 //画布类
2 var Canvas = {
3     //画布的2d对象
4     cxt : null,
5     //初始化画布
6     init : function(id){
7         this.cxt = (typeof id=='string'?document.getElementById(id):id).getContext('2d');
8     },
9     //清除画布
10     clear : function(x,y){
11         this.cxt.clearRect(0,0,x,y);
12     },
13     //画图
14     drawImg : function(obj){
15         this.cxt.drawImage(obj.img,obj.x,obj.y);
16     },
17     //画文字
18     drawText : function(string,x,y,color){
19
20         this.cxt.fillStyle = color;
21         this.cxt.font = 'bold 14px sans-serif';
22         this.cxt.fillText(string,x,y);
23     },
24     //加载图片
25     //imgs:图片对象的数组
26     //callback:回调函数
27     //context:上下文对象
28     loadImgs : function(imgs,callback,context){
29
30         var success_count = 0;
31
32         var addCount = function(){
33             success_count += 1;
34
35             if(success_count == l)callback && callback.call(context);
36         }
37
38         for(var i=0,l=imgs.length;i<l;i++){
39             imgs[i].onload = addCount;
40         }
41
42     }
43 }

2。fly.js，飞机类，采用在计时器中移动，而非一般的键盘按一下就移动一格，这样做，控制得更流畅，而且，可以支持打斜飞。

1 var Fly = function(img,x,y){
2     //飞机的图片
3     this.img = img;
4     //飞机的坐标
5     this.x = x;
6     this.y = y;
7     //飞机的移动方向值
8     this.moveDir = {
9         left:false,
10         right:false,
11         up:false,
12         down:false
13     };
14     //移动的速度
15     this.movesp = 2;
16 }
17 Fly.prototype = {
18     //键盘码对应移动方向
19     keyCode2Dir : {
20         37:'left',
21         38:'up',
22         39:'right',
23         40:'down'
24     },
25     //键盘按下事件
26     //keyCode:键盘码
27     keyDown : function(keyCode){
28         //修改对应的移动值
29         this.moveDir[this.keyCode2Dir[keyCode]]=true;
30     },
31     //键盘释放事件
32     //keyCode:键盘码
33     keyUp : function(keyCode){
34         //修改对应的移动值
35         this.moveDir[this.keyCode2Dir[keyCode]]=false;
36     },
37     //判断是否在移动中
38     checkMove : function(){
39         if(this.moveDir.left || this.moveDir.right || this.moveDir.up || this.moveDir.down)return true;
40         return false;
41     },
42     //移动
43     //gameInfo:游戏背景信息
44     move : function(gameInfo){
45
46         var This = this;
47         //根据方向来移动
48         if(This.moveDir.left)This.x -= This.movesp;
49         if(This.moveDir.right)This.x += This.movesp;
50         if(This.moveDir.up)This.y -= This.movesp;
51         if(This.moveDir.down)This.y += This.movesp;
52         //边界值检测
53         if(This.x <0)This.x=0;
54         else if(This.x >gameInfo.width-This.img.width)This.x = gameInfo.width-This.img.width;
55         if(This.y <0)This.y=0;
56         else if(This.y >gameInfo.height-This.img.height)This.y = gameInfo.height-This.img.height;
57     }
58
59 }

3。bullet.js，子弹类，子弹的飞，我承认，确实做得很简单，希望大家自己改进这个算法。。。

1 var Bullet = function(img){
2     //子弹的图片
3     this.img = img;
4     //X坐标
5     this.x = 0;
6     //Y坐标
7     this.y = 0;
8     //子弹要飞的x与y的速度
9     this.arc = {};
10     //移动的帧数
11     this.moveFps = 20;
12     //帧数延迟
13     this.moveFpsLazy = 0;
14     //初始化
15     this.init();
16 }
17 Bullet.prototype = {
18     //方向数组
19     arrDir : ['left','right','up','down'],
20     //初始化
21     init : function(){
22         //最小位置
23         var min = 5,
24             //最大位置
25             max = 395,
26             //随机位置
27             rnd = Math.floor(Math.random()*370+10),
28             //移动方向
29             dir = this.arrDir[Math.floor(Math.random()*4)];
30
31         //设置子弹的初始位置与将要飞的方向与速度
32         switch(dir){
33             case 'left':{
34                 this.x = max;
35                 this.y = rnd;
36                 if(this.y>=max/2)this.arc = {x:-5,y:-2};
37                 else this.arc={x:-5,y:2};
38                 break;
39             }
40             case 'right':{
41                 this.x = min;
42                 this.y = rnd;
43                 if(this.y>=max/2)this.arc = {x:5,y:-2};
44                 else this.arc={x:5,y:2};
45                 break;
46             }
47             case 'up':{
48                 this.y = max;
49                 this.x = rnd;
50                 if(this.x>=max/2)this.arc = {x:-3,y:-5};
51                 else this.arc={x:3,y:-5};
52                 break;
53             }
54             case 'down':{
55                 this.y = min;
56                 this.x = rnd;
57                 if(this.x>=max/2)this.arc = {x:-3,y:5};
58                 else this.arc={x:3,y:5};
59                 break;
60             }
61         }
62     },
63     //更新子弹数据
64     //gameInfo:游戏背景信息
65     updata : function(gameInfo){
66         //延迟+10
67         this.moveFpsLazy += 10;
68         //判断延迟是否等于移动帧数
69         if(this.moveFpsLazy == this.moveFps){
70             //移动
71             this.x += this.arc.x;
72             this.y += this.arc.y;
73             //边界值检测
74             if(this.x <0 || this.x > gameInfo.width || this.y <0 || this.y > gameInfo.height){
75                 this.callback();
76                 return false;
77             }
78             //清0
79             this.moveFpsLazy = 0;
80         }
81     },
82     //检测是否撞到飞机
83     //fly:飞机对象
84     checkCrashFly : function(fly){
85         //获取子弹与飞机的圆心坐标
86         var bx = this.x+this.img.width/2,by = this.y+this.img.height/2,
87             fx = fly.x+fly.img.width/2,fy = fly.y+fly.img.height/2;
88         //判断圆心距
89         if(Math.sqrt(Math.pow(bx-fx,2)+Math.pow(by-fy,2)) < (fly.img.width/2+this.img.width/2)){
90             return true;
91         }
92         return false;
93     },
94     //回调函数
95     callback : function(){}
96
97 }

4。Game.js，游戏控制类，主要控制游戏的逻辑

  1 var Game = {
  2     //游戏背景数据，主要是宽与高
  3     gameInfo :{width:0,height:0},
  4     //飞机对象
  5     fly : null,
  6     //子弹对象数组
  7     bullets : [],
  8     //子弹图片
  9     bulletImg : null,
10     //子弹产生的延迟
11     bulletLazyFps : 0,
12     //绘画处理计时器ID
13     processId : 0,
14     //分数
15     score : 0,
16     //是否开始
17     isStart : false,
18     //显示开始信息
19     showStart : function(){
20
21         var This = this;
22         //画开始字
23         Canvas.drawText("Press Enter to Start!",120,200,'white');
24         //绑定事件
25         document.body.onkeydown = function(e){This.keyDown(e);};
26         document.body.onkeyup = function(e){This.keyUp(e);};
27     },
28     //游戏初始化
29     init : function(){
30         //设置游戏背景信息
31         var gameBg = document.getElementById('js_canvas');
32         this.gameInfo.width = gameBg.offsetWidth;
33         this.gameInfo.height = gameBg.offsetHeight;
34         //初始化画布
35    gameBg.focus();Canvas.init(gameBg);
36         //设置飞机图片与子弹图片
37         var flyImg = new Image();
38         var bulletImg = new Image();
39         flyImg.src = "img/fly.gif";
40         bulletImg.src = "img/bullet.gif";
41         //加载图片，成功后，回调显示开始信息
42         Canvas.loadImgs([flyImg,bulletImg],this.showStart,this);
43         //设置飞机对象
44         this.fly = new Fly(flyImg,200,200);
45         //设置Game子弹图片
46         this.bulletImg = bulletImg;
47     },
48     //生成子弹
49     createBullets : function(){
50
51         var This = this;
52         //判断延时是否200
53         if(this.bulletLazyFps == 200){
54             //创建子弹，添加到数组中
55             var bullet = new Bullet(this.bulletImg);
56             bullet.callback = function(){
57                 This.removeBullet(this);
58             }
59
60             this.bullets.push(bullet);
61             this.bulletLazyFps = 0;
62         }
63         else{
64             this.bulletLazyFps += 10;
65         }
66     },
67     //开始
68     start : function(){
69
70         var This = this;
71         //重置数据
72         this.reset();
73         //设置开始
74         this.isStart = true;
75         //开始绘画
76         this.process();
77
78     },
79     //重置数据
80     reset : function(){
81
82         this.score = 0;
83         this.bullets = [];
84     },
85     //结束
86     end : function(){
87
88         this.isStart = false;
89
90         clearInterval(this.processId);
91
92         this.showStart();
93     },
94     //绘画函数
95     process : function(){
96
97         var This = this;
98         //绘画计时器
99         this.processId = setInterval(function(){
100
101             if(!This.isStart)return;
102             //清除画布
103             Canvas.clear(This.gameInfo.width,This.gameInfo.height);
104             //判断飞机是否移动
105             if(This.fly.checkMove())This.fly.move(This.gameInfo);
106             //画飞机
107             Canvas.drawImg(This.fly);
108             //生产子弹
109             This.createBullets();
110             //画出所有子弹
111             for(var i=0,l=This.bullets.length;i<l;i++){
112
113                 var bullet = This.bullets[i];
114
115                 if(!bullet)continue;
116                 //更新子弹信息
117                 bullet.updata(This.gameInfo);
118                 //画子弹
119                 Canvas.drawImg(bullet);
120                 //检测是否撞到飞机
121                 if(bullet.checkCrashFly(This.fly)){
122                     This.end();
123                 }
124             }
125             //画分数
126             Canvas.drawText(Math.floor(This.score/1000)+"秒",20,20,'white');
127             This.score += 10;
128         },10);
129     },
130     //键盘按下事件
131     keyDown : function(e){
132
133         var This =this;
134         //游戏还没开始，而且按了回车
135         if(e.keyCode == 13 && !this.isStart){
136             e.preventDefault();
137             //开始
138             this.start();
139         }
140         //游戏开始而且按了方向键
141         if(e.keyCode >= 37 && e.keyCode <= 40 && this.isStart){
142             e.preventDefault();
143
144             This.fly.keyDown(e.keyCode);
145         }
146     },
147     //键盘释放事件
148     keyUp : function(e){
149
150         var This = this;
151         //释放了方向键
152         if(e.keyCode >= 37 && e.keyCode <= 40){
153             e.preventDefault();
154
155             This.fly.keyUp(e.keyCode);
156         }
157     },
158     //移除子弹
159     removeBullet : function(item){
160
161         for(var i=0,l=this.bullets.length;i<l;i++){
162
163             if(this.bullets[i] == item){
164                 this.bullets.splice(i,1);
165                 return true;
166             }
167         }
168     }
169
170 }

突然发觉自己写的那些，为啥会那么卡了。。。因为，我以前都是计时器分开来写，后来才发现，要放在同一个计时器去做动画。。。

希望大家喜欢，有啥不好的，欢迎指出。。。

源码下载>>

本文链接

【笔记】JavaScript闭包的常见使用

2011-01-06T15:30:00Z

自己总结出来的使用方法。。。。Mark一下！

1。循环绑定

No Use：

1 var lists = document.getElementsByTagName(‘li’);
2 for(var i=0;i<lists.length;i<l;i++){
3 lists[i].onclick=function(){alert(i);};
4 }
5

结果：点击每一个li，都是弹出lists.length的值。

原因：onclick事件中的i值只是引用，最后循环执行完了，i = lists.length。

Use：

1 var lists = document.getElementsByTagName(‘li’);
2 for(var i=0;i<lists.length;i<l;i++){
3 lists[i].onclick=function(i){return function(){alert(i);}}(i);
4 }
5

结果：点击每一个li，弹出对应li的编号i值。

原因：将i值传递进内部的函数中，此时函数已经执行了，所以，i这个值就是当时的值。

2。配置对应访问

No Use：

function getType(type){
var list = {
    ‘a’:’配置一’,
    ‘b’:’配置二’,
    ‘c’:’配置三’
}
return list[type];
}

结果：返回需要的配置值。

分析：每次调用都需要重新定义list变量以及赋值;

Use：

1 var getType = function(){
2     var list = {
3         ‘a’:’配置一’,
4         ‘b’:’配置二’,
5         ‘c’:’配置三’
6 };
7 return function(type){
8     return list[type];
9 };
10 }();
11

结果：返回需要配置值。

分析：只需要定义与赋值一次list变量。

3。封装类

No Use：

1 function ClassA(name){
2     this.name = name;
3     this.getName = function(){
4          return this.name;
5     }
6 }

结果：正常定义需要类。

Use：

1 var ClassA = function(){
2     function init(name){
3         this.name = name;
4         this.getName = function(){
5         return this.name;
6                 }
7         }
8 return init;
9 }();
10

结果：更进一步封装类。看起来优雅些。

4。自执行，避免全局变量污染

No Use：

1 var a = ‘1’;
2 var b = ‘2’;
3 alert(a+b);
4

结果：弹出12。

分析：多了两个全局变量a与b。

Use：

1 ~function(){
2      var a = ‘1’;
3      var b = ‘2’;
4      alert(a+b);
5 }();
6

结果：弹出12。

分析：函数执行完，变量a与b消失，不存在全局变量。

5。将json对象的公用函数私有化

No Use：

1 var data = {
2     getA:function(){return ‘A’},
3     getB:function(){return ‘B’},
4     p_get:function(){return this.getA()+this.getB();}
5 }
6 data.p_get();
7

结果：返回’AB’。

分析：getA与getB方法，只是提供给p_get方法使用，属于私有方法，不应该变成公用方法，data.getA()也能访问得到。

Use：

1 var data = function(){
2     function getA(){return ‘A’};
3     function getB(){return ‘B’};
4     var json = {
5         p_get:function(){return getA()+getB();}
6         }
7 return json;
8 }();
9 data.p_get();
10

结果：返回’AB’；

分析：getA与getB只能在内部访问，无法通过data.getA方式访问。与第二种类似。

暂时就想到那么多，最后一句，可以的话，还是尽量少用闭包。

本文链接

关于Javascript的延迟执行

2010-12-29T16:13:00Z

延迟执行，其实就是用到了setTimeout这个函数。善于利用这个函数，可以减少很多ajax的请求，以及dom操作。

1。延迟切换tab

需求：页面上有几个tab，切换tab的时候，会对某个特定区域的数据进行拉取更新。

弊端：用户从第一个tab切换一直快速切到尾，就会产生n个ajax请求。其实用户只是需要看到最后一个tab的数据。

一个比较简单的例子，绑定在tab上的onmouseover，如果用户不停的来回切换tab，ajax请求不会执行，只有停顿500毫秒后，才会执行，500毫秒，其实蛮短的，基本上不会影响到用户体验。

2。延迟自动完成

需求：在文本输入框中，监听用户输入，实现自动完成功能。

弊端：用户每输入一个字符，都会产生一个ajax请求，如果用户连续输入了一长串内容，请求次数就很多，实际上，最后的那次，才是用户需要的。

代码与上面例子类似。

3。延迟滚动

需求：页面的广告，需要用户滚动到哪，就跟到哪。

弊端：用户滚动在底，触发了N次的让广告重新定位的函数。其实，只需要当用户停下的时候，才触发一次就足够了。

代码与1类似。

其实有很多这样这样的例子，有些事情，不需要马上去执行，可以延迟一点时间才执行，时间很短，不影响用户体验，又可以减少很多不必要的消耗。

本文链接

【随笔】近期前端开发中IE6的一些诡异神奇bugs

2010-12-11T08:32:00Z

在这个万恶的IE6还生存的年代，我们很多时候都会遇到一些莫名其怪的诡异bugs，而这些很大部分都是来源与IE6。

1。神奇的cursor

1 <a href="#" onmouseover="this.style.cursor='pointer'" onmouseout='this.style.cursor="none";>测试</a>

这段看起来很普通的代码，却蕴藏着一个bug，就是在IE6下，当鼠标离开时，a标签的样式cursor:url("none");同时会产生一个404的请求，其它浏览器，

一切正常。解决方案：cursor="default"；就没事了。

2。神奇的a标签地址

1 <a href="#" id="a">连接</a>
2
3 <script>
4 document.getElementById("a").href="111@163.com";
5 </script>

当动态修改A标签的href的值，其值存在email的格式，IE6就会很智能的把innerHTML的值也改为href的值，其它浏览器一切正常。

解决方案：在email地址前加个空格就可以了。

3。神奇的a标签aborted

在IE6下点击此连接时，不会跳转，反而会返回一个aborted的状态。其它浏览器均正常。

解决方案：在最后return false;就可以了。

4。奇怪的tr元素

var tr = document.createElement("tr");
alert(tr.cells.length);

你会发现，在IE6先，是会报错的，cells未定义。在其它的浏览器，会弹出0；

如果你将tr元素添加进table中，则ie6也会弹出0；

5。奇怪的form与iframe

一个很正常的需求，就是希望提交表单后，不刷新页面。

问题就来了：form提交的地址是另外一边服务器的地址，就是域名都不同那种，而且我是不能修改那边代码，如果账号密码错误了，会返回一段js，

其中一句：history.go(-1)；

如果我是直接输入本页面地址，是没有什么问题，但如果我是从搜索引擎或者其它页面连接过来的，密码一错，就跳回那个页面了。杯具。。。

后来知道原因：就是历史记录，所以iframe里面的src我就设置连接到一个小图标。但又出问题了，其它浏览器都可以，就是IE6提交不了。。。

又发现原因：图标的域名与当前域名不相当，IE6提交不了给它，所以，最终换成本域名的，问题就解决了。

6。顺带提一个chrome的问题，当你定义一个全局变量：var status = {};

之后typeof status，在chrome下为string，在其它浏览器下为object。估计是跟window.status有关。

暂时就这么多。。。

本文链接

Html5小游戏之变大的小球

2010-11-18T08:06:00Z

现在很流行html5，所以我也花时间去学一下，我主要学习的是canvas标签，因为它可以画图，写小游戏。。。

发觉canvas写游戏跟用dom操作来写游戏很不同：

1，canvas是一张画布，所有东西都是画上去的，如果需要移动某个元素，需要擦掉它，然后再画个新的上去。

2，dom操作，如果要画一个东西，需要将dom元素添加到body或某个div中，设置它的样式，然后才会显示对应的样子出来，不过，它要移动，只需要改变坐标。

3，canvas只会重绘canvas标签，但dom会重绘页面，消耗的性能要小很多。

4，暂时发现那么多了。。。我也只是学到点皮毛而已。。。

游戏说明：每次拥有两次点击鼠标的机会，每点击一次鼠标，就会在相应的位置产生一个会慢慢变大，然后慢慢变小的红色球，当红色球碰撞到蓝色的小球，就会

将蓝色小球吃掉，然后在蓝色小球的位置，生出一个红色的球，最终看谁吃得小球最多。

温馨提示：既然是html5，就别用IE系列来浏览了，建议用FF或者chrome活safari。

游戏预览：

bug肯定有的，代码也写得不咋D，请多多指教。

源码上面有完整注释与说明，写得很简单，一看就能看懂的了。。

完整源码>>

本文链接

JavaScript游戏之优化篇

2010-11-05T06:45:00Z

最近回头看看自己以前写的游戏代码，总结出几个可以优化改进的地方，当然还有很多地方需要优化，还希望大家指出来。

1。善用DocumentFragment

之前有个打飞机的游戏。我是用如下方法添加子弹

1 for(var i=0;i<5;i++){
2 var bullet = new Bullet();
3 document.body.appendChild(bullet);
4 }

问题就来了，我的目的是希望同时能出现5颗子弹，所以我循环将5个子弹对象添加到body，这样会导致一个结果：浏览器reflow了5次。

但其实可以找一个载体，来先把这5个子弹类装起来，然后，再一次性添加到body中，这样就只会出现一次flow。节省不少开销。

1  var df = document.createDocumentFragment();
2  for(var i=0;i<5;i++){
3      var bullet = new Bullet();
4      df.appendChild(bullet);
5  }
6  document.body.appendChild(df);

DocumentFragment：文档碎片，它不会产生任何标签，只是一个载体。

2。对引用值置空，Dom自定义的引用值也置空。

发觉自己写的代码，很多引用类型的值，都没有在变量结束的时候置空。

例如：

1 var Bullet = function(){
2    this.dom = null;
3    this.init();
4 }
5 Bullet.prototype = {
6    this.init : function(){
7        this.dom = document.createElement('div');
8        document.body.appendChild(this.dom);
9    }
10    this.end : function(){
11        document.body.removeChild(this.dom);
12    }
13 }

在结束的时候单纯只是将dom对象移除，其实还需要将this.dom.innerHTML = ''以及this.dom = null。

只是针对IE系列，因为removeChild方法只是将dom元素从dom链中断开，没有释放对象。

3。使用getBoundingClientRect方法获取dom的left,top,width,height等参数。

当需要获取left,top,width,height等参数中两个或以上的时候，改用 getBoundingClientRect方法，可以一次性获取以上四个参数的一个对象，减少对

dom元素的属性访问。

1 var rect = document.getElementById('test').getBoundingClientRect();
2 //rect.width,rect.left,rect.top,rect.height

4。使用cloneNode方式克隆dom元素。

对于要需要经常性使用doucment.createElement方法来新建的dom元素，可以先将一个dom元素用cloneNode方法克隆保存起来，

下次需要再次使用的时候，可以直接用克隆的dom元素克隆一份出来，用cloneNode方法比用createElement方法速度要快。例子：

1 var temp;
3 for(var i=0;i < 100;i++){
4
5     var dom = temp?temp.cloneNode():document.createElement('div');
6     if(!temp)temp = dom.cloneNode();
7     //do something
8 }

5。循环判断中加标识，减少Dom属性判断。

根据游戏的逻辑，例如是男人就下一百层。

当小人站立在一个方块上面，这个时候，其它的方块，可以不需要再判断小人是否会掉落到自己的方块上，只需要往上升就行了。这样，一秒可以减少好几百次

对dom元素的属性访问，减少开销。当小人离开方块的时候，判断再次生效。合理利用。

附上自己写的:是男人就下100层传送门>>

暂时就发现那么多，以后发现更多的话，再写吧。。。

本文链接

JavaScript游戏之是男人就下100层

2010-11-03T10:23:00Z

不知不觉，就到了11月份了，其实我为啥要写js游戏，觉得游戏更能引起共鸣。11月份开篇之作：是男人就下100层，相信大家都玩过。

这次的游戏的编写难度比之前的都高很多。本次鄙人用了js的继承以及设计模式的工厂模式，也算是一个突破。。。

游戏的大致设计思路：

1，玩家类Player：一个人能左右移动，以及上下移动的小人。

拥有的基本方法：{

左右移动 : 单纯的键盘左右移动，

向下移动 : 属于向下加速度移动，每次移动都会加一个重力加速度的值，

向上移动 : 其实是跟着方块一起向上移动，匀速向上运动，

弹跳 : 就是玩家先向上一个减速度运动，然后，当速度小于1时，像下加速度运动

}

2，方块基类BlockBase：所有方块的基类，拥有公共的方法以及接口。

拥有的基本方法：{

移动 : 方块的向上匀速移动，

检测玩家是否在方块上 : 判断玩家是否停留在方块上

}

以及一些抽象的接口函数，只有名字，需要在子类中实现，具体看源码。

3，各种子类，如普通方块类NormalBlcok、弹跳方块类FlipBlock等

继承的实现方式如下：

在构造函数中：BlockBase.call(this);继承非prototype的属性与方法

在函数外部：子类方块.prototype = new BlockBase(); 继承基类的prototype的属性与方法

4，工厂类BlockFactory：负责生产方块，以及击中处理方块

拥有的基本方法：{

生成方块 : 重点的方法，就是随机生成一块方块

}

其实我也不知道怎么说，还是看源码吧。里面我注释得很具体了。

还有，bug肯定是会有的，希望大家谅解。。。

最后献上预览吧。希望大家多多拍砖，能让我多些提高。最好在代码的编写上。完整源码>>

方向左右控制移动，界面是做得比较丑。。。大家见谅。

目前：0层

本文链接