最代码官方的gravatar头像
最代码官方 2014-05-26 22:55:06

html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码

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

目标

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

绘制棋盘

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

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

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

 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 的圆角属性。用哪种速度又快代码又少呢?答案是第二种,圆角。代码如下:

 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 行代码是画一个棋子的方法,做一个简单的循环,就可以画出多个棋子,方法如下。

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 方法要返回一个字符串变量的,那么他的内容是什么呢?答案揭晓:

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 添加事件。

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 的方法巧妙解决了,第二种点击棋子的方法又该如何呢?

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

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 的的返回值来判断是否有子,而是要判断出有什么颜色的子。

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

 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 方法,这里再使用一个小技巧,就可以轻松搞定这个输赢判断。先看看五子棋和四子棋的输赢判断代码,然后对照代码来分析。

 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 行搞定。

 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("平局"); 
	 }

棋子初始化

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

 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 用户,我们还必须定义一行能够实现全屏的代码。

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

本文的在线演示网址是:http://demo.zuidaima.com/html/1839614057712640/index.html,效果图如下图所示:

图 1. 效果图

html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码

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

官方验证

可惜firefox下棋子没有css效果,大家请在chrome下测试。


打赏

文件名:html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码.rar,文件大小:3.732K 下载
  • /
      • /html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码
        • /html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码/index.html
          • /html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码/js
            • /html5游戏开发教程实战:五子棋、四子棋、围棋、翻转棋四种对弈游戏,仅仅100行代码/js/chess.js
最代码最近下载分享源代码列表最近下载
微信网友_6767218254057472  LV3 2023年12月7日
wangjialiang1  LV17 2023年8月24日
Letmezz  LV3 2023年8月9日
1056892955  LV5 2023年6月13日
姜广坤  LV14 2023年4月28日
四季夏目  LV7 2022年3月18日
csyb1234  LV1 2021年11月5日
136327134  LV2 2021年8月27日
哦哦怕怕  LV10 2021年8月13日
z1225027768  LV1 2021年5月28日
最代码最近浏览分享源代码列表最近浏览
46562026 2023年12月22日
暂无贡献等级
Osit888  LV9 2023年12月8日
微信网友_6767218254057472  LV3 2023年12月7日
jiemomo  LV12 2023年11月5日
王泽桥  LV2 2023年10月16日
tyiyiyuiyuihui  LV3 2023年10月11日
wangjialiang1  LV17 2023年8月23日
Letmezz  LV3 2023年8月8日
HTMLSW 2023年7月6日
暂无贡献等级
微信网友_6520209513467904  LV1 2023年6月15日
顶部 客服 微信二维码 底部
>扫描二维码关注最代码为好友扫描二维码关注最代码为好友