五子棋棋盤(pán)javascript實(shí)例作品

　　做一個(gè)五子棋游戲,可是對(duì)我這javascript菜鳥(niǎo)來(lái)說(shuō) 一來(lái)就搞個(gè)這么大的東西有點(diǎn)吃不下來(lái).所以我決定把它分解分解.先從做五子棋棋盤(pán)開(kāi)始;下面是有五子棋棋盤(pán) javascript實(shí)例，歡迎參閱。

　　基本步驟

　　1:第一步:采用html+css把棋盤(pán)給布局出來(lái)

　　2:第二步:使用javascript來(lái)給棋盤(pán)設(shè)置坐標(biāo)

　　3:第三步:使用javascript來(lái)設(shè)置星位

　　繪制棋盤(pán)

　　棋盤(pán)是表格狀的,所以就采用table來(lái)布置棋盤(pán).

　　此棋盤(pán)規(guī)格是15x15的,所以行列就設(shè)置成:15,15

　　html代碼如下:

　　1:插入表格:

　　2:css樣式代碼:

　　3:示例圖:

　　這樣就算把棋盤(pán)的格子都給畫(huà)出來(lái),接下來(lái)我們得繪制星位.

　　標(biāo)識(shí)棋盤(pán)坐標(biāo)

　　以圖左上角為起來(lái)坐標(biāo)(0,0)標(biāo)識(shí)棋盤(pán)坐標(biāo):(0,0)(0,1)....(14,14)

　　要想設(shè)置坐標(biāo)我就得獲取到table標(biāo)簽然后以tr為y軸 td為x軸 來(lái)設(shè)置坐標(biāo).

　　代碼如下:

　　this.obj:獲取table

　　this.obj.children[0]:獲取tbody

　　this.obj.children[0].children:獲取tr 設(shè)置y軸坐標(biāo)

　　tr.children[n] : 獲取td 設(shè)置x軸坐標(biāo)

　　td.id : 使用(x,y)坐標(biāo)來(lái)設(shè)置ID 作為唯一標(biāo)識(shí)符

　　標(biāo)識(shí)星位

　　1:以圖左上角為起來(lái)坐標(biāo)(0,0)來(lái)確定星位點(diǎn)坐標(biāo):

　　左上:3,3 左下 :3,11 右上 :11,3 右下:11,11,中間:7,7

　　2:id唯一標(biāo)識(shí)符來(lái)做到星位點(diǎn)然后繪制星位:

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

　　img/dian.png: 表示星位圖標(biāo)

　　初始化棋盤(pán)

　　初始化棋盤(pán)后你可以看到五子棋棋盤(pán)已經(jīng)做好了.如圖: