简介： 本文是一个非常具有挑战性的编程，因为 100 行代码，约莫 10000 个字符左右，将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意，这四个对弈游戏不是初级编程者的习作，而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏，并且可以离线存储到 iPad、Android 平板中，试想一下，把这种游戏下载到平板中，就可以在火车，旅游景区，等没有信号的地方进行对弈，是不是扩展了平板电脑的功能，是不是一种很惬意的事情。而且，关键是，这个程序没有图片，不需要去应用商店付费下载，仅仅是用 HTML5 技术写的 100 行代码而已，绝对是目前最迷您精悍的双人对弈游戏源码。（编者注：由于网页代码的宽度有限制，所以作者的源代码经过了一些换行处理，特此说明。）
目标
要做一个完整的双人对弈游戏，至少要做如下事情，第一步：绘制棋盘。不同的棋类游戏棋盘不同，这一点需要进行动态处理；第二步：绘制棋子。需要说明的是，围棋，五子棋等这些棋子都是圆的啊，请不要为了图片苦恼，在 HTML5 时代，我们用代码就可以实现立体圆形棋子；第三步：判断落子事件。当然是要定位手指的点击位置，这四种棋中，有的是落在框里面的，有的却是落在纵横交错的棋盘十字线上，需要动态处理；第四步：判断落子规则。下棋都有规则，不要因为代码少，就将规则打折扣，否则程序不成熟，会变成小朋友的玩具了；第五步：判断输赢。最后，我们要判断输赢。也就是要数子，这个事情必须由程序来完成，因为下棋总得需要一个裁判嘛；第六步：就是平板电脑时代，我们得实现离线应用。这个太重要了，否则，要是在台式电脑上，接根网线玩的游戏，已经遍地都是了，您写得再牛，有什么用？就是要移动，在没有信号的地方，才有市场，现在平板，智能手机这么多，在没有网络信号的地方，掏出移动设备来下棋，才是一件很牛的事情。
绘制棋盘
前面说了围棋、五子棋、四子棋和翻转棋的棋盘并不相同，围棋是纵横 18 个格，其他三种棋则是 8 个格。所以绘制棋盘是需要有参数。这是个小问题，大问题是，选择什么方法来绘制棋盘？
HTML5 框架下，有至少 3 种方法：第一种，用 Canvas 画线；第二种，用 DIV，CSS3 里面增加了行列属性；第三种，用 table 标签。
用哪一种速度最快，代码少呢？答案是：第三种。多少有点失望啊，HTML5 不是万能的。详细代码如下：
|
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><
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
|
