Posted on 2007-09-29 14:50
狂奔的蜗牛 阅读(832)
评论(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