Week 7: 課程紀實 (2006/11/02): 8-Puzzle Using Top & Left

本週的課程主題同樣是 8-puzzle 程式實作, 接續上週的討論, 繼續完成遊戲。由於同學們的進度快慢不一, 因此我們今天的策略是讓進度快的同學上台分享他對整個程式設計的構想與如何完成實作。



課程一開始是由 博欽 開始分享, 然後是 柏盛。 為了達到移動分割後小圖片的目的, 博欽用上星期所教的 TCanvas::CopyRect method; 柏盛則是用 TPicture::TBitMap::Assign method 的方式。

至於如何判斷空白的位置, 博欽使用了一個變數來儲存, 柏盛則是用來一個陣列 ImageFlag[3][3] 的方式來記錄。



最後, 黃老師比較了各種不同的方式, 點出差異點在哪, 而不是直接評論哪個方法較好... 希望同學都能夠用自己的方式思考、實作、找出問題、解決問題、然後分享。



在第三堂課, 我則是示範了我的方式, 直接將影像物件的位置移動, 而不去改變影像內容。換句話說, 就是直接改變 Top 與 Left 兩個屬性值。每一張小影像我分別用 im00, im01, im02, im20, ... im22 來表示。im22 設定為空的影像, 把其 Visible 屬性設定為 true, 然後將 im22->Top 與 im22->Left 分別用 iEmptyTop 與 iEmptyLeft 紀錄之。

當每一張小影像被滑鼠 Click 時, 則啟動 OnClick 事件處理程序: 判斷空格是否在旁邊, 如果在旁邊, 則該影像的位置與 iEmptyTop 與 iEmptyLeft 值交換。如果不在旁邊則不做任何處理。

假設我們用 iDeltaTop 與 iDeltaLeft 來記錄某個影像與空影像的差距。所以,
iDeltaTop = abs(im00->Top - iEmptyTop);
iDeltaLeft = abs(im00->Top - iEmptyLeft);

有了這個差值, 我們就很容易用下列式子來判斷 im00 這張影像是否在空格的旁邊,
if ((iDeltaTop==0)&&(iDeltaLeft==100) || (iDeltaTop==100)&&(iDeltaLeft==0))

每一張小影像的大小為 99*99, 加上白色分隔線, 所以相鄰小影像的距離為100, 相鄰的兩張小影像, 至少必須再同一排, 或是同一列, 所以必須有一個差值為 0。

至於兩個數值要互換, 只要用一個 iTemp 即可。同學應該是沒問題的！