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

2022-07-15 16:18:16 文档大全网 [ 字体：小中大 ] [ 阅读： ]

【#文档大全网# 导语】以下是®文档大全网的小编为您整理的《百行HTML 5代码实现四种双人对弈游戏(1)》，欢迎阅读！
百行,对弈,双人,代码,实现
百行HTML 5代码实现四种双人对弈游戏(1)

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

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

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

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

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

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

this.board=function(name,width,height,rowBak,colBak){*画棋盘* namenameBak=name; if( turnover ==name){row=8;col=8;}elseif( gogame ==name){row=18;col=18;} varaW=Math.floor(width(col+2)),aH=Math.floor(height(row+2)); minL=(aW aH?aH:aW)-4;这个减法很重要，否则填空时会把表格撑大 vararray=newArray( div > 上面代码中，最重要的是标黑体的第 6 行代码，这里面有两个诀窍，第一个就是 table 的定义，第二个就是使用了 Array 数组。为什么要使用数组，而不是定义一个字符串呢？答案是优化，就是 Array 数组的 push 方法的速度要远远快于 String 字符串的加 + 运算。共计 16 行代码，一个棋盘就画好了，当然这其中不仅仅是画线，还有棋子处理，事件定义等方法的调用，后面将陆续谈到。绘制棋子

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

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

functionman(width,height,id,colorBak){*画棋子* varcolor=colorBak==null?(order++%2==0? 000 : CCC ):colorBak; varr= border-radius: +width2+ px; varobj=id==null?event.srcElement:_$(id); obj.innerHTML= divid=\ man_ +color+ _ +order+ \ > 上面代码中，我们看到，我们将每一个棋子定义了一个 DIV，使用了 CSS3 的 shadow，gradient 属性，并且可以根据棋盘的大小自动计算棋子的大小，另外，如果用户不喜欢黑白颜色，甚至可以定义成红黄颜色，女生和小朋友估计会喜欢。这 5 行代码是画一个棋子的方法，做一个简单的循环，就可以画出多个棋子，方法如下。

functionmoreMan(array){for(vari=0;i array.length;i++) man(minL,minL,nameBak+ _ +array[i]);} *绘制多个棋子*

1 2 3 下一页查看全文

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

Microsoft SQL Server 2005技术内幕:T-SQL程序设 SQL Server 2005微软官方权威参考手册。

是Inside Microsoft SQL Server 2005系列书中的第一本，SQL Server类的顶尖之作。