HTML5 FUN 的 DD Petals 花瓣字，在中文字上的應用，除了可以玩「寫字造詞」，也可以看部件，「寫部件湊成字」。「寫部件湊成字」出題跟回答都用部件，寫的部件還需要寫對花瓣(結構)，才算答對，無論是出題或回答，難度相對高一點。因此最近新增了一個新的玩法：看部件，「寫形近字」；這個遊戲模式，出題跟回答都是用完整的國字，題目以完整的國字來出題，程式會自動解析出當問題的部件，答案要寫出帶有題目指定部件的完整形近字。
▋ 中文部件字型的問題
中文的部件有一些在電腦或是行動載具的系統字型中，是沒有造字的，所以用純文字來顯示時，就會變成一個「方框」或是「方框叉叉」(如圖1) ......；看不出題目是什麼，自然無法回答案了！數位發展部的「全字庫」網站，有一個「字形即時顯示」，可以產生字的「圖片」；所以只要我們的程式能夠偵測出一個字是字型「不支援」的字碼，再利用全字庫「字形即時顯示」產生圖片，取代「方框」的位置，這樣子就可以重現字的樣子了。
例如：「鳥」、「島」和「裊」有共同的部件「」，哈！是不是看不出什麼字形！它的 Unicode 碼是「F61B5」，可以到「全字庫」「字形即時顯示」中，將字或是字碼，填入表單的「Unicode 碼」欄位，試著讓它即時生出圖片來看，網址如下：
 |
| [圖1] 中央的方框叉叉是未正確顯示的部件 |
▋ 偵測未支援字的方法
怎麼樣偵測字是看不出內容的「方框叉叉」「方框..」呢？以下是一個偵測的小程序：
/**
* 偵測字型是否支援該字
* @param {string} ch
* @param {string} font
* @return {boolean}
*/
function isGlyphSupported(ch, font) {
let probe = document.getElementById("fontProbe");
if (!probe) {
probe = document.createElement('div');
probe.id = 'fontProbe';
probe.setAttribute('style', 'font-size:32px; visibility:hidden; position:absolute;');
document.body.appendChild(probe);
}
probe.style.fontFamily = (font ? font + ', ' : '') + "monospace";
probe.textContent = ch;
const w1 = probe.offsetWidth;
probe.style.fontFamily = "monospace";
probe.textContent = ch;
const w2 = probe.offsetWidth;
return (w1 == w2 && w1 != 0 );
}
當我呼叫「isGlyphSupported("雄", "Arial")」它以比較設定字型 Arial 前後的「offsetWidth」是否一樣 (注意：早期的 iOS 10.3.4 中，不支援的字都會為 0)，來判斷該字是否被字型支援。「花瓣字」出部件的題型時，預設會在花的中央放部件的文字，如果「isGlyphSupported」回傳為 false，就將原來的文字隱藏，改載入全字庫的「即時顯示圖片」代替。用圖片有什麼缺點呢？載入時間需牽就全字庫網站，較難控制，而且字看起來有鋸齒是難免的。為了怕載入圖片的時間較長時，使用者以為程式當掉了，所以我加上了轉圈圈的載入動畫。底下 [圖2] 是修正完的結果：
 |
| ［圖2] 正常顯示部件畫面 |
▋ 哪裡玩花瓣字「看部件，寫形近字」
DD Petals 花瓣字「看部件，寫形近字」和「寫字造詞」都是以完整國字來出題，題目可以共用，花瓣字的側欄選單中 (按左上角三條線的圖示可以打開側欄選單)，有提供切換遊戲模式的選項及按鈕。所以由雄筆順的「花瓣字」選單進入 DD Petals 花瓣字的人，一個遊戲會有兩種模式可以玩。國語課本各版本各課生字筆順選單按這裡開啟。
▋ 卡關了怎麼瓣
個人的經驗，花瓣字一開始玩，造詞會比組字容易很多，組字明明有的字很常在用的，一時之間反而想不出來。當然，花瓣字當初的設計初衷就是希望能好玩、多寫，所以滿建議用 open book 的概念，可以邊查，邊動腦。部件怎麼查呢？全字庫 (https://www.cns11643.gov.tw/) 是一個很好用的資源，它的「字碼查詢」選單中的「IDS查詢」和「部件查詢」，都可以用部件來找字。
另外，花瓣字的題目如果是部件相關的，可以按上方「關卡:?」，會有小驚喜哦！哈～我是覺得這樣子滿好笑的：「卡關」了，就按「關卡」！
▋ 相關連結
發表文章
沒有留言:
張貼留言