五子棋棋盤javascript實例作品

五子棋棋盤javascript實例作品

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

　　基本步驟

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

　　2:第二步:使用javascript來給棋盤設置坐標

　　3:第三步:使用javascript來設置星位

　　繪制棋盤

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

　　此棋盤規(guī)格是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: 表示星位圖標

　　初始化棋盤

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