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

寫在前面 (2018年補充)

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

• 雄 : Flash : Flash Player projector

• 雄 : Flash : 開放瀏覽器讀取本機的設定檔

大富翁是大家從小玩到大的遊戲，多次在研習中也聽前輩們提到他們在教學活動中的應用，利用海報紙加大骰子玩具就可以玩，孩子們走到機會、命運時就抽一張預先製作好的題卡，回答問題或是完成指定的事情就可以得到獎勵或是處罰。這個遊戲偶爾穿插在教學活動中，可以增加不少的樂趣。類似的教具，書商也有提供。在有電子白板的環境中，大富翁應該是一個不錯的電子化教具，甚至也可以是一個測驗的工具。
上個月初在網路中玩了幾個別人設計的大富遊戲：

• 大雄家夏威夷旅行大富翁
  http://flash.7k7k.com/fl_5/20080116/1/jiqimaodafuweng.swf
  
• Dice Mogul
  http://www.funnyxd.com/playnow/swf/dice_mogul.swf
  
• 上班棋
  http://www.funnyxd.com/playnow/swf/workplace_soap.swf
  
• 海綿寶寶大富翁
  http://www.nick.com/games/data/spongebob/spongebob-race/spongebob-race.swf
  
• 臺中市中興地政事務所地籍大富翁
  http://211.79.140.228/game.html

這裡面只有最後一個 "地籍大富翁" 採用載入題庫的方式，也就是可以自訂題庫。不過，可惜的是它題庫的網址寫死了，並無法離線使用。左看、右看，還是自己動手寫一個比較快。我的目標是要讓使用者可以透過一個簡單的設定檔來客製化想要的大富翁。經過不斷的修改，有了目前的樣子，現有的功能如下：

• 以 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="掉到水溝，後退１格" step="-1">
<item text="坐公車讓座，前進３格" 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

• http://mail.lsps.tp.edu.tw/~gsyan/works/flash/monopoly/monopoly.rar (2014.12.20 updated)

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 來檢查是否完成，就解決困惑好久的問題。
  
• 遊戲什麼時候叫「結束」？
• 音效的加強。
• ......