时间流互联网之未来,代码实现四种双人对弈游

百行 HTML5 代码实现四种双人对弈游戏

2012/06/30 · HTML5 · 1 评论 · HTML5

来源:于丙超@developerworks

简介: 本文是一个非常具有挑战性的编程,因为 100 行代码,约莫 10000 个字符左右,将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意,这四个对弈游戏不是初级编程者的习作,而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏,并且可以离线存储到 iPad、Android 平板中,试想一下,把这种游戏下载到平板中,就可以在火车,旅游景区,等没有信号的地方进行对弈,是不是扩展了平板电脑的功能,是不是一种很惬意的事情。而且,关键是,这个程序没有图片,不需要去应用商店付费下载,仅仅是用 HTML5 技术写的 100 行代码而已,绝对是目前最迷您精悍的双人对弈游戏源码。(编者注:由于网页代码的宽度有限制,所以作者的源代码经过了一些换行处理,特此说明。)

目标

要做一个完整的双人对弈游戏,至少要做如下事情,第一步:绘制棋盘。不同的棋类游戏棋盘不同,这一点需要进行动态处理;第二步:绘制棋子。需要说明的是,围棋,五子棋等这些棋子都是圆的啊,请不要为了图片苦恼,在 HTML5 时代,我们用代码就可以实现立体圆形棋子;第三步:判断落子事件。当然是要定位手指的点击位置,这四种棋中,有的是落在框里面的,有的却是落在纵横交错的棋盘十字线上,需要动态处理;第四步:判断落子规则。下棋都有规则,不要因为代码少,就将规则打折扣,否则程序不成熟,会变成小朋友的玩具了;第五步:判断输赢。最后,我们要判断输赢。也就是要数子,这个事情必须由程序来完成,因为下棋总得需要一个裁判嘛;第六步:就是平板电脑时代,我们得实现离线应用。这个太重要了,否则,要是在台式电脑上,接根网线玩的游戏,已经遍地都是了,您写得再牛,有什么用?就是要移动,在没有信号的地方,才有市场,现在平板,智能手机这么多,在没有网络信号的地方,掏出移动设备来下棋,才是一件很牛的事情。

绘制棋盘

前面说了围棋、五子棋、四子棋和翻转棋的棋盘并不相同,围棋是纵横 18 个格,其他三种棋则是 8 个格。所以绘制棋盘是需要有参数。这是个小问题,大问题是,选择什么方法来绘制棋盘?

HTML5 框架下,有至少 3 种方法:第一种,用 Canvas 画线;第二种,用 DIV,CSS3 里面增加了行列属性;第三种,用 table 标签。

用哪一种速度最快,代码少呢?答案是:第三种。多少有点失望啊,HTML5 不是万能的。详细代码如下:

XHTML

this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */ nameBak=name; if("turnover"==name){row=8;col=8;}else if("gogame"==name){row=18;col=18;} var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2)); minL=(aW>aH?aH:aW)-4;// 这个减法很重要,否则填空时会把表格撑大 var array=new Array("<div style="margin:"+minL+"px;"> "+ "<table border=1 cellspacing=0 width=""+(aW*col)+"" height=""+(aH*row)+"">"); for(var i=0;i<row;i++){ array.push("<tr>"); for(var j=0;j<col;j++){array.push("<td align=center>"+ evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");} if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中 */ array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2)); array.push("</tr>"); } if(nameBak!="four"&&nameBak!="turnover"){ for(var j=0;j<=col;j++){ array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2)); } } document.write(array.join("")+"</table></div>"); setClick(row,col,minL,minL);/* 初始化事件 */ start();/* 初始化棋子 */ }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘 */
nameBak=name;
if("turnover"==name){row=8;col=8;}else if("gogame"==name){row=18;col=18;}
var aW=Math.floor(width/(col+2)),aH=Math.floor(height/(row+2));
minL=(aW>aH?aH:aW)-4;// 这个减法很重要,否则填空时会把表格撑大
var array=new Array("<div style="margin:"+minL+"px;"> "+
"<table border=1 cellspacing=0 width=""+(aW*col)+""
height=""+(aH*row)+"">");
for(var i=0;i<row;i++){
       array.push("<tr>");
       for(var j=0;j<col;j++){array.push("<td align=center>"+
evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"</td>");}
       if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中 */
             array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));
             array.push("</tr>");
}
   if(nameBak!="four"&&nameBak!="turnover"){
           for(var j=0;j<=col;j++){
               array.push(evt(row,j,minL,minL,aW*j+minL/2+8,aH*row+minL/2));
               }
           }
document.write(array.join("")+"</table></div>");
setClick(row,col,minL,minL);/* 初始化事件 */
start();/* 初始化棋子 */
}

上面代码中,最重要的是标黑体的第 6 行代码,这里面有两个诀窍,第一个就是 table 的定义,第二个就是使用了 Array 数组。为什么要使用数组,而不是定义一个字符串呢?答案是优化,就是 Array 数组的 push 方法的速度要远远快于 String 字符串的加 + 运算。共计 16 行代码,一个棋盘就画好了,当然这其中不仅仅是画线,还有棋子处理,事件定义等方法的调用,后面将陆续谈到。

绘制棋子

绘制完棋盘,我们来绘制棋子。我们挑选的这四种棋,虽然棋盘不同,但是棋子都是相同的,都是黑白棋子。这在以前,做在线对弈,除了 Flash 能实现美观效果外,其他的必须先请美工做几副小图片,HTML5 时代,美工的人力和沟通成本就节省了。

我们至少有两种方法绘制棋子,第一种是:canvas 类,第二种就是 css 的圆角属性。用哪种速度又快代码又少呢?答案是第二种,圆角。代码如下:

CSS

function man(width,height,id,colorBak){ /* 画棋子 */ var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak; var r="border-radius:"+width/2+"px;"; var obj=id==null?event.srcElement:_$(id); obj.innerHTML="<div id="man_"+color+"_"+order+"" style="display:block;-webkit-" +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+ "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+ "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"), to(rgba(255,255,255,1)));"+ "width:"+width+"px;height:"+height+"px;"></div>"; }

1
2
3
4
5
6
7
8
9
10
11
function man(width,height,id,colorBak){ /* 画棋子 */
   var color=colorBak==null?(order++%2==0?"000":"CCC"):colorBak;
   var r="border-radius:"+width/2+"px;";
   var obj=id==null?event.srcElement:_$(id);
   obj.innerHTML="<div id="man_"+color+"_"+order+"" style="display:block;-webkit-"
   +r+"-moz-"+r+""+r+"-moz-box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
   "box-shadow:inset 0 -10px 40px rgba(0,0,0,1);"+
   "background:-webkit-gradient(radial, 50 40, 30, center center, 80, from(#"+color+"),
      to(rgba(255,255,255,1)));"+
   "width:"+width+"px;height:"+height+"px;"></div>";
}

上面代码中,我们看到,我们将每一个棋子定义了一个 DIV,使用了 CSS3 的 shadow,gradient 属性,并且可以根据棋盘的大小自动计算棋子的大小,另外,如果用户不喜欢黑白颜色,甚至可以定义成红黄颜色,女生和小朋友估计会喜欢。这 5 行代码是画一个棋子的方法,做一个简单的循环,就可以画出多个棋子,方法如下。

CSS

function moreMan(array){for(var i=0;i<array.length;i++) man(minL,minL,nameBak+"_"+array[i]);} /* 绘制多个棋子 */

1
2
3
function moreMan(array){for(var i=0;i<array.length;i++)
man(minL,minL,nameBak+"_"+array[i]);}
/* 绘制多个棋子 */

处理事件

绘制完棋盘和棋子,我们来分析一下用户的动作。用户的动作无非就是两种,一种是点击棋盘 table,另外一种就是点击棋子 DIV。难点在点击 table 这里,我们要获知用户点击 table 的位置。

传统思路可能是这样,使用 event 方法,获得 x,y 的坐标,然后与 table 的左上角做减法,然后再跟单元格 cell 做除法。听起来都麻烦。

如果您仔细阅读了前面的代码,就应该发现,其实在画棋盘是,我们向 array 数组中 push 了一个 evt 方法,很明显,这个 evt 方法要返回一个字符串变量的,那么他的内容是什么呢?答案揭晓:

CSS

