2010年5月12日 星期三

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

2010年5月12日 星期三

寫在前面

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

原文開始

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

遊戲棋盤可以是一張廢紙,當然也可以用電腦來玩,下面是 guaibao(阿寶老師)  在噗浪中分享的影片:
看到裡面用 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 中。滿適合只有一個設定檔的程式。不過,有個小缺點,觀察一下前面的語法,為了讓不同瀏覽器都可以運作,同樣的設定內容要貼兩個地方才可以。

先這樣,有空再補充。

網頁範例及下載

網頁範例
下載點
 更新紀錄
  • 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 首次發布。

相關噗文

38 則留言:

  1. 0516下午三點,中文數位教師協會(總部:美國北加州)的35位海外華文老師聚集一堂,一起來學利用漢字五子棋讓學生練習、復習生字詞,謝謝雄老師的好工具,嘉惠所有海外的華語文學習者。
    :)

    回覆刪除
  2. Guaibao:
    點子來自於妳們,我和我的學生也是受惠者,也要謝謝大家啦!

    回覆刪除
  3. 雄老師

    衷心感謝您不吝分享費心耗時製作的這麼多的教學工具.
    我在上週(北加州)中文數位教師協會研習會中學到如何運用您設置的漢字五子棋, 迫不及待要在班上讓孩子們輕鬆玩樂、沒有壓力下複習字詞. 已經可期教室內大小孩子(+媽媽們)熱鬧的歡笑聲! 謝謝您!!!

    游上儀

    回覆刪除
  4. 謝謝雄老師慷慨地分享精心製作的如此有吸引力的教學工具。5/16在中文數位教師協會的研習會上學到了您設計的漢字五子棋,真是獲益匪淺。與會的老師們將這一教學工具帶回學校,分享給夥伴們,大家正積極練習、熟悉操作,祈望在下學年普遍運用。謝謝老師的好工具,惠及所有華語文的學習者和教學者。

    建華

    回覆刪除
  5. 謝謝雄老師的分享! 讓我們的學生能有更多的方式來學習慢慢的愛上這個優美的文字. 海外的華文教學推廣仍然有許多的困難,尤其是進入主流,謝謝您的support!!

    許淑媛

    回覆刪除
  6. 上儀老師、建華老師、淑媛老師:
    大家好!知道這小小的程式對各位有所助益,心中也甚是歡喜。歡迎大家一來交流,讓孩子們可以在愉悅的氣氛下學得更多、更好。

    回覆刪除
  7. 雄老師,
    謝謝您花這麼多心思在教學上.5/16的中文數位教師協會的課使我受益良多,非常感謝!

    苓君

    回覆刪除
  8. 雄老師
    衷心感謝您分享精心製作如此有吸引力的教學工具. 讓我們這些海外華文老師又多了一個可以吸引學生輕鬆開心學中文的好工具。
    文娟

    回覆刪除
  9. 謝謝你!雄老師。
    真的很感謝你的幫助,讓我能跟孩子開心的學中文。


    北加州Fremont中文學校老師任維真敬筆

    回覆刪除
  10. 苓君老師、文娟老師、維真老師:
    很高興知道對孩子們的學習有所幫助。

    回覆刪除
  11. 雄老師,

    很謝謝雄老師在5/16的研習會中和海外的中文老師們分享你設計的五子棋遊戲, 真的非常吸引孩子們. 這種寓教於樂的方式實在是我們最喜歡的教學模式! 非常感謝你在中文數位教學上無私的奉獻!

    渝芬

    回覆刪除
  12. 老師:
    非常感謝您! 今天學到不少東西, 謝謝您得好工具!

    Keiko Ksaito81@gmail.com

    回覆刪除
  13. 謝謝雄老師的五子棋,我們受益很多. 希望還有機會學到更多.

    回覆刪除
  14. 老師,

    小朋友還沒有玩
    我們這些老師已經玩得好樂了
    謝謝老師
    也謝謝 阿寶老師把你介紹給我們
    暑假快樂
    有空帶小孩來灣區讓我們招待你們哦

    回覆刪除
  15. 0602中文教學(美國北加州,由Henny陳老師 授課) : 非常謝謝雄老師的精心設計游戲。覺得中文薪火相傳的意義非凡。 謝謝您 ﹗
    童文妍

    回覆刪除
  16. 雄老師,
    我今天在美國華文教師研習課中初次見識到你設計的五子棋遊戲,覺得很有趣,很棒喔!期待你的新作......

    fumin

    回覆刪除
  17. 謝謝顔大師的五子棋,圖文連連看,戳戳樂...,真的好精彩呀!謝謝您的用心,更謝謝您的慷慨分享,讓海外子弟可以在歡笑聲中快樂學中文!

    回覆刪除
  18. 我們今天在舊金山的文教中心學習使用您的漢字五子棋,真的很好用,謝謝雄老師的好工具,感恩啦!

    回覆刪除
  19. 今天在灣區僑教 學習您設計的遊戲 謝謝老師慷慨的分享 令我們受益良多 我將在課堂上靈活應用 因為有像您一樣熱心可愛的人 世界更加的美好

    回覆刪除
  20. 雄老師,
    我們今天在加州學您所創做的中文遊戲,真的很有用. 如果帶到教室 去給學生邊玩邊學, 一定會引起他們的興趣. 謝謝您!
    陳老師

    回覆刪除
  21. 各位老師,大家好:
    很高興聽到我寫的小玩意兒對諸位的教學及學生們的學習能有加分的效果,歡迎大家一起來交流,相信我也能從各位那裡獲得不少寶貴的經驗。

    回覆刪除
  22. Dear 雄大師,
    我是金山灣區中文學校的老師董希宣,六月二日經由阿寶老師(Henny)的數位互動遊戲課程的介紹,認識了您精心設計的多種教學工具,不但是我們老師的福氣,更是孩子們的福氣。感恩您!

    回覆刪除
  23. 雄老師,

    您的動畫遊戲實在太棒了!幫助了許許多多的僑校老師!這一次的五子棋更棒。可以直接貼到部落格,將會大大降低數位門檻。您應該得到一面:「功在僑教」的錦旗。

    陳克曼/克曼老師

    回覆刪除
  24. 克曼老師、董老師:
    謝謝你們的欣賞,過獎了啦!看了怪不好意思的。能在網路認識大家也是一種緣份,互相交流啦!

    回覆刪除
  25. 顏老師,

    可以給我您的email address 嗎?有問題想請教。我的email是kermankwan@gmail.com. 謝謝!

    回覆刪除
  26. 雄老師
    我是法國巴黎的中文老師,透過華文網的教師BLOG看到您不吝分享的學中文小工具,真是滿心感謝!這學期我會和我的法國成人和僑校學生分享這些學習工具。
    謝謝您,老師!

    回覆刪除
  27. Wu 老師好,
    很高興認識您,希望那些小東西能對你們和你們的學生有所幫助。

    回覆刪除
  28. 雄老師
    五子棋可否用簡體字輸入?我以前都是用一張張的紙製作,很浪費時間。看到你的設計,太棒了。謝謝。

    回覆刪除
  29. Liu 老師您好:
    五子棋的設定檔是以 UTF-8 的編碼儲存的,您打什麼字,它應該就會顯示什麼字,跟正簡無關。
    其實這個問題您可以自己試試就知道答案哦!
    很高興認識您。

    回覆刪除
  30. 雄老師您好

    再次謝謝您的五子棋遊戲,我用來給學生複習詞彙,一點都沒有壓力。可是今天要再使用的時候,chrom無法讀取檔案。我不懂HTML語法,試著改了您寫的HTML
    詞彙內容還有裡面的網址,我猜應該貼我的DROPBOX link。結果居然可以出現在MOODLE裡面。我好開心,直到剛剛看到新聞說,新版的CHROM不再支援FLASH,我才了解為什麼。我想請問,以後我能怎麼辦?還有配對遊戲、草莓姑娘、、、很多遊戲是否都不能用了?學生端電腦是否也會有一樣的問題?好可怕啊!!

    徬徨的小方

    回覆刪除
    回覆
    1. 小方您好:
      Browser 中不支援 Flash 應該是趨勢, 但是如果不使用 Browser, 我們仍然可以利用自己機器中的 Flash Player 程式來開啟 Flash , 只是如果您是要放在網路平臺中讓學生透過網頁來使用,應該會有麻煩。
      單機使用的方式, 可以參考我寫的這篇:

      http://gsyan888.blogspot.com/2016/09/flash-player-projector.html

      刪除
  31. 雄老師您好

    我試著用上面的嵌入語法放到moodle中,居然成功了!!您寫的另一種方式,鐵定也好用,謝謝您的說明,不管那一種,都要謝謝您的耐心解說。能夠讓學生玩中學真的好棒!

    開心的小方

    回覆刪除
  32. 雄老師您好:

    我下載了「打包好的.zip」,不能執行。再依您的說明去下載了「Flash Player projector」,就可以玩了。
    雖然在遊戲畫面右下角有「text」可以變更字詞內容,但如果要直接在set檔內變更字詞,好像都不管用。又,如果要變更行、列數(格子數),請問要在哪個檔變更呢?「打包好的.zip」解壓縮後,產生了5個文字檔(set檔),哪一個才是swf會去引用參數的檔?

    謝謝!

    回覆刪除
  33. 雄老師您好:

    我去改gomoku_set檔裡面的行、列參數,然後存檔。執行後,格子數依新參數更改了,可是字詞全變成亂碼。 請問該怎麼辦呢?

    回覆刪除
  34. 作者已經移除這則留言。

    回覆刪除
  35. 雄老師您好:

    從十幾年前就開始用您的五子棋了。其中經歷了Chrome 不支持Flash的痛苦時期,可是後來看到您的一個PO文讓我們下載一個東西(可能是Flash Player Projector 吧,不太確定)後就又可以玩了。

    一年前左右我學校電腦換了,現在又想再玩一玩這個遊戲,可是剛剛找了一下,沒看到太多的Flash Player projector下載網站。終於找到一個,下載了,可是好像也不太有用(或是不太知道怎麼讓它能被用)。

    真的不清楚到底怎麼了。想請教老師是否有較好的Flash Player projector下載網站,然後指點我們該怎麼做好嗎?

    謝謝您~

    一個需要備課可是非常頭痛的中文老師。

    回覆刪除
    回覆
    1. 找到一個連結,希望對和我一樣有問題的老師們有些幫助:
      https://www.howtogeek.com/438141/how-to-play-adobe-flash-swf-files-outside-your-web-browser/

      刪除

 
雄::gsyan © 2009. Design by Pocket