五子棋棋盘javascript实例作品

五子棋棋盘javascript实例作品

学习啦在线学习网 　　做一个五子棋游戏,可是对我这javascript菜鸟来说 一来就搞个这么大的东西有点吃不下来.所以我决定把它分解分解.先从做五子棋棋盘开始;下面是有五子棋棋盘 javascript实例，欢迎参阅。

　　基本步骤

　　1:第一步:采用html+css把棋盘给布局出来

　　2:第二步:使用javascript来给棋盘设置坐标

　　3:第三步:使用javascript来设置星位

　　绘制棋盘

　　棋盘是表格状的,所以就采用table来布置棋盘.

　　此棋盘规格是15x15的,所以行列就设置成:15,15

　　html代码如下:

　　1:插入表格:

　　2:css样式代码:

　　3:示例图:

学习啦在线学习网 　　这样就算把棋盘的格子都给画出来,接下来我们得绘制星位.

　　标识棋盘坐标

　　以图左上角为起来坐标(0,0)标识棋盘坐标:(0,0)(0,1)....(14,14)

学习啦在线学习网 　　要想设置坐标我就得获取到table标签然后以tr为y轴 td为x轴 来设置坐标.

　　代码如下:

学习啦在线学习网 　　this.obj:获取table

学习啦在线学习网 　　this.obj.children[0]:获取tbody

　　this.obj.children[0].children:获取tr 设置y轴坐标

　　tr.children[n] : 获取td 设置x轴坐标

　　td.id : 使用(x,y)坐标来设置ID 作为唯一标识符

　　标识星位

　　1:以图左上角为起来坐标(0,0)来确定星位点坐标:

学习啦在线学习网 　　左上:3,3 左下 :3,11 右上 :11,3 右下:11,11,中间:7,7

学习啦在线学习网 　　2:id唯一标识符来做到星位点然后绘制星位:

　　document.getElementById( zuoBiao[i] ) : 获取星位

　　img/dian.png: 表示星位图标

　　初始化棋盘

学习啦在线学习网 　　初始化棋盘后你可以看到五子棋棋盘已经做好了.如图: