|
本程序?qū)崿F(xiàn)的功能為本地二人對弈中國象棋，實現(xiàn)語言為javascript+VML，在windows 2000 pro+IE 6sp1的環(huán)境下測試通過。
程序默認(rèn)的起始顏色為紅色，只有執(zhí)紅色一方可以先走棋，雙方輪流下棋，老將被吃則認(rèn)為輸棋，棋局結(jié)束，可以通過刷新頁面重新開始。
下棋的時候，點擊要走的棋子，將顯示當(dāng)前可走位置（小矩形）和可吃位置（加上紅色框標(biāo)記），然后點擊對應(yīng)位置即可走棋。如果要改選其他棋子，直接點擊即可。
程序的演示地址：
http://island.vip14.dig86.com/chess/chess.htm
設(shè)計概述：
在一個復(fù)雜的、有界面、有交互的程序中，將控制模塊與表現(xiàn)模塊區(qū)分，分別編寫是很有效的做法。這樣能夠使對界面、運算等的操作集中統(tǒng)一，便于修改與測試。
在整體設(shè)計上，本程序采用了將判斷可行位置算法下放的做法。傳統(tǒng)的象棋程序一般先取得欲移動棋子類型，然后由統(tǒng)一的算法判斷目標(biāo)位置是否可行。本程序把判斷目標(biāo)位置是否合法的方法下放到棋子，控制模塊在判斷當(dāng)前走法合法性的時候，取得這個棋子對象，并且調(diào)用此對象的canGo方法來判斷目標(biāo)位置是否可行，這種做法比較有利于讓程序充分體現(xiàn)面向?qū)ο筇匦浴?BR>
棋盤單獨作為一個模塊實現(xiàn)，它具有一定規(guī)模，且實現(xiàn)了一個針對性比較強的功能，因此將它與其他模塊隔離，單獨編寫。這個模塊的主要事件集中在圖形化效果的表現(xiàn)，同時也應(yīng)當(dāng)主意結(jié)構(gòu)的層次性和合理性，并且應(yīng)當(dāng)向外界提供所生成棋盤的引用，讓控制模塊可以將棋子掛接在這個根元素上。
棋子本質(zhì)為div對象，包含了一個圖標(biāo)文件，并且具有附加屬性，如：顏色、種類、位置等。各種棋子有不少相似屬性，但是具體差別還是不小，比如各棋子的判斷可行位置走法。因此，先編寫一個具有普遍性的棋子模塊，擁有棋子的基本屬性：坐標(biāo)、圖標(biāo)、當(dāng)前是否被攻擊等情況，然后分別對于每種棋子，創(chuàng)建單獨的模塊。這個過程中采用了一種“偽繼承”技術(shù)：在單獨的棋子模塊中，創(chuàng)建了一個通用的棋子變量，并且對它附加了一個canGo方法，然后，把這個棋子變量作為自己的創(chuàng)建結(jié)果返回出去。
為什么稱這個為“偽繼承”呢？很明顯，js并不支持繼承，而且，繼承的實現(xiàn)方法并非如此。但是，我們做了繼承所做的事情，即為父類型的對象添加了屬性、方法，因此擴展了它的屬性和方法，并且，最后將擴展完成的對象當(dāng)作自己構(gòu)造出來的對象返回出去，使得結(jié)果對象除了具有父對象的屬性、方法，還擁有自己特有的屬性及方法，因此，我們可以說這是某種形式的繼承。
在程序中建立了一個全局二維數(shù)組situation用于保存棋子列表，各棋子對象存放其自身坐標(biāo)等信息，還定義了各常量用于標(biāo)記棋子顏色、種類等通用信息。
程序中所使用的資源文件有棋子圖標(biāo)及標(biāo)記可走位置的圖標(biāo)。棋盤為VML代碼繪制，各棋子分別置于單個div中，由一個外部的HTC文件控制其行為。這個HTC做了這樣的事情：在點擊當(dāng)前棋子所在的div時，HTC中的check函數(shù)對當(dāng)前點擊對象進(jìn)行處理，決定應(yīng)當(dāng)走棋或者其他操作。
在點擊棋子時，將根據(jù)遍歷棋盤坐標(biāo)代入該棋子canGo方法的結(jié)果，取得可以移動的位置。如果這些位置當(dāng)前沒有棋子，則認(rèn)為是可走位置，在對應(yīng)位置產(chǎn)生一個Blank對象，放置一個提示圖標(biāo)。Blank對象同樣是棋子模塊的偽繼承，它沒有canGo方法，只保存了基本屬性，專門用于標(biāo)志可走位置。如果這些位置當(dāng)前存在棋子，并且棋子的顏色與自身不同，則認(rèn)為是可吃位置，將對應(yīng)棋子加上紅色邊框標(biāo)記，同時將其beAttack屬性設(shè)為真。這樣，走棋的時候即可據(jù)此判斷。
走棋后，程序需要清除以前那些過期的標(biāo)記，這是通過一個遍歷實現(xiàn)的，從棋盤中檢索到灰色對象，即認(rèn)為它是標(biāo)記，直接清除。另外，吃子的實現(xiàn)比較復(fù)雜，反復(fù)嘗試replaceChild方法以后放棄了，因為遇到意想不到的問題，所以通過遍歷檢索來取代被吃棋子。這個步驟似乎可能有比較簡便的實現(xiàn)方法，希望高手指教。
附記：很久以前，在51js論壇看見幻宇前輩的js版星際，就產(chǎn)生做這個象棋的念頭，然后花一個小時參考美洲豹的VML教程寫了棋盤，卻因為各種原因擱置了。這次重新?lián)炱饋恚艘惶彀霑r間寫了其他所有部分，測試了一會，沒發(fā)現(xiàn)bug，先發(fā)布出來，給大家玩玩。有興趣的朋友可以繼續(xù)做，做成能夠聯(lián)機的版本，不是很難。此外，我暫時有一個部分沒有設(shè)計，就是老將見面的判斷，有空補上，hoho�；镜恼f明就先寫這么多，以后慢慢把各部分代碼加上注釋，發(fā)在這里，大家不要著急啊。
出處：藍(lán)色理想
責(zé)任編輯：紅色黑客
◎進(jìn)入論壇網(wǎng)頁制作、網(wǎng)站綜合版塊參加討論
|
