作業

程式越來越難打了...要分割又要拼圖...這次也是問別人才跑的出來...還好...最後來得及交....越來越多不懂的地方...程式也越來越難.....希望可以跟進大家的腳步...不要脫節....

作業

遭遇的困難&程式撰寫心得:
在這次的程式作業中，從一開始的如何運用BCB指令去分割一張圖片，覺得還算蠻好玩的，在程式的撰寫當中雖然遭遇到很多的困難，可能是對BCB的指令還不大熟的關係吧！所以去請教同學教我如何做分割，最後分割總算是成功了！接下來就是要讓圖片打亂而且還要能移動做成一個小遊戲，這個就更困難了，也是用了很久才有些許了解，所以要對BCB的指令要更加熟悉才可以，這樣才能得心應手。

本週指定閱讀問題:
HTML為超連結標記語言,是為了要讓網頁能在各家平台都能通行無阻,變制定了HTML標準,提供了一種統一格式的資訊表示方法,那又何謂DHTML??還記得上次有聽過上Web程式設計課的人有說過利用HTML來寫網頁沒有除錯的功能,有時候往往一個大小寫打錯或是單字拼錯,網頁整個就會無法顯示,這是為什麼呢??有沒有有可以除錯的網頁編輯器呢??

作業

其實這一題的程式真的不好寫,也是參考別人的程式,不過對於一些部分的程式還是不太清楚,像是怎麼去一位等等的,真的是很難理解,不過會盡快釐清的。

心得：九宮格是我小時候最喜歡玩的遊戲之ㄧ
但是裡面的程式卻好複雜＝　＝|||
之前不知該如何寫 參考同學寫的程式
發現裡面其實也是有點繁雜 花了一段
時間才了解裡面程式的走動
如果加上之前學習的元件 就可以變得更
加有趣 做成一個好的遊戲

程式中，把圖分割打亂，使九宮格移動，及最後判斷圖案是否完成。
將圖打亂是比較容易處理的地方，其他需要判斷的地方，有很多都是同學的幫助才完成的。
很多地方都還不清楚用這樣的方式完成，會不會有不可與其的錯誤出現。


之後必須在加一些判斷上去，可能是我邏輯不好吧…

WK7_8_Puzzle

心得：

　　思考8_Puzzle的流程，在上次作業分割後，加以判斷圖片是否顯示(visible)後再swap圖片

原本不知道如何換圖片，後來請教同學後得知用image->picture取得圖片再做交換即可。

問題跟補圖.....

week7的問題

現在流行的skype網路電話所使用的原理是什麼呢!?又是使用何種技術?

week6的作業

左圖是上禮拜week 6所發生的問題...
目前正在思考如何解決
不管我怎改位置
第一張圖還是有所謂的撕裂感!?
正在問同學如何解決

問題+作業

本週問題-->
CSS和RRS有什麼差別呢?
或是有什麼相同之處呢?

























心得-->
這個程式是拼圖!這個程式看似簡單，但是，還真是
有點難度，一開始轉檔問題還搞了很久，所以一直
換圖。出來之後拼圖又很難拼的出來。不過，還挺
有趣的啦!很好玩!!

程式&HTML問題

心得: 這個遊戲作出來還挺有趣，但中間擷取 9 宮格圖片的程式，有點難寫。玩這拼圖遊戲有些圖片還會斜跳，不是往前後左右移動，不知是不是哪裡寫錯?不過這樣也很有趣
問題: 要如何用HTML來做自己的網頁?? HTML還可以用來作什麼功用?

拼圖&Q7:

這個程式讓我花了很多時間處理,像原本九宮格因為沒交所以重做一遍,讓圖片剛好到九宮格裡面反反覆覆做了不知道多少次,能做好算我運氣好,實在是不知道座標該如何看= ="

Q7:

隨著數位傳輸技術的普及,Skype運用了P2P的語言傳輸技術吸引大量的網路電話用戶,而現在手機也普及化,請問用手機可以與Skype的用戶談話嗎?如果是,這個是利用VoIP的功能所製作,還是說有用其他方法?

week7程式

QQ老實說,我是參考同學的才會做的
還要請同學敎
花了蠻久的時間
然後才做的出來
然後由於家裡磁碟機會掉
無法灌BCB
還一大早跑到同學家要同學敎我做

拼圖+心得+問題

１。這張是一開始的執行檔
　　簡單的視窗和按鈕，目前為止還ok





←這時候的怪怪新村的＂村＂還正常






２。類似上次作業的九宮格把圖切割
　　不過，要空出一格到時候讓圖案可以跑
　　



←這時候村就不見了






３。打散＆開始拼圖









感謝zadd有po更改執行檔的教學網站
自己試了一下，雖然有教學網站可以看
不過我還是用了好久= ="
雖然這次有參考其他的同學po在部落格上的程式碼
雖然不完全是自己打的，不過還是研究了很久
我自己後來有去拼完成，沒有做出成功之後會跳出的視窗
因為寫的時候debug一直有錯誤，(套陳建利一句話:我討厭debug)

之後比較有時間的時候，會再去研究怎麼撰寫

　　　　　　　　　所以就放棄了~"~，而且我一直快被那個"村"字搞瘋了

　　　　　　　　　在寫程式的時候明明就調好了，在執行的時候字就會不見
　　　　　　　　　有一點鬧鬼的感覺

＊問題:
bbs和一般的網頁撰寫的方式應該差別很大吧
我其實滿想了解bbs的原理
以及他存在在網路上的方式
畢竟學校也有架設bbs，應該要了解一下才對！

補交＆問題

雖然拖了一些時間還是PO上來，在這個程式中遇到最麻煩的東西就是邊長的大小了，
還有剛開始對程式的一些指令用法不熟，所以搞了很久才弄好！

問題：
課本中有提到可以用記事本來做網頁，真的有辦法弄成網頁嗎？感覺還蠻神奇的！

w7

完成

基本移動方式&能否移動判定都用的很簡單..

但還是做出來了

個人製作基本都是爛招也就沒啥能分享的了..(請參考樓下眾仙內容)

在此要小抱怨一下...在之前沒有接觸過BCB(而且手邊沒書)，同時整體軟體功能掌握程度只有老師上課教的一些的情況下突然要完成這種難度飛躍性的作業實在令人囧

光"如何移動方塊"都讓整個製作過程卡住了大半時間..orz(BCB操作幾乎都變成自學嚕)

希望老師上課對於作業程式內容要多講解提示呀.

week07 8-puzzle

這是我第七週的東東,基本上就只是會動而已～
嚴格要求到不會有bug.完全正常的移動.

唯一的缺點就是...我作完時才發現..沒有辦法判斷甚時候才完成拼圖！？

看來還要加點東西才可以～
（只好下次摟～）

我的方法沒有其他人那麼複雜～
很簡單.
第一..切
第二..移..

就這樣～
只是我移的方法是用

Image1->Picture=Image2->Picture;

這樣.把圖給換過去～
（事實上我用了十張image）




用來當緩衝.

所以我只是在那九張image裡寫
1.判斷鄰近image是否有看不到的image？
2.互換！

就這樣完成摟..

程式碼範例：以中間那一個為例..其他依此類推～
Image11->Picture=Image6->Picture;//先把自己丟給緩衝
if(Image3->Visible==false)
{
Image6->Picture=Image3->Picture;//互換！
Image3->Picture=Image11->Picture;//換回來
Image3->Visible=true;//把原本看不見設成看得見
Image6->Visible=false;//把原本看的建設成看不見！
}else if(Image5->Visible==false)
{
Image6->Picture=Image5->Picture;
Image5->Picture=Image11->Picture;
Image5->Visible=true;
Image6->Visible=false;
}else if(Image7->Visible==false)
{
Image6->Picture=Image7->Picture;
Image7->Picture=Image11->Picture;
Image7->Visible=true;
Image6->Visible=false;
}else if(Image9->Visible==false)
{
Image6->Picture=Image9->Picture;
Image9->Picture=Image11->Picture;
Image9->Visible=true;
Image6->Visible=false;
}

就是這麼簡單...

心得：
看來有時候太衝動..寫太快也不好...

week7-作業!! 程式圖+心得+問題

●程式圖



←這是我的執行檔唷!!超可愛的吧!!
(只是上網抓了icon小圖，改了一下，
是看到地下室那位同學PO文
所以 我也想改一下!!)






1.執行
2.先把圖分割成九塊減一
3.打散
4.開始拼圖囉!!

(為了用完成圖，我拼超久的啦!!
最後啊！是用小畫家剪貼的ＱＱ，
在拼下去，我會陷入無限回圈！！)









●心得
上次已經寫出擷取圖片，也就是分割成九塊減一，（我上次沒有減一）
這次啊！是直接要寫出拼圖了！有點棘手！
是不知從何下手，
後來就想說，程式嘛，一步一步慢慢來吧！


第一步，就是要先把切割好的八塊圖片，打亂，所以我用了一個按鍵，
是把圖片打散的，我是取亂數，然後，讓他隨機交換。


第二步，就是要想怎麼跟空白的那個位置做交換，中間那個最不用考慮了，
因為他上下左右都可以跑，其他的就要考慮了，然後再寫一個swap將換的函數，
嗯～～C++很常用的，ＧＯＯＤ！！　　這邊我也是用了一個按鍵，開始拼圖，
上一個只是打亂，但是不能做拼圖的動作，這邊這個才可以玩，
這邊，我又寫了一次取亂數耶，也就是說上一個按鍵，可以刪掉了！！
可是這邊寫的，是直接用亂數和ｓｗａｐ，去隨意交換，程式碼比較簡短，！！

第三步，是在我寫功課之前我有上來ｂｌｏｇ看一下，看到，地下室的哪位同學，
說了一個很有用的東西，並不是每個人的電腦都有裝ＢＣＢ，要讓程式完美，
就要讓它在每台電腦都可以執行，所以，我就更改設定了，
拿我室友的電腦來做實驗，ＯＫ的！！還改了ｉｃｏｎ的小圖唷！！

最後一步，應該是要判斷，拼圖完成了沒，但是，我始終沒有完成過，
所以，我自己也不知道，結果會是怎樣耶!!@@"

部落格很好用，同學很好用，BCB好難用!!



●問題
在輸入網址列的地方，通常前面是http://也有用過ftp://，
這是專門用來傳輸擋案的，就像開自己的文件夾一樣，
還有bbs://是用在kkman的時候才會看到的，但是在別人電腦
，我還看過另外一個，〝PPG://〞←超陌生的耶!!
PPG:// 他的功用是什麼呢?!

week7 8-puzzle

上週生病沒去上課
要做的東西是打聽來的

首先是新增JPEG的開檔和寫檔功能
先在OpenPictureDialog1和SavePictureDialog1中的Filter中的選項新增JPG這個項目



接著是在我的標頭檔(Unit.h)中新增一行
include "jpeg.hpp"

這樣就能讀取JPEG檔了
可是他不能像BMP檔一樣處理
所以我們讀取後把他轉成BMP檔
讓他可以做處理

重點程式碼使用這些
TJPEGImage *TheJPEG;
if(OpenPictureDialog1->Execute())
{
if(OpenPictureDialog1->FilterIndex==1)
BMPIMAGE->Picture->LoadFromFile(OpenPictureDialog1->FileName);
else
if(OpenPictureDialog1->FilterIndex==2)
{
TheJPEG=new TJPEGImage;
TheJPEG->LoadFromFile(OpenPictureDialog1->FileName);
BMPIMAGE->Picture->Bitmap->Assign(TheJPEG);
}
}

就能如下圖一樣開啟和處理JPEG影像
寫檔也是差不多就不贅述
因為不知道上禮拜寫JPEG這部份有上到什麼
所以我把以前寫過的東西就弄上去



然後是8-puzzle的移動
我其實最後選用比較笨的方法
看點選哪個圖
偵測周圍有沒有白色那張圖
如果有就做交換

有使用個小陣列(puzzle8[9])方便判斷用
中間有遇到個問題
就是圖做不到交換
會變成兩張一樣
因為會這樣
所以我採用更笨的方法
直接把要換的圖換過去
然後要變白色的部分在填上白色

最後無聊把陣列號碼也寫在旁邊方便移動



接著又用很笨的方法去判斷圖片完成沒
直接用if和&&去跑陣列
如果全都正確那就跳出恭喜的小視窗
本來有想到用迴圈+flag
不過實在有點懶
就暫時使用這樣的方法



因為每張圖的事件判斷都用複製貼上
所以code有點又臭又長的
我找時間想個辦法改進看看好了

----------------------------------------

打亂8-PUZZLE的想法：
我想到的是比較笨的方法

基本理念就是叫程式學人一樣作移動打亂

所以首先我去找到陣列內內容是9的在哪邊
再從周邊(上下左右)去隨機選擇一塊作交換
然後再去找9
在隨機交換
就這樣LOOP

LOOP次數(空白的移動次數)也隨機產生
做了N次就停止

這是參考人類手動打亂的方法去想的
讓電腦做人在做的事情

拼圖 &問題

這星期,新增數字比對




之前內碼就有了 只是把它顯示出來而已
以下是亂數做圖:

總算完成了...算是滿徒法煉鋼的= =

一開始取亂數:



想說用二維陣列去做,結果寫一寫還是太麻煩了 ,很亂很亂~.結果還是用一維陣列做下去了,

因為取圖大小都一樣,所以我就把它丟給temp儲存, 而每個圖的範圍我給它設定好後丟到s0~s8去 方便存取, 然後再去做圖片位置(位置用算的x+???,y+???)各丟給img[s?],如:

Image00->Canvas->CopyRect(temp,OriginalImage->Canvas,img[s0]);

而之後的s1~s8 ,再取亂數 分別丟到其他圖片去,並判斷重複與否,就可以完成亂數了...



之後要做位置轉換:

為了之後方便判斷拼圖是否答對,一開始設定儲存亂數值a[?]=s0~s8,

以及正確的答案b[]={0,1,2,3,4,5,6,7,8} ,之後每個圖各別判斷相鄰四方的位置a[?]代表的是否是0,是則點取時做對換,此時徒的值要換 s0就要跟著換 ,

而判斷是否為正確的a[?]當然也要對換了... 比如:

if(a[0]==0) { t=s0; s0=s1; s1=t;
t=a[0]; a[0]=a[1]; a[1]=t;
Image00->Canvas->CopyRect(temp,OriginalImage->Canvas,img[s0]);

Image01->Canvas->CopyRect(temp,OriginalImage->Canvas,img[s1]);

}



分別判斷完之後 移位沒問題 就來做判斷答案了:

先前已經做好了a[?]的轉換設置,當a[]=b[]={0,1,2,3,4,5,6,7,8}的時候,

做一個for loop判斷a,b的正確數是否為9 是的話就輸出 確認答案是正確的之訊息


以下是正確答案之圖:

中間其實許多多程式碼上打錯的錯誤在,其中有一個是因為我做的是左上角為空圖,每次轉換完後若想按亂數重做,因為左上角已經變成其他區塊的圖示了,圖示會留著 其他做亂數,會有跟其他有重複的情形,最後以在做亂數部分補了一個s0=0;之後圓滿解決~

完成執行檔放在webhd分享名稱: GGspace

Question7:

網頁上有許許多多的圖片.文字,很多都做成了超連結,

請問他們儲存的格式是否是一樣的? 是什麼格式呢??

拼圖-加強版

開始:
第1步:分割圖，請參考上一篇

第2步:亂數排序，傳入要交換的2個圖編號(0~8)，利用位置交換

經過老師提醒後發現會出現無解的情形，所以上網找了何時會出現無解的情形

加上一個如果無解則將空白移到有解的位置判斷(無解的判斷法在下面)

遊戲:
第1步:點空白四周的圖，判斷位置是否跟空白的位置相差為一個圖的長或寬

是則移動
第2步:用陣列確認是否完成，一開始是0~8，當圖移動時跟著移 ，未完成則回到遊戲第1步

EX:第5個跟第9個圖(空白的圖)交換，陣列變{0,1,2,3,8,5,6,7,4}

第3步:顯示出隱藏的第9格


無解的判斷法:

參考下面的那個網頁

http://www.shes.hcc.edu.tw/~oddest/math162.htm



覺得第一個方法太麻煩第二個看不懂


沒關係，我也覺得很麻煩

所以，觀察了一下，發現還有一個方法，下面是用小畫家畫有解的圖





看出來了嗎?
由於空白到原本位置的移動次數等於交換次數
而移動次數跟移動到原本位置的最少次數都為奇數次或偶數次
(例如:移4次的空白移動到原本位置最少次數的路徑為空->7->8為移2次)
因此可得到若交換次數跟空白移動到原本位置的最少次數都為奇數次或偶數次
時有解。

8 Puzzle Game finished

　
　
【心得】

既然已經得到讓 Image 移動的方法，就可以把這個遊戲弄出來了!!

其實是因為根本就不知道作業要做到怎麼樣的程度，所以就一直寫下去

然後就...

　

其實程式碼本身很粗糙，而且沒有寫演算法就在 coding

所以有次在測試的時候，run 出來的結果跟我想要的差了十萬八千里 囧rz

　

總的來說，會覺得程式不好寫只是因為對 BCB 不熟

工具列、元件、函式、Windows API 都不知道有哪些

網路上跟 BCB 有關的教學又是少之又少 ="=

　

【Coding 實記】

1.

其實首先要解決的問題是，我的 8 puzzle 讀取的時候會缺左中和左下的圖

情況就跟 Shun 的一樣 ※連結過去

　

一開始我以為是讀取時座標的問題，可是怎麼算都對，所以我也不知所以然

就在程式裡面動點手腳才把星座圖九宮格弄出來 (偷吃步 XD)

　

重新從 for loop 計算後，

才發現少放了一行 rtOI = Rect(x,y,x+92,y+92)

所以左中和左下的圖才會沒有顯示出來

　

2.

確定九個小圖都可以讀出來後，先想到的是 8 puzzle 擺放的位置

一開始我是打算讓 Image 隨機讀取 8 個區塊

可是這樣做除了 CopyRect 要怎麼放 Image Title 的 (x,y) 很麻煩之外

在後面的程式裡，也不好紀錄 Image 移動後的位置

　

要改用別的方法，

一樣是讓 Image 照順序讀取 8 個區塊，然後讓 Image 隨機擺放

因為要紀錄 Image 的位置，所以我用了一個 LO[9] 的 int array ，

紀錄 Image 在 8 puzzle 的位置 0~8

　

以上圖來說 LO 的內容是這樣的 { 7 , 0 , 6 , 4 , 3 , 2 , 5 , 8 }

(搭配下一張圖看比較好懂)

這是表示 Image1 現在在 7 的位置，Image2 在 0 的位置，

其他依此類推

　

3.

因為要隨機擺放 Image ，用 (x,y) 座標來更動 Image 的 Top 和 Left 會比較好

所以再設一個 int array xyLO[9][2]，用來紀錄 LO的 (x,y) 座標

上面的數字是 LO，下面的是 xyLO

以下的文章內容都會用 LO 表示 Image 所在的位置

LO[1] 這樣是表示 array 內的內容

所以我用 LO 1 來表示圖中 1 的位置 ( 上中 )

其他依此類推

再用 for loop 去跑

　/* 重設 image 位置 */

　int iX=328; // Image1 的 Left

　int iY=40; // Image1 的 Top

　int k=0;

　for(int i=0;i<3;i++)

　{

　　for(int j=0;j<3;j++)

　　{

　　　BMP[k]->Top = iY+xyLO[k][0]*96; // Image 的大小是 92*92

　　　BMP[k]->Left = iX+xyLO[k][1]*96; // 再加上間隔距離所以是 96

　　　k++;

　　}

　}

　

當初就是這個部份沒有分清楚，
所以在測試的時候才會發生 Image 通通跑錯位置的烏龍

害我百思不得其解

　

4.

圖片的隨機放置完成後，再來是圖片的移動

這邊要考慮到的有

A.只有正中央 LO 4 的 Image 可以做四個方向的移動，

　其他的 Image 可以移動的方向都有限制

　比如 LO 0 ，只能做往右和往下的移動

B.要判斷 Image 9 是不是在被點擊的 Image 旁邊

　比如 當我點 LO 7 的時候，要去找 Image9 有沒有在 LO 4、6、8 三個位置

C.找到 Image9 在被點擊圖片的旁邊後，要怎麼去做 Image 的互換

　

solve A:

我只想到用 switch 配上 if ，來做判斷

　switch(i)

　{

　　case 0:

　　　{ ... } break;

　　case 1:

　　　{ ... } break;

　　...

　　...

　　case 8:

　　　{ ... } break;

　}

　

solve B:

我用在 switch 裡的 if ，針對 Image9 的 Top 和 Left 屬性做判斷

ex:

　case 2: // 被點擊的 Image 在 LO 2

　{

　　// 判斷 Image9 在 LO 1

　　if(BMP[8]->Top==40 && BMP[8]->Left==424)

　　{ ... }

　　// 判斷 Image9 在 LO 5

　　else if(BMP[8]->Top==136 && BMP[8]->Left==520)

　　{ ... }

　}

　

solve C:

直接去更動 Image(i) 和 Image9 的 Top 或 Left 屬性

ex:

　case 2: // 若被點擊的 Image 在 LO 2
　{

　　// 判斷 Image9 在 LO 1
　　if(BMP[8]->Top==40 && BMP[8]->Left==424)
　　{

　　　BMP[i]->Left = 424; // 把 Image(i) 挪到 LO 1

　　　BMP[8]->Left = 520; // 把 Image9 挪到 LO 2

　　　LO[i] = 1; // Image(i) 改變位置了，LO[i] 裡面的資料也要跟著改

　　}

　　...

　

5.

確認所有圖片都可以正常移動後，就是要判斷過關的條件

只要用 for loop 去跑 LO array 裡面是不是從 0 排到 8 就可以了

　

6.

接著要製作執行檔

總不能叫沒有安裝 BCB 的人先裝 BCB 才能玩吧

連結到教學網頁

　

這樣新產生的 exe 檔就可以拿去給別人玩了 XD

　

最下面還有更換 exe 檔的 Icon 的方法

BCB 內建的小圖... 不怎麼好看 = =a

　

【程式下載】

WebHd 群組: rome

網頁下載連結：

8 Puzzle Game (遊戲執行檔)

Image 移動 ( 含程式碼 )

Image 8 Puzzle 亂排 ( 含程式碼 )

　

　

下面兩個是有人問我要怎麼做才弄出來的

都弄好了就順便放上來分享

群組 rome 裡面都有，

附上網頁下載是因為最近網路硬碟還滿常掛的