Flash : gomoku 漢字五子棋 (2012.01.26 更新)

寫在前面

本文中的工具在最新的網頁瀏覽器中已無法使用，支援瀏覽器的新版都在  HTML5 FUN 網站 :

• 雄 : HTML5 FUN 精選集

原文開始

五子棋、圈叉棋是小朋友無聊時隨手可玩的小遊戲，除了好玩，在教學上可以如何應用呢？把字、詞填入格子裡，通過 "考驗" 的才可進行遊戲的原始玩法，進行棋子的攻防。什麼「考驗」呢？會唸，會造詞，會造句 ...... ，在心心老師在 blog 中分享了這部份的心得：

• 【玩字! 喔! 玩字!】
• 玩"字"! 喔! 玩"字"!

遊戲棋盤可以是一張廢紙，當然也可以用電腦來玩，下面是 guaibao(阿寶老師)  在噗浪中分享的影片：

• 紐約數位學習中心珊珊師姊和昌棟師兄力用薛老師的教學方法做五子棋示範 http://www.plurk.com/p/53h9sh  

看到裡面用 Excel 做的棋盤來玩五子棋，利用 drag & drop 的方式有一點辛苦，於是我花了一點時間，做了一個 Flash 版的「漢字五子棋」。


生詞五子棋(三下國語第十課)

使用的時候只要告訴程式要產生多少格 x 多少格的棋盤，並給它棋格中要填入的文字，電腦可以依序或是用亂數將文字填入棋盤內。玩的時候只要在要放「子」的那格，用滑鼠點一下即可，剩下的就看玩的人怎麼運用。

可設定的選項

• font : 指定棋格裡文字的字體，預設用 "標楷體" 。
• fontsize : 指定棋格裡文字的字體大小。預設用 32 ，如果發現字會被格子的外框遮住再改小一點。
• boxwidth : 格字的寬度，預設為 40，如果格子數不多時，建議改大一點，這樣字也會跟著放大，可以看得更清楚。
• random : 格字填字時，是否要以亂數隨意填。random=0 時表示按 txt 中出現的順序來填字(詞)，random=1 時表示以亂數來填文字。
• showNumber : 是否在格子的左上角顯示格字的編號，這個可以方便多人分組合作時明確的指出字(詞)的位置。showNumber=0 不顯示編號，showNumber=1 顯示編號。 
• timer : 計時器每次倒數的時間。timer=0 不顯示計時器。
• col : 棋盤中，橫向要多少格。
• row : 棋盤中，縱向要多少格。
• win : 幾個子連成一線時算贏，預設值為 5 。
• txt : 準備填入棋格中的文字。有兩種格式：
  如果字一個字接一個字，完全沒有換行，表示一個格子填入一個「字」。例如：
  
  &txt=我的爸爸是漁夫&
  
  程式會在每一格填入一個字，上例共有「我」, 「的」, 「爸」, 「爸」, 「是」, 「漁」, 「夫」七個字，可以填入七個格子內。
  
  如果要填入的是生詞，就一個詞行一行，例如：
  
  &txt=我
  是
  教育
  噗浪客
  &
  
  程式共分析到 txt 裡有四行：「我」, 「是」, 「教育」, 「噗浪客」，有四個詞(字)，所以可以填入四個格子內。

設定檔的檔名

以上所提的設定可以寫在一個叫 gomoku_set.txt (或 set.txt ) 的文字內，以 UTF-8 的格式儲存，並和主程式放在同一個目錄中，這樣，主程式會自動讀取該設定檔中的設定值。
在瀏覽器內開啟 gomoku.swf 的話，設定檔的檔名就不一定要叫 gomoku_set.txt ( 或 set.txt )了，可以利用 datafilename 來告訴程式，設定檔叫什麼名稱，例如：

• gomoku.swf?datafilename=set2.txt

另外，可不可以不要用設定檔，直接在網頁裡將設定傳給 gomoku.swf 呢？
這支程式我採用了以前沒有試過的方式來讀取使用者的設定資料，不再只能靠單一設定檔來讀取設定，採雙軌並行，如果將 gomoku.swf 以 object embed 進網頁中，也可以抓取 FlashVars 的參數來設定程式，這樣，可能可以避免程式設定檔無法上載到某些網頁空間的問題，讓程式可以更彈性使用。例如，在這篇文章中看到的「生詞五子棋(三下國語第十課)」就沒有讀取任何設定檔，設定直接寫在網頁的 HTML 語法裡了，我在 blog 中加入了底下的語法：
-------------------------------------------------
<object align="middle" classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" height="412" id="spelling" width="550">
  <param name="quality" value="high" />
  <param name="menu" value="false" />
  <param name="allowFullScreen" value="true" />
  <param name="movie" value="http://mail.lsps.tp.edu.tw/~gsyan/works/flash/gomoku/gomoku.swf" />
  <param name="flashvars"
value="
&font=標楷體&
&fontsize=31&
&boxwidth=72&
&random=1&
&showNumber=1&
&col=9&
&row=6&
&txt=
一封
道歉
鉛筆盒
承認
摔壞
查問
趁機
偷偷的
聲響
竟然
摔破
指責
昨天
賠你
誠心
原諒
&">
  <embed src="http://mail.lsps.tp.edu.tw/~gsyan/works/flash/gomoku/gomoku.swf"
    width="550" height="412"
   quality="high" allowFullScreen="true" 
flashvars="
&font=標楷體&
&fontsize=31&
&boxwidth=72&
&random=1&
&showNumber=1&
&col=9&
&row=6&
&txt=
一封
道歉
鉛筆盒
承認
摔壞
查問
趁機
偷偷的
聲響
竟然
摔破
指責
昨天
賠你
誠心
原諒
&"
 pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash"></embed>
</object>
-------------------------------------------------

這種方式的好處是，只要找一個可以上載 gomoku.swf 的空間就好，設定直接寫在 blog 中。滿適合只有一個設定檔的程式。不過，有個小缺點，觀察一下前面的語法，為了讓不同瀏覽器都可以運作，同樣的設定內容要貼兩個地方才可以。

先這樣，有空再補充。

網頁範例及下載

網頁範例

• 網頁範例一 
• 網頁範例二 
• 網頁範例三

下載點

• 打包好的 .zip 檔

 更新紀錄

• 2012.01.26 修改了載入檔案的路徑，讓所有的相對路徑都會自動轉換為絕對路徑，解決了在 Android 開啟 .swf 檔案時所產生的路徑問題。
  將預設會載入的設定檔檔名改為 gomoku_set.txt ，為了相容於舊版的，set.txt 也可以使用，程式會依前述的順序一個個試。
• 2010.06.12 updated，讓連線成功的判斷更完整，0611的版本只會劃出找到的第一條線，現在會找出所有已成功的連線。在右下方的工具列多一個 "Text" 的按鈕，按下去以後可以編輯題庫的文字(不會存檔)，按完 "OK" ，會套用新的題目。
• 2010.06.11 updated，加入由電腦判斷輸贏的功能，並且加一個 win 的參數，可以設定幾個子連成一線時為贏。
• 2010.05.17 updated , 讓右下角的工具列永遠在最上層，以免被棋盤遮住。
• 2010.05.16 updated , 發現計時器在攻守交換後不會重設時間。
• 2010.05.14 將上方攻守方指示加入按鈕，可以按一下決定現在輪到誰攻。 加入計時器的選項(timer)，當倒數計時終了時，攻守會自動交換。
• 2010.05.14 加入在每格左上角可顯示編號的參數 showNumber，方便分組玩時隊友間可以立即指出哪一格。
• 2010.05.10 加入以詞為單位的方式來出題。
• 2010.05.09 首次發布。

相關噗文

• http://www.plurk.com/p/53h9sh
• http://www.plurk.com/p/53mjxj
• http://www.plurk.com/p/55r1oj