五子棋棋盤javascript實(shí)例作品
五子棋棋盤ja
做一個(gè)五子棋游戲,可是對(duì)我這javascript菜鳥來(lái)說(shuō) 一來(lái)就搞個(gè)這么大的東西有點(diǎn)吃不下來(lái).所以我決定把它分解分解.先從做五子棋棋盤開始;下面是有五子棋棋盤 javascript實(shí)例,歡迎參閱。
基本步驟
1:第一步:采用html+css把棋盤給布局出來(lái)
2:第二步:使用javascript來(lái)給棋盤設(shè)置坐標(biāo)
3:第三步:使用javascript來(lái)設(shè)置星位
繪制棋盤
棋盤是表格狀的,所以就采用table來(lái)布置棋盤.
此棋盤規(guī)格是15x15的,所以行列就設(shè)置成:15,15
html代碼如下:
1:插入表格:
2:css樣式代碼:
3:示例圖:
這樣就算把棋盤的格子都給畫出來(lái),接下來(lái)我們得繪制星位.
標(biāo)識(shí)棋盤坐標(biāo)
以圖左上角為起來(lái)坐標(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軸 來(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)
初始化棋盤
初始化棋盤后你可以看到五子棋棋盤已經(jīng)做好了.如圖:
看過(guò)五子棋棋盤 javascript實(shí)例的人還看了: