Posted on 2007-09-29 14:50
狂奔的蝸牛 閱讀(852)
評論(0) 編輯 收藏
前段時間利用閑暇之于自己做了個網絡象棋對戰平臺，它是基于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