function evt(i,j,width,height,left,top){ /* 单一单元格事件 */ return "<div id=""+nameBak+"_"+i+"_"+j+"" style="position:"+ (nameBak=="four"||nameBak=="turnover"?"block":"absolute")+ ";border:0px solid #000;width:"+ width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;"></div>"; }

1
2
3
4
5
6
function evt(i,j,width,height,left,top){ /* 单一单元格事件 */
  return "<div id=""+nameBak+"_"+i+"_"+j+"" style="position:"+
(nameBak=="four"||nameBak=="turnover"?"block":"absolute")+
";border:0px solid #000;width:"+
width+"px;height:"+height+"px;top:"+top+"px;left:"+left+"px;"></div>";
}

原理是一个 DIV。对了,这个添加事件的方法非常特殊,实际上是在每个棋盘的交叉的地方画了一个 DIV,然后给 DIV 添加事件。

CSS

function setClick(row,col,width,height){ for(var i=0;i<=row;i++){ for(var j=0;j<=col;j++){ var els=_$(nameBak+"_"+i+"_"+j); if(els!=null)els.onclick=function(){if(rule())man(width,height);}; } } }

1
2
3
4
5
6
7
8
function setClick(row,col,width,height){
    for(var i=0;i<=row;i++){
            for(var j=0;j<=col;j++){
                var els=_$(nameBak+"_"+i+"_"+j);
                if(els!=null)els.onclick=function(){if(rule())man(width,height);};
}
    }
}

需要说明的是,DIV 一定要先定义,即 document.write 输出出来,然后才能执行 onclick 的定义,否则会返回 DIV 未定义的错误。寥寥 10 行代码,把事件问题搞定了。

落子规则

前面说了,用户点击事件有两种,点击棋盘 table 事件我们采用额外增加 DIV 的方法巧妙解决了,第二种点击棋子的方法又该如何呢?

先要说明的是,点击棋子其实是一种错误的事件,点击棋盘可以落子,点击棋子是什么意思?黑白棋点击棋子是无意义的,我们必须要进行判断,不能在有子的地方落子,这是规则之一。所以必须要定义一个方法,判断是不是点击的地方是不是有棋子。代码如下:

CSS

function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1); if(obj==null||obj.indexOf("man_")==-1)return null; else if(obj.indexOf("000")!=-1) return 0; else if(obj.indexOf("CCC")!=-1)return 1;}

1
2
3
4
5
function isMan(row,col){var obj=_$(nameBak+"_"+row+"_"+col,1);
if(obj==null||obj.indexOf("man_")==-1)return null;
else if(obj.indexOf("000")!=-1)
  return 0;
else if(obj.indexOf("CCC")!=-1)return 1;}

想不到吧,其实只要一行代码就可以就可以做是否有子的判断,怎么判断的,诀窍就在于判断 DIV 的颜色,棋子要么黑,返回 0,要么白,返回 1,但是空白地方是没有颜色的,返回 null。这里要特别注意返回值,后面判断输赢的时候还要用,所以不能简单通过 true 或者 false 的的返回值来判断是否有子,而是要判断出有什么颜色的子。

对于五子棋和围棋,这一条规则够用了,但是对于翻转棋和四子棋,还有第二条规则:不能在四周空白的地方落子,就是说必须是相连的。也就是说,不仅仅要判断点击的地方是不是有棋子,还要判断其四周是不是有棋子,这个,不是可以有,而是,必须有。需要做一个小循环啊,代码如下:

CSS

function rule(){/* 走棋规则 */ var id=event.srcElement.id; if(id.indexOf("man_")==0){alert("不能在有子的地方落子");return false;}else{ var p=id.indexOf("_"),p1=id.lastIndexOf("_"); var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1; if("gobang"==nameBak)return gobang(row,col); else if("four"==nameBak){ if(isMan(row,col+1)==null&&isMan(row,col-1)==null&& isMan(row+1,col)==null&& isMan(row-1,col)==null){ alert("四子棋不能在四周空白的地方落子!"); return false; } return gobang(row,col,3); }else if("turnover"==nameBak){ if(isMan(row,col+1)==null&&isMan(row,col-1)==null&& isMan(row+1,col)==null&&isMan(row-1,col)==null&& isMan(row-1,col-1)==null&& isMan(row+1,col+1)==null){ alert("翻转棋不能在四周空白的地方落子!"); return false; } turnover(); }else if("gogame"==nameBak){ } } return true; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
function rule(){/* 走棋规则 */
var id=event.srcElement.id;
if(id.indexOf("man_")==0){alert("不能在有子的地方落子");return false;}else{
     var p=id.indexOf("_"),p1=id.lastIndexOf("_");
     var row=id.substr(p+1,p1-p-1)*1,col=id.substr(p1+1)*1;
     if("gobang"==nameBak)return gobang(row,col);
        else if("four"==nameBak){
     if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
     isMan(row+1,col)==null&&
     isMan(row-1,col)==null){
     alert("四子棋不能在四周空白的地方落子!");
     return false;
}
return gobang(row,col,3);
}else if("turnover"==nameBak){
if(isMan(row,col+1)==null&&isMan(row,col-1)==null&&
isMan(row+1,col)==null&&isMan(row-1,col)==null&&
isMan(row-1,col-1)==null&&
isMan(row+1,col+1)==null){
alert("翻转棋不能在四周空白的地方落子!");
return false;
}
  turnover();
}else if("gogame"==nameBak){
     }
     }
  return true;
}

循环中,反复调用 isMan 方法判断是否有棋子,所以如果 isMan 写得不够简练,快速,不知道要耗费多少时间啊。数一数,总共 19 行代码就处理了落子规则。

到这里,我们绘制了棋盘,棋子,获得了点击时间,判断了落子规则,才用了 40 行左右的代码,其实程序基本上可用了,但是我们不能满足啊,还得让他更加智能一些,我们还需要一个裁判断输赢。

判断输赢

要判断输赢,我们必须要知道下棋的规则:

五子棋是各个方向的五子相连算赢,四子棋是各个方向四个子相连算赢,翻转棋数棋子的个数,围棋则要麻烦些,不仅仅数棋子个数,还要数围住的区域。

逻辑上好像很复杂啊,似乎也是计算最多的地方,有点人工智能的意思。没错,如果前面的基础打得不好,这里的确要耗费很多代码,但是因为我们前面定义了 DIV 用颜色判断是否存在棋子的 iaMan 方法,这里再使用一个小技巧,就可以轻松搞定这个输赢判断。先看看五子棋和四子棋的输赢判断代码,然后对照代码来分析。

CSS

function gobang(row,col,num){ num=num==null?4:num; var rs=[[],[],[],[]],b=[],w=[];/* 这里采用四维数组来存储棋子位置 */ for(var i=0,j=0;i<num*2+1;i++,j++){ rs[0].push(isMan(row-num+i,col)); rs[1].push(isMan(row,col-num+j)); rs[2].push(isMan(row-num+i,col-num+j)); rs[3].push(isMan(row-num+i,col-num+j)); if(i<num){b.push(0);w.push(1);} } if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋胜");return false; }else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋胜");return false;} return true; }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function gobang(row,col,num){
num=num==null?4:num;
var rs=[[],[],[],[]],b=[],w=[];/* 这里采用四维数组来存储棋子位置 */
for(var i=0,j=0;i<num*2+1;i++,j++){
rs[0].push(isMan(row-num+i,col));
rs[1].push(isMan(row,col-num+j));
rs[2].push(isMan(row-num+i,col-num+j));
rs[3].push(isMan(row-num+i,col-num+j));
if(i<num){b.push(0);w.push(1);}
}
if(rs.join("#").indexOf(b.join(","))!=-1){alert("黑棋胜");return false;
}else if(rs.join("#").indexOf(w.join(","))!=-1){alert("白棋胜");return false;}
     return true;
}

共计 9 行代码就搞定,看懂没?首先定义了一个 Javascript 多维数组 rs=[[],[],[],[]],这种定义多维数组的方法,挑出来重点说明一下,因为搜索引擎上都是搜不到的,我讲课时差不多遇到的学生也都不清楚,他们大多采用 new Array,然后加循环的蜗牛方法。

第二步:从落子的地方开始循环,注意,不是循环整个棋盘,为的就是节省时间啊。循环设计纵横交叉四个方向,有棋子的地方,就向这个四维数组 push 棋子的颜色。

第三步:把数组 join 起来就 ok 啦,如果有 4 个或 5 个 1 相连,自然就是白棋胜,否则就是黑棋胜。

写道这里,就有点意思啦,注意我们处理的数据的方法,我称之为“块数据”的处理方法,就是充分利用 array 数组,保存一块一块的数据,无论写入,读取,还是统计分析,都是针对这一块数据进行,这样既可以提高内聚度,便于提炼出可以重用的方法,就可以大大的加快执行速度。

处理相连都不在话下,数子就更简单了,使用块数据处理方法,3 行搞定。

CSS

function turnover(){ if(order<64)return; var num=0;var total=row*col;for(var i=0;i<row;i++){ for(var j=0;j<col;j++){num+=isMan(i+"_"+j);} } if(num<total/2)alert("黑棋胜"+(total-num*2)+"子"); else if(num>row*col/2)alert("白棋胜"+(num*2-total)+"子"); else alert("平局"); }

1
2
3
4
5
6
7
8
9
function turnover(){
    if(order<64)return;
    var num=0;var total=row*col;for(var i=0;i<row;i++){
        for(var j=0;j<col;j++){num+=isMan(i+"_"+j);}
    }
if(num<total/2)alert("黑棋胜"+(total-num*2)+"子");
else if(num>row*col/2)alert("白棋胜"+(num*2-total)+"子");
else alert("平局");
}

棋子初始化

