Week 9: 8-puzzle Game!

1. 8-puzzle 程式撰寫討論

2. Honda 程式講解: 寶石方塊

3. 指定閱讀(一): Chapter 7 串流多媒體

4. 指定閱讀(二): 數位時代雜誌, N0. 162, 2007/11月, pp 186-187.
　 Joost 即將面臨重大挑戰
　 The Clock is Ticking for Joost, by Erick Schonfed

4. [ 注意 ] 請同學撰寫一份期中報告, 繳交至 Homework Show @ DMC, 內容為描述自己在本課程前半學期的學習情形, 回顧自己哪方面表現不錯? 哪方面需要加強? 老師應加強哪些課程內容? 最後, 給自己的學習打成績。第 11 週課程我們將進行課程期中回顧。

W08: Initialize a new 8-puzzle Game!

1. 指定閱讀提問探討:

　　動畫欣賞: Cubic Tragedy

2. 討論 8-Puzzle Game
　a. 狀態表示方式 (state representation)
　a. 搜尋演算法 (state space search)
　b. 遊戲初始打亂演算法 (initialization)

　請在 Homework Show @ DMC 中討論你的程式是如何表示目前遊戲進行狀態的, 當你用滑鼠移動一步時, 你的程式又是如何進行調整的。

3. 本週指定閱讀: Chapter 6 網頁多媒體
　

Week 6: 視訊媒體

1. 指定閱讀提問討論

2. C++ Builder 程式實作練習: 8-Puzzle 影像切割與複製
　a. TRect type
　b. CopyRect Method

　Image1->Canvas->CopyRect(rtDest, OriginalImage->Canvas, rtOIRect);

　程式作業要求: 請完成開啟一張影像檔, 並將其切割成 8-Puzzle 區塊。請於 Homework Show @ DMC 中展示程式執行結果, 並撰寫遭遇的困難與心得。

3. 本週指定閱讀: Chapter 5 動畫媒體, 請將閱讀問題寫到 Homework Show @ DMC 中。提問方式

4. Note: 下週會使用 學習分享系統 進行學生互評, 同學於 Homework Show @ DMC 繳交完作業後, 立刻到 學習分享系統 登錄作業網址。本次互評將列入成績計算, 佔總成績 10%。以排序計算成績, 第一名拿 10 分, 最後一名拿 0 分。缺課或遲到者一律 0 分。

　

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 即可。同學應該是沒問題的！
　　

Week 6: 課程紀實 (2006/10/26): TCanvas::CopyRect

今天的課程是延續上週 8-puzzle 控制介面實作 的題目, 同學回家思考後, 在課堂上白板寫下的問題集中在程式開發的前半段。




因此, 今天的課程重點在於:
1. 如何將影像內容複製到另外其他影像之中。
2. 如何讓一個影像物件移動。

我在課堂上當場寫了以下這個示範程式, 左圖是一張 300*300 大小的 bmp 影像, 當我們用滑鼠在影像上啟動 MouseDown 的事件時, 我們利用 OnMouseDown 事件處理程序中的 ( X, Y ) 座標定義出一個 TRect 物件 - Rect(X, Y, X+100, Y+100), 然後在使用 TCanvas::CopyRect 這個 method 從大張影像中複製 Rect(X, Y, X+100, Y+100) 這個範圍到小張影像的 Canvas 中。



程式包含宣告的部份, 僅僅只有短短的四行, 如下:

TRect TileRect, OIRect; //宣告兩個 rectangle 物件

TileRect = Rect(0,0,100,100);
//必須貼滿小張影像, 所以範圍從 (0, 0) 到 (100, 100)

OIRect = Rect(X,Y,X+100,Y+100);
//大張影像滑鼠點擊在 (X, Y) 上

Image2->Canvas->CopyRect(TileRect, Image1->Canvas, OIRect);
// 利用 TCanvas::CopyRect method 來處理複製的動作

為了讓同學明白什麼是 method? 我們決定用另外一種直接對 TCanvas::Pixel property 直接做處理, 希望同學可以體會出其實 method 就是針對該物件常會用到的程式, 用 method 這個名詞包裝起來而以。

for (i=0;i<100;i++)
　for (j=0;j<100;j++)
　　Image2->Canvas->Pixels[i][j]=Image1->Canvas->Pixels[i+X][j+Y];

上面這段程式, 是一樣可以做到同樣的複製效果的!!

至於如何讓影像物件移動, 其實只要去改變影像的 Top 與 Left 兩個屬性值即可。

Image2->Top = Image2->Top + 100;
//影像往下移動 100 點

Image2->Left = Image2->Left + 100;
//影像往右移動 100 點
　

本週程式的實作過程, 我們發現同學們對於影像的開啟後, 顯示於螢幕的大小與影像本身的大小之間的關係是模糊的, 因此, 本週我們希望同學回去研究影像元件的 AutoSize 與 Stretch 兩個屬性的關係。同學可以嘗試在 form 上放置四個大小為 200*200 的影像元件, 設定成不同組合的 AutoSize 與 Stretch。程式執行時, 開啟一張100*100 大小的影像, 比較看看有什麼不同的執行結果。另外, 再針對一張 300*300 的影像實驗, 分析兩次實驗結果有什麼不同 ?
　

Week 5: 課程紀實 (2006/10/19): Study Sharing

一早在往學校的車上, 和黃老師討論著今天課程的主題, 我們發現雖然大部分同學寫出了部分塗鴉板的功能, 不過程式細部的觀念仍然有待釐清, 我們考量到這門課是未來多媒體學程相關課程的基礎, 因此, 我們當下決定今天課程除了 思考 8-puzzle 的作法 之外, 程式練習的部份, 不要有新的進度, 讓同學停下腳步, 好好回顧一下自己寫的每一行程式, 是不是都能完全掌握, 也趁著這個機會, 讓同學彼此分享程式開發的甘苦與學習所得。



首先, 黃老師請同學先互相討論 8-puzzle 程式的演算法, 然後請 小溫 上台分享牠的想法 ( 左圖 )。接著, 在圖片分割的部份, 家甫 指出可以使用 TCanvas::CopyRect method 從一張圖片複製到另外一張圖片。

在塗鴉板的程式開發上, 哲宇的程式 寫的很不錯, 我們也請他上台分享程式開發的歷程與心得, 我們也藉由哲宇的程式來請同學思考哪些指令應該放在哪一個事件處理程序中才合理。接著, 由 博欽 分享如何讓塗鴉時, 螢幕不致發生閃爍的情況, 關鍵就在 TWinControl::DoubleBuffered 這個屬性必須設定為 true。

除此, 同學也比較了用 TCanvas::Pixels 這個屬性 (property) 來劃一個點的方法, 與用 Tcanvas::LineTo 這個 method 來劃一條線兩者之間在塗鴉板程式之間的差異性。這邊還有一個題目可以請同學去思考, 就是 BCB 的 method 到底是什麼? 用 method 來處理與直接對 property 處理有什麼差別 ?




今天的課程, 我和黃老師都感受到雖然表面上許多同學都可以寫出塗鴉功能來, 其實程式的細節還是有許多空間可以去仔細思考與討論的!!
　

Week 5: 課程實作預告: 8-puzzle 的遊戲介面實作

數位媒體概論 Week 5 的程式課程實作題目為: 8-Puzzle 的遊戲介面實作。同學可以參考 iafrica.com 網站中的 slider puzzle game 當作範例。已經完成上週程式的同學, 可以預先思考本週的題目, 把遭遇的問題先準備好, 一進教室就可以先寫在白板上。

8-Puzzle 是資訊相關科系的資料結構討論到 Search 主題, 或是在人工智慧課程討論到 Heuristic Search 主題, 必定會使用的範例。同學們在我們的課程中, 利用滑鼠觸發事件處理程式, 就可以把控制介面完成。將來, 有興趣還可以替你的程式加入 "人工智慧", 讓你的程式可以自己完成 puzzle ! 對一個資工大二的學生, 應該很酷, 也很了不起的 ! 同學, 衝吧! 加油!