当前位置: 首页 > 图文教程 > 网络编程 > Javascript > JQuery 国际象棋棋盘 实现代码

Javascript
对YUI扩展的Gird组件 Part-1
xtree.js 代码
newxtree.js代码
jQuery使用手册之一
jQuery使用手册之二 DOM操作
Javascript中eval函数的详细用法与说明
JavaScript 中的事件教程
JavaScript初级教程(第二课)
JavaScript初级教程(第三课)
JavaScript初级教程(第四课)
JavaScript初级教程(第五课)
诘屈聱牙之javascript中国象棋
filemanage功能中用到的common.js
filemanage功能中用到的lib.js
Javascript中eval函数的使用方法与示例
用javascript控制iframe滚动的代码
总结两个Javascript的哈稀对象的一些编程技巧
疯掉了,尽然有js写的操作系统
用javascript实现select的美化的方法
javascript+dom树型菜单类,希望朋友们一起进步

Javascript 中的 JQuery 国际象棋棋盘 实现代码


出处:互联网   整理: 软晨网(RuanChen.com)   发布: 2009-09-12   浏览: 390 ::
收藏到网摘: n/a

前些时候为了熟悉国际象棋的各种开局,随手写了一个很简单的国际象棋棋盘(实在找不到现成的)。 当时没觉得有什么,今天回头看看,觉得还有点意思,拿来给大家鉴定一下。
首先要实现棋子的排布,这毫无疑问得用div+css了。
具体代码可以看Jquery做的国际象棋棋盘(查看源代码) 。
一开始我给每种棋子都写了类,实际上这是比较愚蠢的行为。首先,这样子css代码会有冗余。其次,在棋子div上绑定侦听器时会比较麻烦,要判断是否棋子div时,我不得不靠类名中的-b和-w后缀来判断是否棋子。但是如果我们将棋子的共同属性提取出来专设一个类qizi,那么这两个问题都可以迎刃而解。
在代码中我特意没有将之前的代码去掉,你可以在注释的代码中看到。为了让黑棋和白旗都可以移动,我不得不把一个方法写上两边,你看,这就是没有进行足够的抽象化的后果。
接下来就是实现拖动了,关于这个,大家可以参考
打包下载地址
内容来自:http://buhutuu.cn/?p=783