环环相扣地写到这里,还有最后一个关于棋子的问题需要处理。那就是,下五子棋是从空白棋盘开始,其他三种棋却一开始都是有子的。其实给一个空白棋盘也行,但是其他三种棋因为一般的前几步走法都是固定的,我们为了提高智能化程度,不得不在浪费四行代码,毕竟,我们的目标是一个市场化的产品,而不是一个初学者不考虑用户体验的程序。

CSS

function start(){ if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]); }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0); }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]); } }

1
2
3
4
5
6
function start(){
   if("turnover"==nameBak){moreMan([3+"_"+3,4+"_"+3,4+"_"+4,3+"_"+4]);
   }else if("four"==nameBak){man(minL,minL,nameBak+"_"+row/2+"_"+0);
   }else if("gogame"==nameBak){moreMan([3+"_"+3,15+"_"+3,15+"_"+15,3+"_"+15]);
   }
}

其实就是调用了一下 moreMan 方法,注意也是块数据引用,传输了一个数组,用下划线分割横向和纵向坐标。

做成离线应用

本文开头就说过,台式电脑的双人或多人对弈程序早已多如牛毛烂大街了,只有移动应用才能有市场,我们的目标就是奔着这个来的,所以最后必须做成离线应用。

如何实现 HTML5 的离线应用,搜索引擎很快能找到结果,其实只要三个关键步骤。

第一步;在 Web 服务器的配置文件中声明一下。Tomcat 和 Apache 的声明方式不相同,需要注意;

第二步:定义 manifest 文件,文件格式需要注意;

第三步:在 HTML 的文件中调用一下 manifest 文件。

根据这三个步骤,读者可以自行搜索细节,这里就不赘述了,我只讲搜索引擎搜不到的。

另外需要说明的是,iPad 和 Android 平板上浏览器实现全屏的方法也不一样,针对 iPad 用户,我们还必须定义一行能够实现全屏的代码。

  1. 效果图、在线演示、开放源代码

本文的在线演示网址是:,效果图如下图所示:

图 1. 效果图

图片 1

图中加了一个选择棋类型和设置背景功能,如要获得全部源代码,只要使用浏览器的查看源代码功能即可,限于篇幅,这里就不贴了。

总结

作为一个程序员,最高的境界不是写得代码越多越好,而是用最少的代码实现最多的计算,解决最多的问题。回想当年,盖茨在编写 Basic 时,为了节省几个字符需要绞尽脑汁通宵达旦,以至于遗留了千年虫世纪难题,反观今日,在云计算时代,随着硬盘和内存的容量越来越大,CPU 的运算越来越快,很多大型项目的程序员似乎失去了精简代码的习惯。但是移动计算的硬件,目前还没有那么高的配置,本文通过 HTML5 对弈游戏,使用“块数据”计算方法,实现了用最少代码实现最多计算的目标,特别适用移动计算,与大家共勉。

 

赞 收藏 1 评论

图片 2

时间流互联网之未来(上)

2013/04/15 · HTML5 · 1 评论 · HTML5

来源:pingwest

从空间模式转向时间模式

图片 3

两个月前,耶鲁大学计算机科学教授David Gelernter 在连线杂志上发表了一篇文章,称未来的互联网将从空间模式转向时间模式。当时很多科技媒体都开始翻译,但对于大多数人来说,David Gelernter提出的这种概念太超前,顶多也就是明白有这么一个新闻而已。甚至对大部分媒体来说,他们脑海中也根本无法想象Gelernter 提出的这种概念是什么样子。

David Gelernter 的这个理论确实有一些超前因素(更何况他16年前就提出了类似的观点),但实际上这里面的很多说法,已经开始进入我们的生活了。下面,本文就大致根据David Gelernter 的理论,结合当下的互联网发展来简单介绍一下。由于此理论与互联网的联系非常庞杂,后面我们还会分五章(共六章)来从各个层面介绍,以便提供一个深入的认识。

David Gelernter 的观点,总的来说,就是现在的互联网还是以一个个网站、一款款App、一项项服务这种独立的形式存在的,你需要分别去登陆各个网站,每个服务都有一个独立的ID,他们在空间上是分开的,就像你去街上逛的一家家店铺一样。而随着网络的发展、信息世界的开放、智能终端的普及,这些独立的内容会聚合在一起,并以时间流的形式呈现给我们每个人。你只要刷信息流,就可以看到这个世界在发生什么、看到朋友们在干什么,去获取信息、购物、发布内容、检索、与人沟通等。

最简单的例子,就是Twitter 和Facebook 的时间流信息的形式。Twitter前天刚刚在Twitter Card上新增了一个App超级链接,用户可以在Twitter信息流中去看好友分享的内容并直接跳转过去。这样,当大家都把内容分享到Twitter时,你就能看到所有动态包括新闻、朋友分享的文章、上传到Flickr的图片、上传到Vine的视频等 。Facebook 也是,现在每个网站上都有Facebook的大拇指按钮,你在FB上可以看到各种从其他网站上分享过来的东西。(哈哈,或许你已经想到了Facebook今天推出的 Home for Android,我们在第五章中会详细介绍这种形式。)

互联网时间流的概念,意味着未来的信息会高度整合,这些信息包括博客、RSS订阅、Twitter等社交网络信息、Instagram图片、朋友分享的电影图书音乐、Foursquare 签到等等。David Gelernter 称之为魔法日记(他把空间模式称为杂志摊),信息流像日记一样不断地滚动,记录着你的世界上发生的每一条信息,当你触碰她时,她便停止,你可以不断地翻阅、搜索、在里面和朋友互动等。而这个日记最基本的特征就是根据时间排序,你生活中的所有行为,都会以时间这一最基本的标签保存起来。

图片 4

这种时间流的形态,将直接影响着我们的信息获取方式、介质展现形式(包括硬件和软件)、搜索的形式、信息生产的方式、电商的形式等。当这种时间流形态最终成型之后,互联网的概念便会慢慢的从人们的认知中消失,像杂志摊的网站类型也会从人们的生活中消失(虽然它们仍然存在),每个人看到的就是一个“流”,这个流包括万象,如果哪家网站或服务拒绝进入这个流,那就意味着拒绝进入互联网。

当然,每个人看到的都只是整个“世界流”的一部分,是自己有意无意订制的一个个人世界。当你把微博、豆瓣、邮箱、微信、色影无忌、V2EX这些你常用的网站整合在一条信息流之后,你想要的所有信息都尽收眼底。有人问那微博信息流那么多,被刷屏怎么办?首先这些信息流肯定会有优先级,其次碎片化的时间可以帮你解决部分问题,再次一个人本来需要的信息就有限,这样也会让你更好的利用时间,获取最有价值的信息。当然,像Evernote、Instapaper、Doit.im、Mindjet Maps这些工具也会帮你管理、筛选知识和信息,更好的规划你的生活。

的时间流互联网基本上就是这样,后面我们会从各个方面阐述一下这种理论目前已有的一些趋势性的论证依据,以及在这种理论下未来的互联网、移动互联网发展的具体形式。

 

来自 Mozilla 的 HTML5 游戏开发资源

2014/09/19 · HTML5 · HTML5

本文由 伯乐在线 - betty135 翻译。未经许可,禁止转载!
英文出处:mozilla。欢迎加入翻译组。

今天我们发布了Firefox 31,它具有一些可以帮助HTML5游戏开发者编写并调试复杂游戏的新特性。并且Mozilla用博客记录了用asm.js做的首款商业游戏,像Dungeon Defenders Eternity 和Cloud Raiders这两款游戏都是用Emscripten编译器交叉编译到JavaScript中的。像这样的游戏意味着HTML5已经是一个游戏平台了。

如果你对Emscripten感兴趣你可以在Emscripten wiki了解更多详细信息,也可以在github page上面获得代码。另外一个很好的资源是MDN上的 Emscripten tutorial。如果你想知道的asm.js性能,可以从这篇文章中获得更多细节asm.js performance improvements in the latest version of Firefox make games fly! 。

在这篇文章中我们会介绍给你一些Mozilla开发者所创造的资源,利用这些资源你可以编写并调试基于HTML5的游戏。这不是一个非常详尽的列表,我们欢迎大家提供在这方面任何有价值的反馈,请在评论中告诉我们。

桌面将成为一级菜单和第一入口

图片 5

实际上在David Gelernter 再次提出互联网时间流这个理论之前,移动互联网在高速发展过程中就已经开始有了类似的趋势。只不过由于其形势并不明显,很多人并没有注意到。本文便是针对移动互联网的这一趋势,来详细聊聊。

在功能机时代,手机上的每个功能是以九宫格的形式存在的,苹果推出iPhone之后,延续了这一特性。同时独立App的形式还能保证其单任务、安全、流畅的特性,所以现在大部分的手机都是打开屏幕,点击一个应用图标,然后进入使用一些功能。

但到了后来,Android后期(4.x之后),移动OS厂商开始将一些功能从应用层提到桌面层,比如iOS的下拉通知、Android 后期的下拉菜单和Widgets。而之后的Windows 8、Windows Phone以及BlackBerry 10,则开始将更多地信息展示提到桌面层。用户打开手机便可以看到想要的信息,一些天气、IM、图片等信息开始被整合到桌面上。

