html5五子棋-html5游戏开发教程 实战五子棋 四连棋 象棋 逆转棋 四种棋类游戏

也想出现在这里？点击联系我~

立即下单

进入商城

进不了网站？换个网络试试！

代码下载地址：

原文：html5游戏开发教程实战：五子棋、五子棋、围棋、逆棋四种棋类游戏，仅100行代码

这篇文章是一个非常有挑战性的编程，因为100行代码，大约10000个字符，将实现四种单人象棋游戏：国际象棋、双陆棋、四连棋、翻转棋。 请注意，这四款棋局并不是中级程序员的作品，而是有棋盘、三维棋子、事件、棋规判断、胜负判定的完整棋局。 它们可以离线存储在 iPad 和 Android 平板电脑上。 试想一下，将这些游戏下载到平板电脑上，你就可以在火车、旅游公园等没有信号的地方下棋。 它是否扩展了您的平板电脑和笔记本电脑的功能？ 这不是一件很悠闲的事情吗？ 而且，关键是，这个程序没有图片，不需要去应用商店付费下载。 它只是用 HTML5 技术编写的 100 行代码。 绝对是目前最简洁紧凑的单人棋牌游戏源码。 （编者注：由于网页代码长度有限，作者源码进行了一些换行处理，特此说明。）

目标

要做一个完整的单人象棋游戏，至少要做好以下几件事，第一步：勾勒出棋盘。 不同的棋盘是不同的，这个需要动态处理； 第二步：勾勒棋子轮廓。 需要注意的是，国际象棋、五子棋等棋子都是圆形的。 请不要担心图片。 HTML5时代，我们可以用代码实现三维方形棋子； 第三步：确定棋子的摆放位置。 其实就是要定位右手的点击位置。 这四种棋中，有的落在盒子上，有的落在纵横棋盘的十字线上html5五子棋，需要动态处理； 第四步：确定放置规则。 玩游戏是有规则的。 不要仅仅因为代码很少而忽视规则。 否则，程序就会不成熟，成为年轻学生的玩具； 第五步：确定胜者或败者。 最后，我们必须决定是赢还是输。 也就是说，数棋子必须由程序来完成html5五子棋，因为游戏总是需要裁判； 第六步：在平板电脑和笔记本电脑时代，我们必须实现离线应用。 这一点非常重要，不然的话，如果你连接网线在台式笔记本电脑上玩游戏，早就满地都是游戏了。 写得再好又有什么用呢？ 只有在没有信号的地方才有联通的市场。 现在有很多平板电脑和智能手机。 在没有网络信号的地方拿出联通设备玩游戏是一件很棒的事情。

画出棋盘轮廓

有人说，国际象棋、五子棋、四连棋、逆棋的棋盘并不相同，国际象棋纵横各有18格，其他三种国际象棋都有8格。 因此，需要有参数来勾画棋盘。 这是小问题，大问题是，选择哪种方式来勾画板？

HTML5框架下，至少有三种方式：第一种是使用Canvas画线； 第二种是使用DIV，用CSS3降低行和列属性； 第三是使用表格标签。

哪一个最快并且代码更少？ 答案是：第三种。 有点沮丧，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("");        for(var j=0;j<col;j++){array.push(""+  evt(i,j,minL,minL,aW*j+minL/2+8,aH*i+minL/2)+"");}        if(nameBak!="four"&&nameBak!="turnover")/* 将事件添加到表格中 */              array.push(evt(i,col,minL,minL,aW*col+minL/2+8,aH*i+minL/2));              array.push("</tr