网络象棋之一（构建棋盘）

前段时间利用闲暇之于自己做了个网络象棋对战平台，它是基于B/S结构的网络应用。
主要利用了javascript, DWR(AJAX框架)技术。我将会陆续用几个贴来介绍这个对战平台是如何实现的。
首先来介绍我是如何构建棋盘的。
棋盘一共分这三层，第一层是棋盘，第二层为网格，第三层为棋子。用DIV标签来表明他们的层次关系。
HTML代码如下：

< div  id ="chessboard" >
     < div  id ="grid_0_0" >< div  id ="zhu_0_0" ></ div ></ div >
     < div  id ="grid_0_1" >< div  id ="ma_0_0" ></ div ></ div >
     < div  id ="grid_0_2" >< div  id ="xiang_0_0" ></ div ></ div >
     < div  id ="grid_0_3" >< div  id ="shi_0_0" ></ div ></ div >
     < div  id ="grid_0_4" >< div  id ="shuai_0_0" ></ div ></ div >
     < div  id ="grid_0_5" >< div  id ="shi_0_1" ></ div ></ div >
     < div  id ="grid_0_6" >< div  id ="xiang_0_1" ></ div ></ div >
     < div  id ="grid_0_7" >< div  id ="ma_0_1" ></ div ></ div >
     < div  id ="grid_0_8" >< div  id ="zhu_0_1" ></ div ></ div >
    
     < div  id ="grid_1_0" ></ div >
     < div  id ="grid_1_1" ></ div >
     < div  id ="grid_1_2" ></ div >
     < div  id ="grid_1_3" ></ div >
     < div  id ="grid_1_4" ></ div >
     < div  id ="grid_1_5" ></ div >
     < div  id ="grid_1_6" ></ div >
     < div  id ="grid_1_7" ></ div >
     < div  id ="grid_1_8" ></ div >
    
     < div  id ="grid_2_0" ></ div >
     < div  id ="grid_2_1" >< div  id ="pao_0_0" ></ div ></ div >
     < div  id ="grid_2_2" ></ div >
     < div  id ="grid_2_3" ></ div >
     < div  id ="grid_2_4" ></ div >
     < div  id ="grid_2_5" ></ div >
     < div  id ="grid_2_6" ></ div >
     < div  id ="grid_2_7" >< div  id ="pao_0_1" ></ div ></ div >
     < div  id ="grid_2_8" ></ div >
    
     < div  id ="grid_3_0" >< div  id ="bing_0_0" ></ div ></ div >
     < div  id ="grid_3_1" ></ div >
     < div  id ="grid_3_2" >< div  id ="bing_0_1" ></ div ></ div >
     < div  id ="grid_3_3" ></ div >
     < div  id ="grid_3_4" >< div  id ="bing_0_2" ></ div ></ div >
     < div  id ="grid_3_5" ></ div >
     < div  id ="grid_3_6" >< div  id ="bing_0_3" ></ div ></ div >
     < div  id ="grid_3_7" ></ div >
     < div  id ="grid_3_8" >< div  id ="bing_0_4" ></ div ></ div >
    
     < div  id ="grid_4_0" ></ div >
     < div  id ="grid_4_1" ></ div >
     < div  id ="grid_4_2" ></ div >
     < div  id ="grid_4_3" ></ div >
     < div  id ="grid_4_4" ></ div >
     < div  id ="grid_4_5" ></ div >
     < div  id ="grid_4_6" ></ div >
     < div  id ="grid_4_7" ></ div >
     < div  id ="grid_4_8" ></ div >
    
     < div  id ="grid_5_0" ></ div >
     < div  id ="grid_5_1" ></ div >
     < div  id ="grid_5_2" ></ div >
     < div  id ="grid_5_3" ></ div >
     < div  id ="grid_5_4" ></ div >
     < div  id ="grid_5_5" ></ div >
     < div  id ="grid_5_6" ></ div >
     < div  id ="grid_5_7" ></ div >
     < div  id ="grid_5_8" ></ div >
    
     < div  id ="grid_6_0" >< div  id ="zu_1_0" ></ div ></ div >
     < div  id ="grid_6_1" ></ div >
     < div  id ="grid_6_2" >< div  id ="zu_1_1" ></ div ></ div >
     < div  id ="grid_6_3" ></ div >
     < div  id ="grid_6_4" >< div  id ="zu_1_2" ></ div ></ div >
     < div  id ="grid_6_5" ></ div >
     < div  id ="grid_6_6" >< div  id ="zu_1_3" ></ div ></ div >
     < div  id ="grid_6_7" ></ div >
     < div  id ="grid_6_8" >< div  id ="zu_1_4" ></ div ></ div >
    
     < div  id ="grid_7_0" ></ div >
     < div  id ="grid_7_1" >< div  id ="pao_1_0" ></ div ></ div >
     < div  id ="grid_7_2" ></ div >
     < div  id ="grid_7_3" ></ div >
     < div  id ="grid_7_4" ></ div >
     < div  id ="grid_7_5" ></ div >
     < div  id ="grid_7_6" ></ div >
     < div  id ="grid_7_7" >< div  id ="pao_1_1" ></ div ></ div >
     < div  id ="grid_7_8" ></ div >
    
     < div  id ="grid_8_0" ></ div >
     < div  id ="grid_8_1" ></ div >
     < div  id ="grid_8_2" ></ div >
     < div  id ="grid_8_3" ></ div >
     < div  id ="grid_8_4" ></ div >
     < div  id ="grid_8_5" ></ div >
     < div  id ="grid_8_6" ></ div >
     < div  id ="grid_8_7" ></ div >
     < div  id ="grid_8_8" ></ div >
    
     < div  id ="grid_9_0" >< div  id ="zhu_1_0" ></ div ></ div >
     < div  id ="grid_9_1" >< div  id ="ma_1_0" ></ div ></ div >
     < div  id ="grid_9_2" >< div  id ="xiang_1_0" ></ div ></ div >
     < div  id ="grid_9_3" >< div  id ="shi_1_0" ></ div ></ div >
     < div  id ="grid_9_4" >< div  id ="jiang_1_0" ></ div ></ div >
     < div  id ="grid_9_5" >< div  id ="shi_1_1" ></ div ></ div >
     < div  id ="grid_9_6" >< div  id ="xiang_1_1" ></ div ></ div >
     < div  id ="grid_9_7" >< div  id ="ma_1_1" ></ div ></ div >
     < div  id ="grid_9_8" >< div  id ="zhu_1_1" ></ div ></ div >
    