以微软Win8 之后的Live Title(动态磁贴)为例,这种形式让我第一次看到了OS厂商将桌面作为以及菜单的决心。虽然很多人认为这样很丑,而且微软也并没有大力宣传他们的这一功能,但以后一旦桌面信息入口成主流,微软便拥有了先发优势。

微软的动态磁贴实际上就是一个个的App icon的演进,除了显示应用图标和名称,还可以动态展示应用内的数据信息。比如天气软件显示天气数据、日历显示日期或活动、微博显示微博信息、图片应用显示最近上传的图片,以及新闻、股票、视频、邮件、信息等。由于动态磁贴有1/4、1/2的形式(以后还有更大的),展示的内容最小有1/16(比如人脉app),所以桌面就成了一个很好的信息流平台。虽然目前还不是时间流,只是一个一个的App的独立展示。

BlackBerry 10上的BlackBerry Hub也是一种信息流形式。从某种意义上讲,它也属于手机桌面的一级菜单中(桌面左滑进入Hub)。BlackBerry Hub里集成了几乎用户用到的所有信息,包括邮件、BBM、通话、短消息、Twitter、LinkedIn等,而且确实是按照时间流的形式排序的。你左滑手机,便可以查看、回复所有信息,不用再点进入一个一个App查看了

在桌面成为一级菜单和第一入口的同时,Android甚至做出了更大胆的举动。Android的下拉通知栏、Widgets 功能和Google Now让部分信息提到了桌面层,而其锁屏Widget 的发明,则直接将信息提得比桌面更靠前。显而易见,锁屏层级要比桌面更高,你点亮屏幕,不用解锁就能看到信息,这对用户来说显然更加方便。但这样可能也会有一些小问题,而且并不能改变Android仍然是以App为操作入口的现状。

图片 6

当桌面成为一级菜单和第一入口的趋势越来越明显,用户便会慢慢接受互联网时间流的形式,大部分操作都在桌面上进行,手机菜单层级进一步扁平化,App特性被逐渐淡化。除了微软、黑莓,新出来的Firefox、Ubuntu系统可能都会在这方面有更大的空间,而iOS和Android,由于其系统架构过于传统,在互联网信息流浪潮中没有太多优势。

而对于那些争着做移动浏览器来抢占移动互联网入口,甚至有的还在App内做了好几层菜单的厂商,简直就是在搞笑。当大部分用户都习惯用手机来获取信息之后,没人再会去浏览器内使用某项服务,更没人点亮手机、解锁、点击App图标、点击某公共账号、输入“天气”俩字,然后让对方弹出了天气信息。当大家都在手机桌面上看天气、搜索东西的时候,谁还愿意再点击四五层菜单去获取信息啊?!

而这种移动互联网趋势的发展,不仅颠覆了以前人们的信息获取方式,同时也为移动OS厂商、App开发者提供了很多挑战和机遇。

 

从何处开始

当开发一个基于HTML5的游戏时,你可以有很多种选择。从选择哪种编辑器,到游戏中根据使用的渲染框架和游戏引擎决定的是否会用到Canvas 2d、 WebGL、SVG 或者 CSS。大多数这种决定都会根据开发者的经验或者是游戏发布的平台来决定。没有任何一篇文章可以回答这些问题,不过我们想要把材料集合在一起,这样可以帮助你立刻起步。

对游戏开发者来说,MDN上最关键的资源之一就是 Games Zone.MDN的这一部分包括游戏开发的文章,演示,外部资源以及实例。它也包括一些对于开发者完成HMTL5需要了解的API的详细描述,包括声音管理,网络,存储和图形渲染。我们现在正在对这部分内容进行添加和补充。我们希望将来有大多数普通场景,框架和工具链的内容和实例。

同时这里也有一些帖子和MDN上面的文章可以帮助游戏开发者进行工作。

移动OS、HTML5 和超级App

当智能终端的桌面成为一级菜单以及信息的第一入口之后,互联网时间流效应开始凸显。人们直接在桌面上读取信息,很少进入App中进行操作,App对人的控制权开始减弱,开始沦为信息背后的提供者,HTML5的这种跨平台信息提供形式开始被消费者和开发者青睐。同时,移动OS的平台性和话语权增强当然,虽然用户仍可以把自己喜欢的信息放在桌面上,但OS厂商可能会对第三方信息服务提供商进行更严格的限制。

移动OS

图片 7

