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

分享一下我老师大神的人工智能教程！零基础，通俗易懂！http://blog.csdn.net/jiangjunshow

也欢迎大家转载本篇文章。分享知识，造福人民，实现我们中华民族伟大复兴！

               

代码下载地址：http://www.zuidaima.com/share/1839614057712640.htm

原文：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;  var domain="http://www.zuidaima.com"; var author="zuidaima"; 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(