</ div >

加入这些网页元素后，我们再来给他们添加效果，也就是那些象棋的图案。这些代码都是在网页载入时加载的。
代码如下：

#chessboard {
    position : absolute ;
    left : 20px ;
    top : 20px ;
    width : 495px ;
    height : 550px ;
    z-index : 1 ;
    background-image :  url("../images/chessboard.jpg") ;     //棋盘图片
}
#zhu_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_zhu.gif") ;         //棋子图片
}
#zhu_0_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_zhu.gif") ;
}
#ma_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_ma.gif") ;
}
#ma_0_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_ma.gif") ;
}
#xiang_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_xiang.gif") ;
}
#xiang_0_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_xiang.gif") ;
}
#shi_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_shi.gif") ;
}
#shi_0_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_shi.gif") ;
}
#shuai_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_shuai.gif") ;
}
#pao_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_pao.gif") ;
}
#pao_0_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_pao.gif") ;
}
#bing_0_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_bing.gif") ;
}
#bing_0_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_bing.gif") ;
}
#bing_0_2 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_bing.gif") ;
}
#bing_0_3 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_bing.gif") ;
}
#bing_0_4 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/red_bing.gif") ;
}
#zu_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zu.gif") ;
}
#zu_1_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zu.gif") ;
}
#zu_1_2 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zu.gif") ;
}
#zu_1_3 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zu.gif") ;
}
#zu_1_4 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zu.gif") ;
}
#pao_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_pao.gif") ;
}
#pao_1_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_pao.gif") ;
}
#zhu_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zhu.gif") ;
}
#zhu_1_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_zhu.gif") ;
}
#ma_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_ma.gif") ;
}
#ma_1_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_ma.gif") ;
}
#xiang_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_xiang.gif") ;
}
#xiang_1_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_xiang.gif") ;
}
#shi_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_shi.gif") ;
}
#shi_1_1 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_shi.gif") ;
}
#jiang_1_0 {
    position : absolute ;
    left : 0px ;
    top : 0px ;
    width : 55px ;
    height : 55px ;
    z_index : 3 ;
    background-image :  url("../images/black_jiang.gif") ;
}

// 调整网格的位置
// 如果构建表格直接用CSS效果会更好些,但用js控制更省力。
function  createGridStyle(){
     var  divObj  =   null ;
     var  top  =   null ;
     var  left  =   null ;
     for (row  =   0 ; row  <   10 ; row ++ ){
         for (col  =   0 ; col  <   9 ; col ++ ){
            divObj  =  document.getElementById( " grid_ " + row + " _ " + col);
            top  =  row  *   55 ;
            left  =  col  *   55 ;
            divObj.style.position = " absolute " ;
            divObj.style.top = top;
            divObj.style.left = left;
            divObj.style.width = 55 ;
            divObj.style.height = 55 ;
            divObj.style.zIndex = 2 ;
        }
    }
}

在页面的未尾调用此javascript函数。
<script type="text/javascript">
createGridStyle();
</script>

这样整个棋盘就做好了。加载页面后整个棋盘就会展现在你的眼前。
图片文件连接:http://myspace.kilu.de/images.rar