百行 HTML5 代码实现四种双人对弈游戏
作者：匿名 字体：[增加 减小] 来源：互联网 时间：2018-12-03
本文主要包含HTML5教程,HTML5中国,百行 HTML5 代码实现四种双人对弈游戏,html5cn,html5资料,html5文等相关知识,匿名希望在学习及工作中可以帮助到您
简介： 本文是一个非常具有挑战性的编程，因为 100 行代码，约莫 10000
个字符左右，将实现围棋、五子棋、四子棋和翻转棋四种双人对弈游戏。请注意，这四个对弈游戏不是初级编程者的习作，而是有着棋盘、立体棋子、事件、走棋规则判断、输赢判断的完整对弈游戏，并且可以离线存储到
iPad、Android
平板中，试想一下，把这种游戏下载到平板中，就可以在火车，旅游景区，等没有信号的地方进行对弈，是不是扩展了平板电脑的功能，是不是一种很惬意的事情。而且，关键是，这个程序没有图片，不需要去应用商店付费下载，仅仅是用
HTML5 技术写的 100
行代码而已，绝对是目前最迷您精悍的双人对弈游戏源码。（编者注：由于网页代码的宽度有限制，所以作者的源代码经过了一些换行处理，特此说明。）
目标
要做一个完整的双人对弈游戏，至少要做如下事情，第一步：绘制棋盘。不同的棋类游戏棋盘不同，这一点需要进行动态处理；第二步：绘制棋子。需要说明的是，围棋，五子棋等这些棋子都是圆的啊，请不要为了图片苦恼，在
HTML5
时代，我们用代码就可以实现立体圆形棋子；第三步：判断落子事件。当然是要定位手指的点击位置，这四种棋中，有的是落在框里面的，有的却是落在纵横交错的棋盘十字线上，需要动态处理；第四步：判断落子规则。下棋都有规则，不要因为代码少，就将规则打折扣，否则程序不成熟，会变成小朋友的玩具了；第五步：判断输赢。最后，我们要判断输赢。也就是要数子，这个事情必须由程序来完成，因为下棋总得需要一个裁判嘛；第六步：就是平板电脑时代，我们得实现离线应用。这个太重要了，否则，要是在台式电脑上，接根网线玩的游戏，已经遍地都是了，您写得再牛，有什么用？就是要移动，在没有信号的地方，才有市场，现在平板，智能手机这么多，在没有网络信号的地方，掏出移动设备来下棋，才是一件很牛的事情。
绘制棋盘
前面说了围棋、五子棋、四子棋和翻转棋的棋盘并不相同，围棋是纵横 18 个格，其他三种棋则是 8
个格。所以绘制棋盘是需要有参数。这是个小问题，大问题是，选择什么方法来绘制棋盘？
HTML5 框架下，有至少 3 种方法：第一种，用 Canvas 画线；第二种，用 DIV，CSS3 里面增加了行列属性；第三种，用 table
标签。
用哪一种速度最快，代码少呢？答案是：第三种。多少有点失望啊，HTML5 不是万能的。详细代码如下：
|
|
this.board=function(name,width,height,rowBak,colBak){ /* 画棋盘
*/
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));
for(var
j=0;j<col;j++){array.push("align=center>"+
if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中
*/
array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));
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));
}
上面代码中，最重要的是标黑体的第 6 行代码，这里面有两个诀窍，第一个就是 table 的定义，第二个就是使用了 Array
数组。为什么要使用数组，而不是定义一个字符串呢？答案是优化，就是 Array 数组的 push 方法的速度要远远快于 String 字符串的加 + 运算。共计
16 行代码，一个棋盘就画好了，当然这其中不仅仅是画线，还有棋子处理，事件定义等方法的调用，后面将陆续谈到。
绘制棋子
绘制完棋盘，我们来绘制棋子。我们挑选的这四种棋，虽然棋盘不同，但是棋子都是相同的，都是黑白棋子。这在以前，做在线对弈，除了 Flash
能实现美观效果外，其他的必须先请美工做几副小图片，HTML5 时代，美工的人力和沟通成本就节省了。
我们至少有两种方法绘制棋子，第一种是：canvas 类，第二种就是 css 的圆角属性。用哪种速度又快代码又少呢？答案是第二种，圆角。代码如下：
|
|
function
man(width,height,id,colorBak){
"+color+"_"+order+"\" style=\"display:block;-webkit-"
"-moz-box-shadow:inset 0
-10px 40px rgba(0,0,0,1);" +
"background:-webkit-gradient(radial, 50 40, 30, center
center, 80, from(#" +color+"),
;
上面代码中，我们看到，我们将每一个棋子定义了一个 DIV，使用了 CSS3 的 shadow，gradient
属性，并且可以根据棋盘的大小自动计算棋子的大小，另外，如果用户不喜欢黑白颜色，甚至可以定义成红黄颜色，女生和小朋友估计会喜欢。这 5
行代码是画一个棋子的方法，做一个简单的循环，就可以画出多个棋子，方法如下。
|
|
function
moreMan(array){for(var i=0;i
/* 绘制多个棋子
*/ |
处理事件
绘制完棋盘和棋子，我们来分析一下用户的动作。用户的动作无非就是两种，一种是点击棋盘 table，另外一种就是点击棋子 DIV。难点在点击 table
这里，我们要获知用户点击 table 的位置。
传统思路可能是这样，使用 event 方法，获得 x,y 的坐标，然后与 table 的左上角做减法，然后再跟单元格 cell
做除法。听起来都麻烦。
如果您仔细阅读了前面的代码，就应该发现，其实在画棋盘是，我们向 array 数组中 push 了一个 evt 方法，很明显，这个 evt
方法要返回一个字符串变量的，那么他的内容是什么呢？答案揭晓：
|
|
function
evt(i,j,width,height,left,top){
"+nameBak+"_"+i+"_"+j+"\" style=\"position:"+
;
原理是一个 DIV。对了，这个添加事件的方法非常特殊，实际上是在每个棋盘的交叉的地方画了一个 DIV，然后给 DIV 添加事件。
|
|
function
setClick(row,col,width,height){
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 行代码，把事件问题搞定了。
落子规则
| | | | |
