2010年7月10日 星期六

Flash : Match2 對對碰 (2012.02.01更新)

我的第一個對對碰是在五年前開始認真玩 Flash 寫的小遊戲,當時教三年級,因此花了不少時間研究如何在國字旁加上直式的注音,給學生玩語詞的對對碰、部首的對對碰,學生反應還不錯。不過,只能應用在國語較短的詞語,字數不能多,也無法以圖片當題目。最近學校的事忙完了,加上不必像去年暑假要整天當奶爸,總算有時間可以好好的研究東西。
這一次的目標要讓對對碰具有以下的特性:

  • 可以用圖片當題目。
  • 字數不拘,由程式自動調整字型大小。
  • 可以在國字旁加注音,也可以使用純注音(直式)的題目。
  • 可以使用單一設定檔放題庫,也可以不透過設定檔,直接 embed 在網頁中,用 flashvars 來存放題庫。
  • 使用者設定好牌的張數以後,由程式自動調整每張牌的大小。
  • 讓題庫中的所有題目會被使用到。
經過兩天的研究,上述的目標算是都逹成了,其中,怎樣讓不帶注音的文字可以自動調整字型大小,和讓它可以自動算位置,排好看一點的演算法想最久,試了好幾種方法,最後是讓程式用土法鍊鋼,以字型大小慢慢遞減的方式找出最合適的大小,以電腦的速度來換取較完美的外觀。


範例展示

下面製作了三個範例:

選項設定

在這個新的碰碰中可以設定的選項有:
  • title : 出現在遊戲畫面最上方大大的標題字。
  • font : 字型(預設使用標楷體)。
  • maxCol : 出題時,橫向最多可以擺幾張牌(愈多愈小張)。
  • maxRow : 出題時,縱向最多可以擺幾張牌(愈多愈小張)。
  • questionMax : 出題時,一次由題庫中抓幾題。程式會檢查,當 questionMax 乘以 2 如果大於 maxCol 乘以 maxRow 時(或是沒有設定上參數時),會自動將 questionMax 設定為 (maxCol*maxRow)/2 (無條件捨去取整數)。
  • questionsToAnswer:出幾題後結束一局,如果 questionsToAnswer 除以 questionMax 無法整除時,真正的出題數可能會大於 questionsToAnswer。(2011.05.21 新增)
  • scoreAdd : 兩張牌配對成功,一次加多少分。
  • scoreMinus : 答錯時,一次要扣多少分。
  • cards : 題庫。每一題一行(按Enter),同一題應配對的(問/答),中間以半型逗號當分隔符號。
cards 可以用的題目格式有五大類型:
  • 圖片:可接受的格式有 .jpg, .gif, .png, .swf, .jpeg(2010.12.03加入) ,程式如果發現題目字串中帶有前述的附檔名關鍵字,就會把它當作圖片檔的檔案路徑,並試著將它載入。
  • 聲音:可接受的聲音檔格式為 MP3 ,程式如果發現題目為檔名而且檔案副檔名為 .mp3 結束,就會把它當作 MP3 檔案的路徑,載入成功後,會出現一個聲音的播放器。(2010.12.03加入)
  • 完全沒有注音的國字或英文。
  • 帶有注音的國字:採和語文高手相同的格式,一個國字加它的注音後空一格再接著下一個國字注音。可以利用語文高手題庫產生器來製作。
  • 純注音:這種和前面的國字注音類似,以一個空白隔開不同的字的注音,只差沒有國字。可以利用語文高手題 庫產生器來製作,再把國字去掉即可。
前述的四大類型可以自由的在 cards 中搭配使用。下面這個設定檔範例中包括了這四大類型:
另外,設定檔一定要叫做 set.txt (match2_set.txt) 嗎?
我們可以在呼叫 match2.swf 時加一個 datafilename 的參數,告訴它要使用哪一個設定檔,例如:
上面這個例子,match2.swf 會使用 datafilename 指定的 tpet.txt 來當做設定檔檔案名稱,並將它載入使用。
利用 datafilename 來指定設定檔,程式只要一支就可以搭配不同的題庫,可以直接利用網頁超連結來製作各課(單元)的選單。


檔案下載


相關文章

更新紀錄
  • 2013.10.09 將被選到的牌除了加上紅框外,顏色變深一點,以示區別。
  • 2012.02.01 修改設定檔載入的方式,並增加可讀取名為 match2_set.txt 的部份,以免原來用的 set.txt 檔名會和其它程式發生混淆的情形。
    修改國字加注音的部份。
  • 2011.05.22 在右上角加入計時器。
  • 2011.05.21 加入一個 questionsToAnswer 的參數,可以讓遊戲不會回答完題庫中所有的題目即可結束一局。另外,修正原來如果沒有設定 maxCol, maxRow, questionMax 會讓程式卡住的問題。
  • 2010.12.16 修正聲音題未正確的將播放器移除的問題。將 "Game Over!" 字樣換成 "恭喜你過關了!"(謝謝法國巴黎西郊中文學校王老師的建議)
  • 2010.12.03 題庫加入聲音檔(.mp3)的支援;圖片副檔名支援 .jpeg;卡被選取時改加紅色框框在最外面;卡片裡的文字如果太多、太長,將文字縮小、垂直置中的部份重寫。
  • 2010.09.09 修正調整純文字的題庫字型大小會陷入無窮迴圈問題。
  • 2010.07.19 前一次處理好英文斷字的問題,中文忘了檢查,換中文出問題。不過,現在這個版本絕對不會有問題了啦!
    新的體驗:當我們利用 AS 去更動到 TextField 的字型大小時,一定要重新指定 TextField.text 的內容才能得到其它參數(ex. maxscroll, maxhscroll) 的正確值,為了這個試了好久。
  • 2010.07.18 處理英文字斷字的問題,現在如果題目是純半型英數的,會以空格來切字(也就是一字一行),調整了自動計算字大小和擺放位置的方式,應該可以更精準的垂直置中。
  • 2010.07.15 GAME OVER 的判斷邏輯有誤,已修正。右下方的結束按鈕原來只適用於 stand alone 的 FlashPlayer, 在 Browser 中出現會造成誤會,現在將它 disable 並變透明。
  • 2010.07.14 加入 font 的參數,可以設定字型。如果題庫中的題目都答完,會出現 GAME OVER 的訊息。
  • 2010.07.09 解決 TextField 調整字型大小的問題。
  • 2010.07.07 起草

    63 則留言:

    1. 國雄老師辛苦了,做了這麼多好玩的遊戲可以分享給國外的孩子們,再此感謝國雄老師的分享!^_^

      from Seattle
      夢臨Jessica

      回覆刪除
    2. 夢臨老師好,
      您客氣了,遊戲存在的目的就要希望能夠讓更多的孩子們有所得。哈!分享真是一個好習慣。

      回覆刪除
    3. 7/16-7/18 在西雅圖經由阿寶老師的教導得知懶人包讓我不得不要向你們用力拍拍手,尤其遊戲更讓我驚喜萬分, 心中正想著可否改製作圖片和注音的對對碰 ,沒想到今日就看到你的新版本, 實在太感謝雄老師! 新手上路總要多花點時間,若有問題再請教老師, 謝謝!


      靜娟

      回覆刪除
    4. 靜娟老師好,
      有任何問題或建議,歡迎一起提出來討論,希望大家可以用得很愉快,孩子們可以學得更多。

      回覆刪除
    5. 雄老師,

      謝謝你的創意與分享.真是太感謝了.

      回覆刪除
    6. 顏老師您好,

      我是今年種子師資班的學生, 久仰您的大名, 常聽到老師們提起您超棒的網站! 很感謝您配對遊戲的教導, 終於將配對遊戲做出來在您建議的fileden網站上, 但是把網站連結到MOODLE時, 只顯示 "無法載入設定檔 : set.txt". 想請問老師應改如何放上MOODLE中? 謝謝老師!

      渝芬

      回覆刪除
    7. 顏老師, 不好意思, 找出問題所在了, 所以不用麻煩老師了. 感謝老師的網站, 提供我們這麼多華語數位教學的知識!

      渝芬

      回覆刪除
    8. 棒棒糖雄哥
      唉~你真是~太棒了(這話我好像說過很多遍了)
      好吧~只是找藉口來看你罷了~嘻嘻!

      你的崇拜者11上

      回覆刪除
    9. 渝芬老師,您好,
      您動作還真快,我還沒來得及看到您的留言,問題就解決了。恭喜!

      回覆刪除
    10. 可愛、聰明的 11 :
      要說崇拜,您可也是咱們的偶像之一呢!妳 blog 中的寶我都還沒挖完咧!
      謝謝妳來探班!

      回覆刪除
    11. 顏老師連暑假都不得閒, 真是辛若, 也謝謝您無私的分享.
      在此有一小狀況, 煩請您解決:
      在單機的IE狀況下操作, 若選擇靜音而且答錯的話, 則會出現訊息
      "影片中有一個Script會讓flash player的速度變慢, 如果繼續執行它, 電腦可能會停止回應, 你要停止這個Script嗎?"

      from 大楞子

      回覆刪除
    12. Dear 雄老師,
      My name is 周薇芳and I am one of the new Mandarin teachers in Orange County area. Today 陳老師 shared some of the games that you have created with all of us and we loved it!! For sure I will be using them in my teaching next semester!
      Thank you very much for sharing all your games with us and we really appreciate it.
      Best wishes!!
      周薇芳

      回覆刪除
    13. Thanks for the great games.

      回覆刪除
    14. 雄老師,

      我和阿寶老師都在南加州幫您打知名度。我們都介紹了您的遊戲。您現在在美國也非常出名啦!真的好感謝您花這麼多時間設計了這麼多好玩的遊戲。

      陳克曼

      回覆刪除
    15. 雄大師,
      您種樹,我們遮陰.感謝不盡.

      李乃芃,南加USA

      回覆刪除
    16. I really appreciate your effort and time spending on games. I like them all. I am sure I will use them in my classroom, and the kids will love them. Thank you very much for your contribution!

      回覆刪除
    17. 雄爸爸,謝謝你的五子棋的遊戲,我是洛杉磯的中文老師黃英,今天阿寶老師在文教中心教我們,真感謝你無私的貢獻與分享.

      回覆刪除
    18. 雄老師:

      您好! 今天我們研習會的老師介紹了好幾個您設計的遊戲,非常有趣!謝謝您大方的分享您的"智慧財產" ,你讓我們的教學多了好多的變化!再次謝謝!

      回覆刪除
    19. Hello 雄老師:

      Thanks very much for all your support and hard work. We are benefited a lot from you.

      Thanks again.

      Andrea

      回覆刪除
    20. 顏老師:
      您的辛苦,給了我們許多的方便.謝謝.

      Lee

      回覆刪除
    21. 上了阿寶老師的課,認識了你的好多遊戲,好感激你的用心做了很多遊戲,又不吝奢的和大家分享。謝謝

      回覆刪除
    22. 薇芳老師, Susan老師, 乃芃老師, Dany老師, 洪老師, Andrea老師, Lee老師, tammy老師,各位老師好,
      蓬蓽生輝,哇!好熱鬧。謝謝大家的造訪,希望您能用得愉快,孩子們可以玩得開心。

      回覆刪除
    23. 克曼老師好,
      感謝您和阿寶老師讓我出名了(臉紅中)。

      回覆刪除
    24. 雄老師,那是你的名號號召大家啦,我...就出一張嘴而已。瞧,大家多愛!!我明天去Berkeley,又要帶您出場囉!!(這是這個暑假最後一場會提到遊戲的機會了)再次謝謝您。

      回覆刪除
    25. 阿寶老師:
      您太客氣了!看您暑假南征北討的,甚是辛苦,您這塊寶可不得了,了不得!有去上課的,算他們撿到了,沒去上課的,肯定要搥胸頓足了。加油!

      回覆刪除
    26. 雄老師,

      我和南加州的老師們分享了您的最新「釣魚遊戲」、「語文高手」、「跳香菇」。與休士頓老師也分享了
      「語文高手」和「跳香菇」。老師們都好高興,也很感激您的分享。只是我沒有像阿寶想得那麼周到,請他/她們在您的部落格留言。在這兒代替他/
      她們跟您致謝!謝謝老師的無私。

      克曼

      回覆刪除
    27. 克曼老師好,
      你們太客氣了,只要那些小東西對孩子們有幫助,老師們有沒有留言沒關係。謝謝您可以讓它們更有價值。

      回覆刪除
    28. 國雄老師:
      我上了陳姮良老師的課,學到了你設計的各種遊戲(五子棋,火車,連連看,...),我想把這些遊戲放在我的教學網站.問題是,每個遊戲的附檔都是一樣的名稱(set.txt).請問,有沒有辦法讓每個遊戲有自己的附檔名?

      回覆刪除
    29. 芳杏老師您好,
      我最近的小遊戲除了使用預設的設檔定檔名,embed 到 blog(或一般網頁)中時,可以利用 FlashVars="datafilename=xxxx.txt" 來指定不同的檔名,甚至都不用設定檔,直接以 FlashVars 來設定題庫。在我 blog 的說明中有範例,華文網中也有。
      您先試試看,有問題,我們再討論。
      至於 "火車" 是布88的程式,印象中好像只能用預設的檔案名稱。

      回覆刪除
    30. 認真的雄哥,遊戲不斷更新及進步中,感恩.受惠良多.

      回覆刪除
    31. Claire 好久不見,
      開學了,相信您一定又非常的忙碌,加油!

      回覆刪除
    32. 親愛的雄老師:
      非常抱歉,對於flash是新手的我
      想要請教您關於Match2對對碰事宜
      看了您的網頁之後
      讓我深感佩服與心動
      若想要進一步設計相關關於英語字卡對對碰
      除了下載
      打包成 match2.zip 的檔案(最新版本 2010.09.09)之外,
      還需要其他程式嗎?
      因為我只從壓縮檔中修改set.txt
      卻無法成功播放
      可否麻煩您協助呢?
      巫婆老師敬上

      回覆刪除
    33. 巫婆老師好,很高興認識您。
      如果沒有出圖片題,對對碰基本上只需要一個程式( match2.swf ) 和一個設定檔(set.txt) 即可。
      不知道老師所謂的 "無法成功播放" 是如何操作的?
      如果您指的是無法直接開啟 match2.swf 的話,應該電腦中沒有 standalone 的 Flash Player, 真是如此,可以參考我flashcard那篇中的 "操作說明" 那段,去下載後再開開看。

      回覆刪除
    34. 感謝國雄老師無私的分享, 您分享的遊戲讓學習中文變的更加有趣,

      想請教國雄老師, 除了將游戲檔存放在 fileden外, 還有沒有其他方式,因為我將遊戲放在我的 moodle教室給小朋友自行回家練習,但 fileden好像不是很穩定, 有時 work, 有時不 work, 真的很困擾....希望國雄老師有解決方案,

      Love your games... Thanks again...

      回覆刪除
    35. 雄老師:

      請問數值該如何設定在顯示出題的時候才不會出現under****配一格空白?

      謝謝您.....

      回覆刪除
    36. Lisa 您好,
      薇菲老師最近做了一個「用Dropbox把自製題庫遊戲放在部落格上」您可以參考說明試試 Dropbox 的空間。

      回覆刪除
    37. 國雄老师您好:

      我是法国巴黎西郊中文学校的老师。

      谢谢您分享这么好玩的游戏,我的学生们都非常喜欢。

      有一个问题想请教您。在您的对对碰游戏结束时会出现Game over的字样,孩子们看到时都以为那表示他们没有通过这一关,因为在一般电子游戏中,Game over通常代表游戏者未能过关。

      我想知道是否有可能将Game over换成
      “恭喜你通过了这一关“ 或是 “你太厉害了” 之类的字眼?


      真不好意思,给您添麻烦了。

      非常感谢您的帮助

      王老师

      回覆刪除
    38. 法國巴黎西郊中文學校的王老師好,
      謝謝您的建議,已經將 "Game Over!" 換成 "恭喜你過關了!" , 請重新下載 match2.swf 置換掉即可。

      回覆刪除
    39. 国雄老师您好,

      谢谢您这么快就帮我把新版改好。

      我们学校的老师都很高兴能藉由您的游戏来提高孩子们的学习兴趣。

      衷心地感谢您

      王老师

      回覆刪除
    40. 王老師您好:
      您客氣了,要謝謝提供寶貴的意見,也讓我找到了另一個 bug。
      分享是快樂的,希望大家都能樂於分享,老師可以教得更精采,孩子們可以學得更愉快!

      回覆刪除
    41. 雄老师您好:

      我来自印尼,本人是语言中心的负责人。得知有这个网站让我非常得开心,帮了我不少的忙。有件事情想请教您,有关对对碰,当我存图档超过五张的时候,在播放时无法显示第6以上的图案,您的程式是否有限制图档的张数?(换了档名也不行)
      另外,有个小小的建议,是否可加计时器来增加游戏的紧张气氛?
      谢谢。

      印尼
      古老师

      回覆刪除
    42. 古老師您好,
      不知您在設定檔中的 questionMax 設定多少?
      方便的話,把遊戲的網址或是檔案寄給我,這樣比較容易知道問題在哪裡。
      下次改版時可以參考您加入計時器的建議,謝謝!

      回覆刪除
    43. 雄老师您好,
      谢谢您的回信,请问您的email信箱是什么?方便我寄给您。图档是否也要一起寄给您?谢谢!

      古老师

      回覆刪除
    44. 古老師好,
      昨晚已經發了一封 e-mail 到您留的 e-mail address (vineyardmandarin@gmail.com)

      回覆刪除
    45. 老師您好,請問一下原始檔是用fla檔製作的嗎?下面那個三角形介面要去哪裡更改?

      回覆刪除
    46. 發現這遊戲可玩性甚高,甚至可自定對對碰的內容。我拿給孩子和同事分亨,各人都玩得十分高興。謝謝你!

      回覆刪除
    47. 雄老師
      謝謝您的好遊戲!!!
      讓資源班孩子對於語文"測驗"不害怕!!!

      想請教您,在match2中如何在首頁製作目錄?
      想要製作像match1一樣的目錄..
      請您指導!!!
      謝謝
      ELLEN

      回覆刪除
    48. 雄老師
      謝謝您的分享
      讓資源班的孩子不害怕測驗
      喜歡以這樣的遊戲取代紙筆測驗或問答
      謝謝您

      想請教
      match2中如何做出目錄
      想要製作像match1一樣有目錄
      但自己弄不出來
      想請教您

      要麻煩您了!
      ellen

      回覆刪除
    49. 雄老師
      謝謝您的分享
      讓資源班的孩子不害怕測驗
      喜歡以這樣的遊戲取代紙筆測驗或問答
      謝謝您

      想請教
      match2中如何做出目錄
      想要製作像match1一樣有目錄
      但自己弄不出來
      想請教您

      要麻煩您了!
      ellen

      回覆刪除
    50. 雄老師: 您好!
      我是溫哥華的徐幸娟,謝謝老師開發了許多好玩的教學遊戲,讓海外的學生不再視學華語為無聊的事。最近下載老師的match2版本,依照老師的說明試著在cards下增加"voice/a_cow.mp3,一頭牛",也增加一個voice的次目錄與mp3檔;但測試時,畫面有出現撥放器圖案,點選它會發出聲音,但是卡片外面不會出現紅框,也就是說我點選"一頭牛"的卡片跟撥放器無法配對成功,想請教老師我的設定哪裡出錯?
      幸娟 敬上

      回覆刪除
    51. Ellen 您好:
      match2 如果想要做點單,可以利用網頁的方式來製作,請您先下載底下的壓縮檔:
      match-chinese-100-1-03.zip
      裡面的 index.htm 是選單,而設定放在 chinese-100-1-03 目錄中。
      您可以用「記事本」開啟 index.html ,觀察一下裡面的原始碼,特別注意 datafilename=xxxxxx.txt 的部份,是由這邊指定要 match2.swf 去開哪一個設定檔

      回覆刪除
    52. 幸娟老師您好:
      如果使用的是聲音配對,按聲音播放器的圖形(圖形)部份會是播放聲音的功能,要按圖形以外的區域才是選取該張牌。

      回覆刪除
    53. 雄老師:
      我是溫哥華的新手華文老師,目前教一年級,謝謝您設計這麼多寓教於樂的遊戲,我已經下載,再次謝謝您。

      Julli

      回覆刪除
    54. Julli 您好:
      希望可以對您的教學有所助益,也希望您的學生可以玩得愉快,樂在學習哦~

      回覆刪除
    55. 雄老師~
      您好~
      感謝您無私而智慧的創作
      讓孩子們享受學習的樂趣

      我們團隊和澎湖灣英語線上測驗
      一直在增加遊戲與題型
      汪老師教具鋪 http://www.wretch.cc/blog/cutemisswang/439414
      近期免費提供聲音和精美插圖
      讓我們義工製作成遊戲區 (請按go) http://etabc.tw/abc/f/default.asp?gid=8&bid=802&uid=80202

      我們有一個問題想請教
      六選一如果只選英文字(如附件圖)
      遇到英文字很長的,會連在一起
      我們之前將所有的英文字做成圖檔,非常耗時
      請問可以設定成斷行嗎?
      如將convenience store
      變成
      convenience
      store

      已將整個檔案mail給您
      感謝老師幫忙解決

      阿蓮 方雅玳 Anita

      英語單字達人網站
      http://etlady.tw/go

      回覆刪除
    56. (小豪)

      想請問雄老師 該如用 flash cs5 製作 一 個 完全屬於自己個人作品的 flash

      小遊戲 學生我正在為專題製作 煩惱 想請 雄老師指點名經

      回覆刪除
      回覆
      1. 小豪:
        現在市面教人寫 games 的書應該不少,建議您去找一找,翻一翻,找一本看得「對味」,看得下去的書,先照著書「練功」,等有一些經驗了,自然可以寫出完全屬於自己的作品。
        加油~

        刪除
    57. (小豪)

      請問 雄老師 像你做出來的 遊戲範例 是以怎麼樣的方式做出

      能否給我學我 一個指點

      回覆刪除
    58. 能否給學生我 一個指點

      回覆刪除
    59. 顏老師,我是一位特教老師,想套用您的軟體MATCH2參加特教自製教具比賽,
      輕度障礙特教學生能透過配對的模式有效學習,因此想藉此推廣,會註明軟體
      出處,期待您的回覆,謝謝。

      回覆刪除
      回覆
      1. 您好:
        歡迎使用,比賽完,有機會的話,也可以和大家分享您的作品哦!

        刪除
    60. 颜老师,您好,谢谢您制作的这些游戏,学生都好喜欢!想请问怎样把游戏embed到博客网页中呢,期待您的回复,谢谢!
      Vanessa

      回覆刪除

     
    © 2009. Design by Pocket