当信息不再局限于App这样的信息孤岛中之后,App开发者为了曝光率,会争相提供桌面甚至锁屏界面兼容。而OS提供商,可能会因为各种原因实施各种限制措施,比如iOS会利用Sandbox、单任务等把App都限制在应用层内,Google 会限制Android 第三方搜索(语音和文字)的使用权限,BlackBerry Hub让要想接入第三方应用信息需接受批准等。这些措施都会对第三方信息提供商造成不利。

另一方面,移动OS厂商还会大力推广自己的服务,并在出厂时预装自己的服务(大家都知道预装的威力)。Google 会在Android上加入搜索、Gmail、Google Now、Google Plus、Google Drive、传言中的Google Babble等,微软会预装Bing、Outlook、Skydrive、Skype等,黑莓、三星、Firefox、Ubuntu都会在ROM中加入自己的服务,更别提国内那些第三方Android ROM定制厂商了。

HTML5

由于在时间流互联网下,信息都集中到桌面上,导致App使用率下降,而相比之下,HTML5 内容提供方有着更多的优势。Web App 开发成本低、实时在线、无需更新、跨平台,同时兼容性和嵌入性都非常高,所以更方便于在桌面上展示。甚至Web App要比时间流互联网更快到来,所以如果三五年后时间流互联网成为现实,到时候可能大部分服务都采用HTML5开发。

另一方面,由于智能眼镜、智能手表、智能电视的显示屏幕规格各不相同,HTML5网页的内容展示方式也将更适合这些平台。比如Google Glass那个很小的屏幕,或者Pebble手表的显示屏,小屏幕只能显示非常少的信息,而HTML5,则可以灵活应对各种情况。至于各屏幕之间有何不同,下一章我们会详细阐述。

超级App

我把“超级App”定义为拥有亿级用户的服务,比如Facebook、Twitter、QQ和微信等。由于这些产品用户量巨大,他们能够左右用户的选择。而且这些产品都有着非常强的马太效应,大家都在用,你就不得不用,导致后期其用户会呈现指数型增长。

对于Facebook、Twitter,一旦他们推出一款深度定制的App(比如Facebook Home for Android),只要硬件允许,大家都会去安装使用。甚至如果Facebook把其他Facebook应用下架,那用Facebook的人就不得不去装一个Facebook Home ,这就很可怕了,因为整个桌面的控制权都在它手里。

除了上面的之外,拥有亿级用户的账号系统也很恐怖。比如Google 的Gmail账户、微软的Outlook账户、苹果账户、Amazon、Facebook 等。很多账户还有绑定了信用卡,一旦他们只允许使用他们账号体系的第三方服务接入桌面,这就很对很多创业者造成一定程度的伤害。

 

工具

作为一名HTML5开发者,你并不会缺少可随意使用的工具。在Mozilla社区中我们一直致力于扩展Firefox开发者工具。这些包括一个功能全面的JavaScrip调试器,样式编辑器,页面探测器,暂存器,分析器,网络监测和网页控制台。

除了这些,最近也引进和更新了一些著名的工具,它们可以为游戏开发者提供很好的功能。

《时间流互联网之未来(下)》

 

赞 收藏 1 评论

图片 8

调试器

在最新推出的Firefox中,我们为浏览器增加了一个Canvas调试器。图片 9

这个Canvas调试器可以追踪所有用来生成框架的canvas指令,有些特别的指令都会用颜色标注出来比如画一个部件或者使用特定的着色程序。这个Canvas调试器不仅可以用来开发基于WebGL的游戏,同时也可以用来调试基于Canvas 2D的游戏。在下面的游戏用你可以在动画中看到每个图像都被画到画布上。你可以点击任意一行直接跳到控制这个动作的JavaScript部分。图片 10

Canvas调试器最常报的两个错误是 setInterval instead of requestAnimationFrame和inspecting canvas elements in an iFrame。

如果想要了解关于Canvas调试器的更多的详细信息,请阅读Introducing the Canvas Debugger in Firefox Developer Tools。

Shader编辑器

当开发基于WebGL的游戏时,当应用运行时能够测试并且改变着色程序是非常有帮助的。使用开发者工具里面的Shader编辑器可以实现这一功能。顶点和分片着色程序都不用重新加载页面就可以修改,或者直接可以查看对输出有何影响。

图片 11

如果你想要对Shader编辑器有更多了解,请看这个帖子 Live editing WebGL shaders with Firefox Developer Tools,也可以看看这篇 MDN文章,它包含了一些展示实时编辑的视频。

本文由澳门新葡亰平台官网发布于web前端,转载请注明出处:时间流互联网之未来,代码实现四种双人对弈游

TAG标签:
Ctrl+D 将本页面保存为书签,全面了解最新资讯,方便快捷。