五子棋棋盘 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: 表示星位图标

初始化棋盘

初始化棋盘后你可以看到五子棋棋盘已经做好了.如图: