2010年1月3日 星期日

Teaching : 大富翁 Flash 小遊戲 monopoly (2013.04.29 更新)

2010年1月3日 星期日

寫在前面 (2018年補充)

本工具以 Flash 開發,如果使用較新版的網頁瀏覽器開啟此小工具,出現類似「無法載入設定檔」的錯誤訊息而不能使用,請先參考底下的兩篇說明:


大富翁是大家從小玩到大的遊戲,多次在研習中也聽前輩們提到他們在教學活動中的應用,利用海報紙加大骰子玩具就可以玩,孩子們走到機會、命運時就抽一張預先製作好的題卡,回答問題或是完成指定的事情就可以得到獎勵或是處罰。這個遊戲偶爾穿插在教學活動中,可以增加不少的樂趣。類似的教具,書商也有提供。在有電子白板的環境中,大富翁應該是一個不錯的電子化教具,甚至也可以是一個測驗的工具。
上個月初在網路中玩了幾個別人設計的大富遊戲:
這裡面只有最後一個 "地籍大富翁" 採用載入題庫的方式,也就是可以自訂題庫。不過,可惜的是它題庫的網址寫死了,並無法離線使用。左看、右看,還是自己動手寫一個比較快。我的目標是要讓使用者可以透過一個簡單的設定檔來客製化想要的大富翁。經過不斷的修改,有了目前的樣子,現有的功能如下:
  • 以 XML 格式的設定檔來設定遊戲的選單、題庫。
  • 可自訂要多少格讓使用者玩,程式會自動產生遊戲 "棋盤"。可以設定每格的功能(機會、命運......),及格子裡要填入的文字內容、字型大小和可以前進、後退幾步。
  • 問題題庫的題幹和題目可以自己建立,除了文字題,也可以是圖片題或是聲音題。
  • 玩的時候,可以自己選擇要幾位玩家,目前最多可以六位輪流玩。
接下來看看目前遊戲所需要的檔案:
  • index.html ( 呼叫主程式用的 HTML 網頁檔 )
  • monopoly.swf ( 主程式 )
  • menu.xml ( 選單設定檔 )
  • set.xml ( 自訂題庫設定範例檔 1 , 由 menu.xml 中指定)
  • PE-set.xml ( 自訂題庫設定範例檔 2 , 由 menu.xml 中指定 )
如果想要在自己的電腦上玩,只要對準上面的三個檔案按滑鼠右鍵另存到磁碟中即可。玩的時候可以先試試看,直接利用檔案總管開啟 monopoly.swf ,如果不行則可以試著開啟 index.html。由於 set.xml 範例中有使用到幾個圖片檔,如果不想看到叉叉,就先在存放前述三個檔案的資料夾中建一個叫 images 的資料夾,然後將這幾張圖片存入該目錄:images/gsyan.jpg , images/frog.jpg , images/1.jpg , images/2.jpg , images/3.jpg , images/girl.swf


客製化選單設定檔 menu.xml

menu.xml 中主要是用來設定遊戲的主選單,目前可以設定選單項目文字及對應的遊戲設定檔的檔案名稱 (路徑)。例如:
<?xml version="1.0" encoding="utf-8"?> <menu title="小博士闖天關"> <item text="三上社會5" filename="set.xml" /> <item text="三上健康" filename="PE-set.xml" /> </menu> </xml>
<menu> 和 </menu> 之間的每一個 <item ... /> 都是主選單中的每一個選項。 而 item 可以設定的屬性如下:
  • text : 選項的文字部份。
  • filename : 指定要使用哪一個遊戲題庫設定檔 (路徑,相對於主程式所在的目錄)。



客製化題庫設定檔

這部份才是遊戲的核心設定檔,它控制了「棋盤」的排列及每一格的功能和題庫的內容。下面就來介紹這個遊戲最重要的題庫設定檔。以設定範例一 set.xml 來說,它主要分成三大部份
  1. <setting ... />
  2. <blocks ... > ... </blocks>
  3. 其它自訂的,例如:<chance ... > ... </chance> , <fate ... > ... </fate>
這裡面除了 setting 和 blocks 是固定的名稱,其它的則是看我們要把類似「機會」「命運」的問答題分成幾大類,「標籤」則由我們來命名。

先來看看 <setting ... /> 中可以設定的屬性:
  • col : 在畫「棋盤」時,水平方向最多放幾個方格。目前最多 7 個。
  • row : 在畫「棋盤」時,垂直方向最多放幾個方格。目前最多 6 個。
  • total : 「棋盤」中總共要放幾個方格。如果是傳統大富翁那種起點和終點接成一圈,懶得算,數字輸入大一點,程式會自動調整為合適的大小。如果不希望頭尾接成一圈的,則自行輸入總共的格數。最大的「棋盤」7x6 來說,total=22 即可接成一圈;如果 total=21 ,當玩家搖的步數超過走到最後一格的步數時,超過的步數會變倒退走。型式由 total 等於多少來決定。
  • first_x : 指定「棋盤」中起點那格(左上角) 的 x 座標是多少。
  • first_y : 指定「棋盤」中起點那格(左上角) 的 y 座標是多少。
  • title : 指定要顯示在「棋盤」上方的遊戲標題。
設定「棋盤」中每一格的用途,是「機會」、「命運」,還是 ......
這部份的設定通通是置於 <blocks> 和 </blocks> 之間,只要想設定某一格當使用者停下來,出現「問答」的對話框,就為那一格加一行 <block ... />。
例如:
<blocks font="48" >
<block id="3" type="fate" text="!" />
<block id="5" type="chance" text="?" />
<block id="12" type="" text="加油" font="36" />
</blocks>
上面的三行分別為第 3, 5, 12 格指定了用途,第 3, 5 格要玩家進行「問答」,第 12 格則只顯示指定的字串而已。block 的詳細屬性如下:
  • id : 設定是「棋盤」中的第幾格 (由 1 開始)。
  • type : 問答的題庫名稱,如果為空字串,表示本格不進行問答。
  • text : 出現在格子上面的文字。
  • font : 指定 text 的字型大小,如果沒有指定,一律以 <blocks> 中的 font 來檔預設的字型大小。
以上面的例子來說,第 3, 5 格沒有指定 font ,所以它們的文字字型大小都會用 48 ,而第 12 格中的文字則會用 36 來設定字型大小。
如果沒有指定 block 的格子,格子中只會在左上角出現小小的編號,不會有其它文字。如果指定了 type ,那後面題庫的設定以 type 的內容來當作新「標籤」名稱。

前面的例子中指定了第 3 格的 type="fate" ,而第 5 格指定了 type="chance" ,我們就要分別在 <fate> ... </fate> 和 <chance> ... </chance> 來放它們的題庫。例如:
<fate title="命運">
<item text="掉到水溝,後退1格" step="-1">
<item text="坐公車讓座,前進3格" step="3">
</fate>
<chance title="機會">
<item text="國慶日是哪一天?" step="2" options="十月二十五日,十月十日,八月十五日,一月一日" answer="2" />
</chance>

上面建了 fate , chance 兩種題庫。每一個 <item ... / > 都是各個題庫的一題,每一題可以用的屬性如下:
  • text : 出現在問答對話框中的對話文字(題幹)。如果有圖片,在文字後面再加一個 [半形逗號] 來當文字和圖片檔名間的分隔符號。

    [例] text="右圖的性別和下面哪一個相同?,images/girl.swf"

    上例中除了文字,還用了 images/girl.swf 這個動畫圖。
    可接受的圖片格式: .jpg , .gif , .png , .swf

    簡單來說,當題幹的 text 有以下幾種格式:
    1. 純文字:text="xxx"
    2.文字+圖片:text="xxx,xxx.jpg"
    3.文字+圖片+聲音:text="xxx,xxx.jpg,xxx.mp3"
    4.文字+聲音:text="xxx,,xxx.mp3"
    不知道是否有人會用純圖片或純聲音?我沒有試過吔!

  • step : 本題可以前進或要後退的步數,正值為前進,負值為後退。

  • options : 為可供使用者選取的候選答案。
    如果只有文字沒有圖片:每個選項間以 [半形逗號] 隔開。
    如果有圖片:答案選項和選項之間以 [半形分號] 來隔開,而文字和圖片路徑則以 [半形逗號] 來當分隔符號。

    [例] options="甲,images/gsyan.jpg;乙,images/2.jpg;丙,images/3.jpg;丁,images/1.jpg"

    上例中有四個選項(甲、乙、丙、丁),每個選項都有圖:
    甲:images/gsyan.jpg
    乙:images/2.jpg
    丙:images/3.jpg
    丁:images/1.jpg

    options 中的每一個選項的格式和 text類似,應該也有底下的格式:
    1. 純文字:options="111,222,333"
    2.文字+圖片:options="111,111.jpg;222,222.jpg,333,333,jpg"
    3.文字+圖片+聲音:options="111,111.jpg,111.mp3;222,222.jpg,222.mp3,333,333,jpg,333.mp3"
    4.文字+聲音:options="111,,111.mp3;222,,222.mp3;333,,333.mp3"


  • answer : 正確的解答是 options 中的第幾個選項。

在編寫完設定檔後,一定要記得儲存為 UTF-8 (unicode) 的編碼,不然打開遊戲以後,可能只能看到一大片「綠地」,啥也沒出現。

Download
Change Log
  • 2014.12.20 修正設定檔找不到路徑的問題。
  • 2013.04.29 updated 解決設定檔中如果沒有設定 step 時,遊戲就無法繼續進行的問題。
  • 2010.02.10 updated 重新用 Flash 8 發佈為 Flash8 的格式,讓題目中的圖片可以動態載入 .swf , .jpg, .gif, .png (原來 Flash 7 loadClip 只支援載入 .swf, .jpg 兩種格式而已)
  • 2010.01.10 updated 解決了檔案放在網路,無法正常進入遊戲的問題。
  • 2010.01.05 題幹/題目可以加入聲音檔(.mp3),題幹載入時會自動播放指定的聲音,題目則由使用者自己按 play 鈕後播放聲音。
  • 2009.01.03 updated
  • 2009.12.28 題幹/題目可以加入圖片,圖片自動產生縮圖,使用者可以點一下後放大。
  • 2009.12.25 加入多人玩的選單,使用者由清單中選角色。
  • 2009.12.24 updated
  • 2009.12.23 beta 雛型出來
  • 2009.12.13 開始觀摩、發想

Todo List

  • 有時透過網路玩時,畫面似乎沒有正常顯示,要按 Browser 的 Reload 才正常。原因待查。 [已解決] 主因是 XML設定檔尚未處理完畢(程式判斷有誤),利用 XML.loaded 來檢查是否完成,就解決困惑好久的問題。
  • 遊戲什麼時候叫「結束」?
  • 音效的加強。
  • ......

48 則留言:

  1. 這個星期的作業引用你的大富翁遊戲. 謝謝你的程式分享, 讓我和學生們都能使用這個生動活潑的教材.

    回覆刪除
  2. 雄老師好,請問大富翁的下載網址是否失效了,我無法下載耶,煩請指教,謝謝!

    回覆刪除
  3. 林老師:
    應該是我們學校的主機有問題,我先貼一個備份的載點:
    monopoly.rar

    回覆刪除
  4. 雄老師,謝謝您!已經可以下載了!

    回覆刪除
  5. 請問一下大富翁Flash小遊戲Monopoly裡

    如果我們要修改地圖和人物選單的話要怎麼修改或是有檔案嗎?

    地圖是用什麼畫出來的?

    如果地圖和人物都是用Flash畫的,怎麼跟xml下去做連結

    回覆刪除
  6. 顏老師,下載了大富翁遊戲,研究了了一下程式。發現我的聲音檔沒有辦法發聲。不知道是音質的問題?還是另有其因。雖然還沒研究出一個所以然來,不過,他們玩過紙上的與軟體遊戲,相信運用這個會讓他們更喜歡學中文哦。Thanks.

    回覆刪除
  7. DEAR雄老師:
    自己在使用大富翁加入題庫時,覺得稍嫌麻煩,就做了一個EXCEL巨集檔案,可以快速產生大富翁題庫,有需要的人可以試試看。
    https://sites.google.com/a/mail.jjps.kh.edu.tw/pcworker/zi-xun-rong-ru-1/hudongshidatiyouxi-dafuweng/questions.xls

    回覆刪除
  8. 剛玩了一下,就一直在那回答問題,繞圈圈嗎?整個遊戲有個目標嗎?如果沒有的話,加一個比較好。或許是我不知道這遊戲怎麼玩吧!?

    回覆刪除
  9. pollyilan 您好:
    因為這個遊戲當初是設計來當教具使用,並有所謂的終點,這部份要看老師如何和學生約定。我目前想到的,可以利用畫面上顯示的已通過步數,自己記錄繞的圈數......來當作結束的依據。

    回覆刪除
  10. 雄老師您好:
    謝謝您在網路上的分享 我們是一群教資源班的老師 您的程式讓學生進步了不少
    可否請問您可不可以分享注音對對碰的程式讓我們下載? 謝謝

    回覆刪除
  11. 小思老師您好:
    聽到我的小東西有幫助到孩子們,真是高興。
    不知道您要的是不是這個
    注音碰碰碰

    因為我的「對對碰」是另一支程式。
    如果是上述的那支早期寫的程式,壓縮好的檔案如下:

    * 注音碰碰碰(mime.zip)
    * 部首碰碰碰(radical.zip)

    請自取。

    回覆刪除
  12. 謝謝你呀 雄老師

    回覆刪除
  13. 感謝雄哥分享「注音碰碰碰」和「部首碰碰碰」的檔案!真的好棒,沒有網路也可以玩,而且可以先刪去小朋友們還有有學到的部分!~很感謝喔!^^

    關於「大富翁」遊戲,Erin想建議加上老師可以自行設定時間限制的功能+圈數計數功能。因為此大富翁每次僅能一人(一組)參與,如果加上限時和圈數計數功能就能發揮其競賽功能:D

    回覆刪除
  14. 上個留言的錯字更正:

    還有有→ 還沒有

    回覆刪除
  15. 不好意思,想請問一下,關於大富翁人物移動部份,目前是使用座標的方式去移動,但這樣人物移動起來有點奇怪,請問要如何才能夠讓人物可以一格一格走

    回覆刪除
  16. 老師你好!
    我最近要製作flash遊戲,需要更多的參考資料!
    請問老師可否給你的 swf 原始檔我嗎?謝謝!
    p2042022@yahoo.com.tw

    回覆刪除
  17. 嘉輝您好:
    個人想分享的東西,您在這個頁面中就找得到下載點,也就那些囉!
    您要製作遊戲,當然得自己思考如何做,需要更多的參考資料,建議您多參考 Flash 本身的函數庫說明,應該沒有人比它更詳盡了,不然,Google 大神會是您的好幫手。

    回覆刪除
  18. 雄老師 你好!!
    我想用這個製作一個大富翁
    如何用您的大富翁程式 修改一個屬於自己的大富翁

    回覆刪除
  19. Avon 您好:
    這一篇就是教您如何修改為屬於您自己的說明 XD
    您先由 Download 下的連結將檔案下載回去, 然後按照說明, 以文字編輯軟體(例如 Windows 的 Notepad)將設定檔依自己的需求修改並儲存即可。

    回覆刪除
  20. 謝謝Gwo-Shyong Yan
    我正在修改
    不過還有幾個地方 不懂
    希望可以請高手教導一下

    回覆刪除
  21. 雄老師你好
    我想要為這個遊戲寫一個結束
    就是答對題目可以加分
    然後當分數達到我們要設定的分數 就結束遊戲
    請問要怎麼寫這個功能把它加進去這個遊戲

    回覆刪除
  22. 雄老師好,請問大富翁的下載網址是否失效了,我無法下載耶,煩請指教,謝謝!

    回覆刪除
    回覆
    1. Claudia 您好:
      剛剛試了一下,我由家裡的 HiNet 網路是可以下載的。

      刪除
  23. 雄老師好:不好意思不是不能下載而是下載後打不開

    回覆刪除
  24. 雄老師好: 不好意思,不是不能下載,而是下載後無法打開.

    回覆刪除
    回覆
    1. 請用解壓縮軟體,ex. 7-zip
      http://www.7-zip.org/

      刪除
  25. 請問老師
    如果我們要修改地圖和人物選單的話要怎麼修改或是有檔案嗎?
    地圖是用什麼畫出來的?
    如果地圖和人物都是用Flash畫的,怎麼跟xml下去做連結
    可以分享原始檔嗎

    回覆刪除
    回覆
    1. 地圖是固定形狀, 內容會依使用者自訂的 XML 設定產生; 人物的部份非由外部動態載入圖檔, 所以無法讓使用者再自己加新的。想分享的已在這篇文章中, 其它的只能說聲抱歉囉

      刪除
  26. 請問大富翁中的龜兔賽跑,可以設定闖關答對多少題再奪標嗎?
    目前看來是答對8題就能奪標,而且題目還會重覆,不知能否設定答對的題數,另外能否不要重覆?
    麻煩您了,謝謝您的無私分享!感謝~

    回覆刪除
    回覆
    1. 您好:
      看了您的描述,您玩的「大富翁」應該不是我設計的大富翁哦~
      我的並沒有龜和兔, 更沒有賽跑吔

      刪除
  27. 謝謝雄老師的分享,我原本是要搜尋可以修改大富翁遊戲內容的方法,找到您的網站,發現這個好東西,謝謝您

    回覆刪除
  28. 熊老師 你好
    你真的是佛心來的大愛

    在文字檔裡還有中文解釋
    實在是太棒了

    對於剛接觸的我來說
    真的是一大福音

    目前題庫 跟 地圖 都摸索完了

    但雖然雄老師說沒有提供人物修改
    或格子大小修改

    但我還是想請求
    因為有一部分原因是玩上癮了

    謝謝老師的指導
    再次感謝

    回覆刪除
  29. 請問flash 檔案部份可以分享一下嗎

    回覆刪除
  30. 雄老師您好:
    謝謝您提供這個flash的遊戲,並且讓我們可以進行簡單的修改!
    在修改的時候,遇到了一個問題,想要請教您!
    我從您的set檔將題目修改好並儲存之後
    結果發現只有特別題─圖形題跑得出來,其他的題型(fate、chance)都跑不出來
    想請問您我是哪個地方出錯嗎?

    謝謝您~~麻煩您了!

    回覆刪除
    回覆
    1. 吳老師您好:
      哈~~沒有設定檔, 很難猜問題在哪兒, 您要不要先將設定檔寄給我看看?

      刪除
    2. 謝謝雄老師的回覆
      可以跟雄老師要您的mail~
      我在寄檔案給您看看~
      麻煩您了~謝謝您~~

      刪除
  31. 老師您好,
    我們最近要製作Flash遊戲,需要一些參考資料,
    請問老師可以將您的.swf 原始檔分享給我們嗎?謝謝。
    bowato27@yahoo.com.tw

    回覆刪除
  32. 我想問一下,如果我想要把遊戲頁面換成我做的flash檔,該怎麼做?

    回覆刪除
    回覆
    1. 您好:
      不懂您的意思,您的遊戲頁面,您做的 Flash 檔,可能要問您自己才行呀!

      刪除
  33. 老師您好:請問有辦法設計題目不要重覆嗎?因為發現題目常常重覆...謝謝!

    回覆刪除
    回覆
    1. 您好:
      進行當中的問題是用亂數抽題的,如果您出的題目過少,重覆的機率應該就會高。

      刪除
  34. 老師您好:在機會那邊設計約80題左右(這樣還是不夠?),但發現某些題目常重覆出現...也感謝老師的回答

    回覆刪除
  35. 老師:
    您好!本人非常喜歡老師所製作的大富翁,曾經想修改題庫。請教老師附檔名XML該如何開啟?

    回覆刪除
    回覆
    1. 素秋您好:
      .XML 的檔案是純文字檔,照說只要能編輯純文字檔的工具都可以,不過,儲存時可能要注意編碼要選 UTF-8。個人推荐使用 Notepad++

      刪除
  36. 老師您好:

    非常謝謝您的慷慨分享,科技輔助教學一直都是我很有興趣的領域,
    下載完並解壓縮完檔案後,點了SWF檔 及 index.html檔
    皆一直停滯在 小男孩及一個讀取圈圈旋轉的畫面
    不知道是哪個步驟出問題了,再麻煩老師解答,謝謝。

    回覆刪除

 
雄::gsyan © 2009. Design by Pocket