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

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

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

　　基本步驟

　　1:第一步:采用html+css把棋盤給布局出來

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

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

　　繪制棋盤

　　棋盤是表格狀的,所以就采用table來布置棋盤.

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

　　html代碼如下:

　　1:插入表格:

　　2:css樣式代碼:

　　3:示例圖:

　　這樣就算把棋盤的格子都給畫出來,接下來我們得繪制星位.

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

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

　　要想設(shè)置坐標(biāo)我就得獲取到table標(biāo)簽然后以tr為y軸 td為x軸 來設(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)來設(shè)置ID 作為唯一標(biāo)識(shí)符

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

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

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

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

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

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

　　初始化棋盤

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