壹 前言 一 研究動機 在學校的課程中學到由微軟開發的程式語言 (Microsoft Visual Basic2010), 才了解到有很多小時候玩到的許多遊戲是由 VB 寫出來的程式, 這讓我們覺得只要學習 VB, 就可以寫出我們理想的遊戲, 為了對這語言有所了解, 我們打算先了解 VB 的歷史,

投稿類別 : 資訊類 篇名 : VB 拼圖實作 作者 : 賴俊穎 宜蘭縣羅東高工 資訊二甲班賴昱儒 宜蘭縣羅東高工 資訊二甲班何志峯 宜蘭縣羅東高工 資訊二甲班 指導老師 : 林建明老師

壹 前言 一 研究動機 在學校的課程中學到由微軟開發的程式語言 (Microsoft Visual Basic2010), 才了解到有很多小時候玩到的許多遊戲是由 VB 寫出來的程式, 這讓我們覺得只要學習 VB, 就可以寫出我們理想的遊戲, 為了對這語言有所了解, 我們打算先了解 VB 的歷史, 再來以現在所學的 Microsoft Visual Basic2010 來做出程式 二 研究目的 因初學者學習程式設計時最大的困難瓶頸不是在於理解程式語言的語法和語意, 而 是在於不知道如何將自己所學知識加以結合而找出方法解決所遇問題, 對於將知識 整合 把不同的想法與概念和想法組合成有意義的形式才是有幫助的 為了使自己的程式撰寫更加的進步, 我們利用了現在所學的程式來撰寫程式, 雖然並沒有像遊戲的程式碼一樣複雜, 但對生活上的小事情十分有幫助, 並且我們將方便的程式放在同一個程式, 來避免有需要的時候還要再尋找程式的位置或同時打開多的程式 三 研究方法及步驟 本次論文研究方法及步驟如下 : 研究方法 : 透過課程學習 詢問老師 上網瀏覽相關資料 參考相關書籍來累積各 種程式語法的撰寫技巧, 在撰寫程式與學習的過程中也能夠多鍛鍊我們的邏輯思 考, 研究步驟 : 如表一所示 表一 研究時程分配圖 時間 工作 1/24~2/1 2/1~2/15 2/15~3/1 3/1~3/19 尋找相關資訊尋求師長協助與組員討論撰寫程式程式除錯 編寫論文 1

貳 正文 一 何謂 VB VB 是一套由微軟所發行的程式撰寫工具, 同時也非常適合給程式初學者使 用, 正因為我們是初學者, 所以我們才使用 VB 來寫這次的專題 二 程式設計理念 ( 一 ) 程式製作之概念 當在想要拼拼圖時, 卻需要買一個新的板子和新的拼圖遊戲, 不僅花錢且拼圖總數大量需要空間, 收拾拼圖也必須要花費一段時間, 玩過後也會喪失其趣味性, 若擺放過久拼圖也有可能遺失或破碎, 所以本專題程式 ( 二 ) 如何使用程式 剛進入遊戲介面時, 即可移動拼圖到框框裡, 如果當中遇到困難, 可以使用 提示, 便會有拼圖圖案出來, 當拼完時, 可以按檢查來確認是否有拼對, 如 果拼對即可進行下一關 三 程式介面配置 一 程式設計 圖 ( 一 ) 地一關程式版面 圖 ( 二 ) 第二關程式版面 一開始我們將拼圖題材使用 PhotoImpact 12 切割成我們將在程式中使用的各個圖片, 再使 用 Microsoft Visual Basic 2010 做出拼圖遊戲, 以下為我們的專題程式設計 ( 一 ) 程式說明 ( 程式下方為註解 ) 2

1. 拼圖介面 Private Sub Form1_Load(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles MyBase.Load 打開 form1 的撰寫程式欄 psrc(0) = Pic1 psrc(1) = Pic2 psrc(2) = Pic3 psrc(3) = Pic4 將 Pic1~4 等於前面之圖片箱以方便之後程式操作 Picview.AllowDrop = True Picview2.AllowDrop = True Picview3.AllowDrop = True Picview4.AllowDrop = True 讓圖片能被拖曳 2. 拼圖放置 Private Sub Pic1_MouseDown(ByVal sender As Object, ByVal e As System.Windows.Forms.MouseEventArgs) Handles Pic1.MouseDown, Pic2.MouseDown, Pic3.MouseDown, Pic4.MouseDown 於來源控制項之 MouseDown 事件中啟動來源控制項的拖曳程序 DoDragDrop If x = False Then 假設布林代數為 False 時執行 If Not Is Nothing(sender.Image) Then p = sender sender.dodragdrop(sender.image, DragDropEffects.All) 拼圖移動可以放置在上面且原圖片消失 3. 隱藏與顯示被拖曳的圖片 3

Private Sub Picview_DragDrop(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Picview.DragDrop, Picview2.DragDrop, Picview3.DragDrop, Picview4.DragDrop 於目的控制項之 DragDrop 事件中擷取拖曳資料 psrc(val(sender.tag)).visible = True 先使 psrc 能被看見 sender.image = e.data.getdata(dataformats.bitmap) sender.image 即先設定於可變成資料之中的 BMP 圖檔 sender.tag = p.tag 使 sender 的圖檔變為 DragDrop 事件中的被擷取拖曳資料 p.visible = False 使原本在旁被拖曳進入圖片隱藏 a = a + 1 f = a + s Label2.Text = f & " 步 " 在 Label2 計算移動的步數 If Picview.Tag = Pic1.Tag Or Picview2.Tag = Pic1.Tag Or Picview3.Tag = Pic1.Tag Or Picview4.Tag = Pic1.Tag Then 若在拼圖框內有 pic1 因圖片移到拼圖板上 Pic1.Visible = False 則會把 Pic1 的圖像隱藏 Else Pic1.Visible = True 若沒有 Pic1 則保持顯示 其他 Pic1~PicX 也依此類推 4. 拖曳效果 Private Sub Picview_DragEnter(ByVal sender As Object, ByVal e As System.Windows.Forms.DragEventArgs) Handles Picview.DragEnter, Picview2.DragEnter, Picview3.DragEnter, Picview4.DragEnter 在目的控制項的 DragEnter 事件中加上程式 e.effect = DragDropEffects.All 4

VB 拼圖實作 e.effect 即等於拖曳效果之後此效果為拖曳全部的圖檔 5. 雙擊使拼圖板上拼圖片歸回 Private Sub Picview_DoubleClick(ByVal sender As Object, ByVal e As System.EventArgs) Handles Picview.DoubleClick 拼圖板被雙擊時的事件 If x = False Then 若 x 為 False psrc(val(sender.tag)).visible = True sender 所代表的圖片為顯示狀態 Picview.Image = Nothing 使拼圖板上被雙擊的拼圖消失 sender.tag = "" 雙擊圖片返回零碎拼圖後增加 1 次步數 6. 檢查判斷 Private Sub Button1_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button1.Click 當 Botton1 被點擊的事件 If x = False Then 若 x 為 False If Picview.Tag = 1 And Picview2.Tag = 0 And Picview3.Tag = 3 And Picview4.Tag = 2 Then 若拼圖的 Tag 與 Pic 吻合則開始 x = True Select Case f Case Is <= 6 MsgBox(" 你拼對了動作真快, 你真棒 I",, " 拼圖小遊戲 ") 5

Case Is > 6 MsgBox(" 你拼對了 ",, " 拼圖小遊戲 ") End Select 判斷步數且 x 變為 Ture, 若步數小於等於 6 則出現讚美且通關, 大於 6 則通關 Else MsgBox(" 你拼錯了喔!!",, " 拼圖小遊戲 ") 若是 Tag 與 Pic 編號不吻合則顯示拼錯 7. 進入下一關 Private Sub Button2_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button2.Click 若 Botton2 被點擊 If x = True Then Form2.Show() 若 x 為 True, 則第 2 關才可以進入 8. 提示按鈕 Private Sub Button3_Click(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Button3.Click 當 Botton3 被點擊的事件 If x = false Then 若 x 為 False 即未通關 re = re + 1 re 為提示次數 6

If re < 4 Then Button3.Enabled = True 提示.ShowDialog() If re = 3 Then Button3.Visible = False Button3.Enabled = False End Class 若提示次數尚未超過 4 次, 則提示按鈕則為可按狀態, 提示圖檔則出現, 若提示 3 次, 提示按鈕則不看見也不能夠點取 9. 限時提示 Private Sub Timer1_Tick(ByVal sender As System.Object, ByVal e As System.EventArgs) Handles Timer1.Tick Timer 事件 If Timer1.Enabled = True Then 如果 Timer 觸發 s = s + 1 If s >= 2 Then Timer1.Enabled = False Me.Close() s = 0 時間過了兩秒後,Timer 停止, 提示圖片則關閉, 且讓時間歸零 ( 二 ) 圖片介紹 7

圖 ( 三 ) 拼圖介面 圖 ( 四 ) 移動兩塊拼圖後計數兩步 圖 ( 五 ) 檢查是否正確後拼對且在 6 步內 圖 ( 六 ) 第二關介面圖 失 圖 ( 七 ) 檢查錯誤圖 圖 ( 八 ) 按下提示鈕後即給予提示兩秒後消 8

参 結論 一 研究結論 藉由這次的專題報告, 使得我們對程式的除錯能力更加進步, 在這次的程式裡頭, 我們利用圖像檔當作拼圖擺放的區塊, 寫法並沒有多大的困難, 在這程式之後我們則是打算利用別種分割方法來使得自己能控制要多少乘多少的拼圖區塊, 這樣一來就不用自己去切圖片, 使得圖片有可能少了一小部分而導致拼圖拼完後會有一點小瑕疵 二 研究心得 這程式語言是我們二年級所教的, 我們為了使自己的程式語言能夠更精進, 因此我們製作了有關遊戲的專題, 在過程中遇到了許多 BUG, 但這正是使我們進步的原動力, 如果沒有這些 BUG, 我們可能無法進步, 找到這些 BUG 必須不厭其煩的測試程式, 直到百分之百確定無問題發生, 經過這次的專題製作, 我們也打算在下次能夠做更困難的遊戲, 來使自己的程式設計更進步 肆 引註資料 註一 : 黃建庭編著 程式設計使用 Visual Basic 2010 附範例光碟 全華出版社 註二 : 李春雄 洪瑞展編著 互動式網站程式設計 :ASP.NET 4.0 使用 Visual Basic 2010 上 奇資訊出版社 註三 : 許華青編著 Visual Basic 2010 程式設計 ( 隨書附贈程式範例光碟 )(2 版 ) 高立圖 書出版社 註四 : VB 介紹 取自 http://zh.wikipedia.org/wiki/visual_basic_.net 註五 :VB 基本語法 取自 http://www.me.tnu.edu.tw/~me006/vb/tutor/a00/3.htm 9