——J2SE, J2EE

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

　　

　　

　　

　　

　　

　　

　　

　　

　　

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



本文转自

http://www.blogjava.net/dongfei/archive/2007/09/29/149576.html