-
HTML code
-
< html > < head > < meta http-equiv ="Content-Type" content ="text/html;charset=utf-8" /> < title > 禅棋传说 </ title > < style type ="text/css" > div { position : absolute ; width : 23px ; height : 23px ; } .B0 { background-image : url('http://www.wtostar.com/go/B0.gif') ; } .B1 { background-image : url('http://www.wtostar.com/go/B1.gif') ; } .B2 { background-image : url('http://www.wtostar.com/go/B2.gif') ; } .B3 { background-image : url('http://www.wtostar.com/go/B3.gif') ; } .B4 { background-image : url('http://www.wtostar.com/go/B4.gif') ; } .B5 { background-image : url('http://www.wtostar.com/go/B5.gif') ; } .B6 { background-image : url('http://www.wtostar.com/go/B6.gif') ; } .B7 { background-image : url('http://www.wtostar.com/go/B7.gif') ; } .B8 { background-image : url('http://www.wtostar.com/go/B8.gif') ; } .BX { background-image : url('http://www.wtostar.com/go/BX.gif') ; } .D0 { background-image : url('http://www.wtostar.com/go/D0.gif') ; } .D1 { background-image : url('http://www.wtostar.com/go/D1.gif') ; } .C0 { background-image : url('http://www.wtostar.com/go/C0.gif') ; } .C1 { background-image : url('http://www.wtostar.com/go/C1.gif') ; } </ style > </ head > < body > < script type ="text/javascript" > // <![CDATA[ Array.prototype.indexOf = function (item) // 给数组扩展一个indexOf方法 { for ( var i = 0 ; i < this .length; i ++ ) if ( this [i] == item) return i; return - 1 ; }; var Site = // 定义一个棋位类 { Create: function (x, y) // 棋位类的构造函数 { var me = document.createElement( " div " ); // 建一个div对象，将其扩展并封装成棋位。 document.body.appendChild(me); // 附加到DOM树，实现棋位的呈现。 me.x = x; // 记录棋位的X坐标 me.y = y; // 记录棋位的Y坐标 me.style.left = x * 23 + " px " ; // 设置棋位水平方向的绝对位置 me.style.top = y * 23 + " px " ; // 设置棋位垂直方向的绝对位置 var s = ((x - 9 ) % 9 ? 0 :(x - 9 ) / 9)+1+(((y-9)%9?0:(y-9) / 9 ) + 1 ) * 3 ; // 计算并背景式样 me._backStyle = " B " + ((s == 4 && (x / 3)%2==1&&(y / 3 ) % 2 == 1 ) ? " X " : s); me.Fill = this .Fill; // 关联一个填充棋位的方法。 me.Tight = this .Tight; // 关联计算紧气方法。 me.Kill = this .Kill; // 关联计算死子方法。 me.onclick = this .Play; // 绑定onclick事件到Play方法。 me.Fill(); // 初始填充空子。 return me; // 返回棋位对象，其实是一个封装了的div对象。 }, Fill: function (dot, going) // 填充棋子的方法 { if ( dot == undefined ) this .className = this ._backStyle // 无子，就设置为背景式样。 else this .className = (going ? " C " : " D " ) + dot; this .dot = dot; // 保存棋子状态 }, Play: function () // 行棋方法，由onclick事件触发 { if ( this .dot == undefined ) // 无子 { var deads = this .Kill(current ^ 1 ); // 计算可以杀死的子 if (deads.length == 1 && this == rob) return ; // 打劫状态 for ( var i = 0 ; i < deads.length; i ++ ) deads[i].Fill(); if (i == 1 ) rob = deads[ 0 ] // 记录打劫位置 else if (i > 0 || ! this .Tight(current)) rob = null // 清打劫位 else return ; sound.play(); // 落子有声！ var step = Tracks[Tracks.length - 1 ]; if (step) step.site.Fill(step.site.dot); this .Fill(current, true ); // 填入当前该填的子 Tracks.push( new Step( this , deads) ); current ^= 1 ; // 用1来异或，正好反转黑白棋子。 }; // alert(Tracks[Tracks.length-1].Step()); }, Tight: function (dot) // 计算紧气的块 { var life = this .dot == undefined ? this : undefined; // 当前位无子则算一口气 dot = dot == undefined ? this .dot : dot; if (dot == undefined) return undefined; var block = this .dot == undefined ? [] : [ this ]; var i = this .dot == undefined ? 0 : 1 ; var site = this ; while ( true ) { for ( var dx =- 1 ;dx <= 1 ;dx ++ ) for ( var dy =- 1 ;dy <= 1 ;dy ++ ) if ( ! dx ^! dy) { link = GetSite(site.x + dx, site.y + dy); if (link) // 有位 if (link.dot != undefined) // 有子 { if (link.dot == dot && block.indexOf(link) < 0 ) block.push(link); } else if ( ! life) life = link else if (life != link) return undefined; // 如果有两口气以上则无须再算 }; if ( i >= block.length) break ; site = block[i]; i ++ ; }; return block; // 返回只有一口气的块 }, Kill: function (dot) // 计算杀死的子 { var deads = []; for ( var dx =- 1 ;dx <= 1 ;dx ++ ) for ( var dy =- 1 ;dy <= 1 ;dy ++ ) if ( ! dx ^! dy) { var site = GetSite( this .x + dx, this .y + dy); if (site && (site.dot == dot)) { var block = site.Tight(); if (block) deads = deads.concat(block); }; }; return deads; // 返回可以提子的死子块 } }; var Board = new Array( 19 ); // 全局的Board数组，表示棋盘。 var Tracks = []; // 行棋线索数组，数组元素是Step对象。 var current = 0 ; // 当前要下的子，0表示黑子，1表示白子，互相交替。 var rob = null ; // 如果有打劫时，记录打劫位置。 for ( var x = 0 ; x < 19 ; x ++ ) { Board[x] = new Array( 19 ); for ( var y = 0 ; y < 19 ; y ++ ) Board[x][y] = Site.Create(x, y); // 按位置创建棋位对象。 }; if (navigator.userAgent.indexOf( ' MSIE ' ) > - 1 ) // 为IE浏览器构造声音对象 { var sound = document.body.appendChild(document.createElement( " bgsound " )); sound.play = function (){ this .src = " http://www.wtostar.com/go/play.wav " }; } else // 为Firefox等其他浏览器构造声音对象 { var sound = document.body.appendChild(document.createElement( " span " )); sound.play = function () { this .innerHTML = " <bgsound src='http://www.wtostar.com/go/play.wav'> " }; }; document.body.oncontextmenu = function () // 悔棋事件 { var step = Tracks.pop(); if (step) { step.site.Fill(); for ( var i = 0 ; i < step.deads.length; i ++ ) step.deads[i].Fill(current); step = Tracks[Tracks.length - 1 ]; if (step) step.site.Fill(current, true ) current ^= 1 ; // 反转黑白棋子。 }; return false ; // 不弹出菜单。 }; function GetSite(x, y) // 从棋盘取棋位的函数，越界不抛出异常。 { if (x >= 0 && x < 19 && y >= 0 && y < 19 ) return Board[x][y]; }; function Step(site, deads) // 棋步类，记录每一步棋的状态 { this .site = site; // 记录棋步的位置 this .deads = deads; // 记录被当前棋步杀死的棋子集合 }; // ]]> </ script > </ body > </ html >
呵呵，挺好的
主要思路就是修改className的背景图片
下棋的背景是
.D0 { background-image: url('http://www.wtostar.com/go/D0.gif'); }
.D1 { background-image: url('http://www.wtostar.com/go/D1.gif'); }
.C0 { background-image: url('http://www.wtostar.com/go/C0.gif'); }
.C1 { background-image: url('http://www.wtostar.com/go/C1.gif'); }
方法中主要是Play方法，中间调用Fill方法
-
JScript code
-
Fill: function (dot, going) // 填充棋子的方法 { if ( dot == undefined ) this .className = this ._backStyle // 无子，就设置为背景式样。这里是初始化的背景 else this .className = (going ? " C " : " D " ) + dot; // 这里是下棋一下黑一下白 dot则是是不是新子 this .dot = dot; // 保存棋子状态 }, Play: function () // 行棋方法，由onclick事件触发 { if ( this .dot == undefined ) // 无子 { var deads = this .Kill(current ^ 1 ); // 计算可以杀死的子 if (deads.length == 1 && this == rob) return ; // 打劫状态 for ( var i = 0 ; i < deads.length; i ++ ) deads[i].Fill(); if (i == 1 ) rob = deads[ 0 ] // 记录打劫位置 else if (i > 0 || ! this .Tight(current)) rob = null // 清打劫位 else return ; sound.play(); // 落子有声！ var step = Tracks[Tracks.length - 1 ]; if (step) step.site.Fill(step.site.dot); this .Fill(current, true ); // 填入当前该填的子 //这部分是下棋的主要部分 Tracks.push( new Step( this , deads) ); current ^= 1 ; // 用1来异或，正好反转黑白棋子。 }; // alert(Tracks[Tracks.length-1].Step()); },
http://topic.csdn.net/u/20081008/10/2ee35586-d069-4987-ad0b-ad40aa8eb9e6.html?seed=1216520949
扫一扫
1315
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
