您所在的位置:开发 > Web > 技术热点 > 百行HTML 5代码实现四种双人对弈游戏(1)

百行HTML 5代码实现四种双人对弈游戏(1)

2012-07-03 10:25 HTML5 HTML5研究小组 字号:T | T
一键收藏,随时查看,分享好友!

要做一个完整的双人对弈游戏,至少要做如下事情,第一步:绘制棋盘。不同的棋类游戏棋盘不同,这一点需要进行动态处理;第二步:绘制棋子......

AD:

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

目标

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

绘制棋盘

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

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

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

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

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

绘制棋子

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

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

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

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

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

内容导航
 第 1 页:绘制棋盘棋子  第 2 页:处理事件
 第 3 页:做成离线应用



分享到:

  1. 没有征信记录的人如何能享受金融服务?
  2. iOS与Android设备到底是如何被入侵的?

热点职位

更多>>

热点专题

更多>>

读书

Microsoft SQL Server 2005技术内幕:T-SQL程序设
SQL Server 2005微软官方权威参考手册。 是Inside Microsoft SQL Server 2005系列书中的第一本,SQL Server类的顶尖之作。 全

51CTO旗下网站

领先的IT技术网站 51CTO 领先的中文存储媒体 WatchStor 中国首个CIO网站 CIOage 中国首家数字医疗网站 HC3i