2023年5月26日 星期五

Biking : 阿柔洋產業道路

2023年5月26日 星期五

天氣狀況 : 晴
TRIP DIST : 27.64
TRIP TIME : 1:53:56
AVG. SPEED : 14.5
MAX. SPEED : 45.3

繼續複習附近的山路,今天選的是阿柔洋產業道路。過往古媽祖古道的路口才想到,好像沒有幫往媽媽老家那條路拍張照,於是又回頭補拍。

古道入口

往老家的小路

往石媽祖古道的路比較寬,而通往老家的路只有小小一條,印象中,之前上山時,那路是青石舖的,雖然舅舅也給了我一支老家的鑰匙,但從來沒有自己去過。

阿柔洋的第一K就是挑戰,幸好我不是第一次騎,知道是挑戰,也就不衝動了,雖然沒衝動,還是踩得很累就是了。

阿柔幹73

踩著踩著,突然發現這一路的交通標誌似乎特別的矮,怎麼一點印象都沒有。在阿柔幹73 (B7629 EA84 , B7629 GC13) 旁的限速標誌就這麼可愛。特別將電線桿的編號拍下,想說可以玩一下利用電線桿定位,不過那編號查到的卻是在金山,再研究囉!

今天展望其實不錯,可惜手機拍不出它的美。


路過青山小站,可能因為不是假日的關係,大門緊閉,也沒人在活動。這最後的坡騎了一小段,最後還是決定高尚一下,留一點「青山」好了。

沒車也沒人,可以放心的在這「碎心坡」拍照。不過,下山時,還是老樣子,總是邊騎邊想,萬一煞車失靈時,應該要往哪裡「撞上去」,損傷會小一點,哈!這坡實在太陡了!

2023年5月23日 星期二

HTML5 FUN : 數學小白板

2023年5月23日 星期二

HTML5 FUN 數學小白板是 2023年1月建立的一個實驗專案,主要是想做一個可以不斷擴充模組的數位學習工具。哈!當然還是那個壞習慣,沒日沒夜地衝了一陣子,因為又把時間花在別處,就擱著沒動了。隔了幾個月,這兩天又拿出來加了個骰子的模組,稍微整理一下目前的內容,記錄一下。

[圖1] HTML5 數學小白板

物件簡介

HTML5 FUN 數學小白板中的物件,主要可以分為兩大類:

  • 容器:可以將一般物件拖曳到容器中,將物件加入容器通常會有特別的功能;將其它物件拖離容器的範圍後,物件就會由容器中移出。
  • 一般物件:除了運算的物件,大部份的物件都代表著某個數值。一般物件可以拿來進行計算。

目前 HTML5 FUN 數學小白板可用的物件簡介如下:

小白板

小白板元件是一個「容器」(圖2),我們可以將其它的物件拖曳到「小白板」上,如果有「等號」的物件,「小白板」下方會多一個「送出算式」的按鈕,按下這個按鈕,「小白板」會計算並檢驗「等號」物件左、右兩側的數值是否相同。

[圖2] 具有驗證算式功能的小白板容器

數值天平

數值天平是一個「容器」(圖3),我們可以將帶有「數值」的物件拖曳到天平的秤盤上疊在一起,天平可以依數值大小的改變而作反應。


[圖3] 可互動的數值天平

分數條

它是一個「容器」,可以將分數條拖曳到分數條中,就能進行多個分數的比較,可以應用在等值分數的學習中。拖曳分數條的「小三角」,可以改變著色的範圍。如果對準分數條「長按」,會出現設定的選單,設定分割的方式及顏色等選項。

運算子物件

運算子物件可以應用在表達計算式中;對著運算子物件長按不放,即可出現設定的選單。

整數物件

數數物件用來代表某個物件上數字的數值;對著物件長按不放,即可出現設定的選單,調整它的數值。

數字型分數物件

數字型分數物件用來顯示真分數或是帶分數;對著物件長按不放,即可出現設定的選單,調整它的數值。

圖形式分數物件

圖形式分數物件有圖形、直條、橫條三種圖形,用來表示真分數。對準分數圖形的某一分割區按一下,可以著色,或是取消著色。對著物件長按不放,即可出現設定的選單,可以選擇圖形形狀,設定圖形大小,調整它的數值,甚至複製圖形。

骰子物件

骰子物件上的點數就代表它的數值,如果按一下,它就會重新取得新的數值。

使用與移除物件

要使用前述的那些容器,或是一般物件,都可以從畫面左側的「陳列區」中,拖曳進畫面中央;如果不想使用了,就將物件拖曳到畫面右下角的「回收區」中刪除。

操作影片


玩一玩

光看怎麼會過癮,想體驗一下 HTML5 FUN 數學小白板的功能,就按底下的按鈕進入,有什麼心得或是建議,歡迎在本篇最下方旳留言處留言。

PLAY

相關連結

更新記錄

  • 2023.05.22 加入骰子。
  • 2023.01.09 初稿。


2023年5月20日 星期六

HTML5 : Crossword 填字遊戲

2023年5月20日 星期六

平常很喜歡和小孩一起看公視的節目「一字千金」,2021年11月做了一個 HTML5 Crossword 填字遊戲,就是發想自節目中的成語遊戲遊戲「洞築機先」。 HTML5 筆順練習程式本來就已經有了畫國字部件的基礎,最複雜的隨機出題畫格子填字的部份則是在 Github 中找到了 Matt Johnson 的這個 Crossword-Generator 專案:

只稍微小小加一點料就能應用HTML5填字遊戲中了。不過程式雛形完成後,再也沒動過,連出題的說明文件都沒寫,就這麼放著。時值 2023年5月,HTML5 FUN 中的遊戲一個個地改版,支援 HTML5 FUN 烘焙機, HTML5 填字遊戲怎麼可以丟著不管,於是用了幾天,更改了題庫的格式,調整了程序,臭蟲也順便解決掉。本篇就來簡單地介紹這個 2021年末的「HTML5 填字遊戲」。

功能與特色

HTML5 填字遊戲在讀取設定檔中的題庫以後,會自動繪製帶有謎底的格子,一個格子放一個字,如果在格子上按一下(如圖2),會出現輸出對話框等候使用者輸入該格子的答案(如圖3);答對的話,格子會變成綠色,答對則會變成紅色。所有格子都答對的話,即完成一關;如果有多關,則可以進入下一關,繼續挑戰。玩的過程中,隨時可以按畫面右下角的問號切換成提示模式(如圖4),再按一下帶有問號的格子(如圖5),即可查看提示(如圖6)。

[圖1] HTML5 填字遊戲歡迎畫面

底下為輸入答案的截圖:

[圖2] 點選要輸入答案的格式
[圖3] 輸入篒案

作答時可以隨時查看提示:

[圖4] 按一下切換成提示模式
[圖5] 點選要查看提示的格子
[圖6] 查看提示


HTML5 填字遊戲有以下的功能與特色:

  • 可跨平臺使用:只要支援 HTML5 的瀏覽器就能玩。
  • 可自訂題庫:可以使用多個有部份字相同的中文語詞來出中文的填字遊戲,或是多個有部份字母相同的英文單字來出英文的填字遊戲。
  • 可自訂要遮蔽的中文字筆畫:謎底如果是在教育部筆順網中所包含的六千多個中文裡,可以下載到謎底的筆順,就可以將謎底中文字的部份筆畫遮蔽不顯示,增加遊戲的趣味與難度。
  • 可自訂每個謎題的提示。

玩玩看

HTML5 填字遊戲的程式與範例題庫,與其它 HTML5  FUN 的遊戲一樣,可以在 HTML5 FUN 的網站中找到,只要找到 HTML5 填字遊戲的圖示,即可玩玩範例題庫,或是下載打包好的遊戲壓縮檔案。HTML5 FUN 網站的網址與與連結如下:

本站中, HTML5 FUN 遊戲或工具的相關說明文件,全部都匯整在「雄 : HTML5 FUN 精選集」這份清單中:

打造自己的填字遊戲

玩 HTML5 填字遊戲的範例題庫一定是不過癮的,來打造自己的填字遊戲吧!

先來了解一下 HTML5 填字遊戲的題庫設定格式:

  • 每一題必須由多行組成。
  • 每一行就是一個詞語,必須至少有「謎底」、「提示」兩個欄位;欄位跟欄位之間,使用兩個井字號「##」當作欄位分隔符號。例如:
    • 兵家常事##很平常的事情。
  • 中文題則可以再加第三個欄位來指定字要顯示的筆畫(沒有指定筆畫,會以亂數自動選取)。例如:
    • 兵家常事##很平常的事情。##0;1-3;1-5;1-8
      • 上面的例子指定了四個字要顯示的筆畫:
      • 兵: 0 ,完全空白。
      • 家:1-3 ,顯示家的 1-3 畫。
      • 常:1-5,顯示常的 1-5 畫。
      • 事:1-8,顯示事的 1-8 畫。
  • 同一題的多行詞語,必須一行接一行,想結束該題,就在下一行填入「=====本題結束」。

是不是用任何字詞都能成功出題?

當然不是,這個遊戲的謎底跟謎底之間,一定要有字是一樣的,才能讓橫的謎底,跟直的謎底串接在一起。不然是無法變成題目的,所以要思考一下選用什麼謎題比較合適。

底下利用一些出題時的關鍵描述,可以使用 Bing Chat 或是 OpenAI ChatGPT 3.5 來幫忙出題:

你是一個中文老師。請選四個成語,不要自己創造,每個成語都四個字,第一個成語和第二個成語有一個字一樣,第二個成語的最後一個字當成第三個成語的一個字,第四個成語的一個字和第三個成語相同。請提供成語及其簡單解釋,格式如下:成語##解釋

來看看 Bing Chat 出的回應情形(圖7):

[圖7] 以 Bing Chat 來出填字遊戲的題目

這是 Bing Chat 出的題目:

一心一意##專心致志,不分心
一意孤行##固執己見,不聽勸告
行雲流水##形容動作敏捷,不受拘束
水落石出##比喻事情的真相顯露出來

文字接龍向來是 ChatGPT 的長項,用這一類的 AI 輔助出題,只要在提示語再加一點點限制即可導出我們要的題目了。

好了!準備做一個自己的 HTML5 填字遊戲了嗎?

請按底下的圖示,打開「HTML5 FUN 遊戲式題庫烘焙機」,利用 HTML5 烘焙機,來打造自己的填字遊戲:


相關連結

更新記錄

  • 2023.05.20 筆順資料合併音檔路徑與部件設定(由本機檔案查詢);題庫沒部件欄位者,先試著由筆順的部件設定中去掉一個,再沒有者就取三分之一筆畫。
  • 2023.05.19 在載入筆順資料後,稍微等一下下,以免筆順出不來。
  • 2023.05.17 支援 embed mode; 修改題庫格式,題目結束改以只有單欄的那行當標記;支援英文(非中文、沒有筆順)的題目。
  • 2021.11.21 解決 inputDialog 取消按鈕沒作用。
  • 2021.11.20 依視窗大小調整縮放比例;輸入答案棄 prompt 改用自訂的界面,以免計時器暫停;解決筆順繪製的 bug (改在 lime.CanvasContext 的 draw 中繪字)。
  • 2021.11.17 加入提示、計時器的功能。
  • 2021.11.15 草稿。


2023年5月18日 星期四

Biking : 石碇淡蘭古道

2023年5月18日 星期四

 天氣狀況 : 晴

TRIP DIST : 30.32
TRIP TIME : 1:51:28
AVG. SPEED : 16.3
MAX. SPEED : 41.5

很久沒到石碇騎車了,比較晚出門,就來輕鬆的路線,由淡蘭吊橋過到對岸,走溪邊的淡蘭古道。

淡蘭吊橋

已經四點左右了,沿路仍遇到零星的遊客,大部份的人都用異樣的眼神看著我,哈!沒辦法,這種小路,把自行車騎進來的,是不太常見。

淡蘭古道

快到石碇西街的出口時,有兩位女士同行,其中一個還忍不住地說「好厲害啊!這麼路也能騎車。」,我回說:「不會呀!這種路其實還好。」。是的,她如果知道我上一回去炮子崙步道,大部份是「被車騎」,就會知道,這其實是小意思而已。

到了老街,看王家豆腐還開著,問店員還有沒有豆漿,果不其然已經賣完了。在老街前的水池旁休息了一下下,就又踩著踏板,往回程的路上去了。

在深坑等紅綠燈時,順便拍一張炮子崙方向的山頭

右側電塔旁的猴山岳前峰

那天就是由左側電塔的路,從柏油路變水泥路,再由水泥路變山間小徑,一路爬高,翻過山頭,往右側電塔旁的猴山岳前峰前進的。哈!山不高,但是扛車扛得滿身大汗。

相關連結


2023年5月16日 星期二

好用工具精選集

2023年5月16日 星期二

用 Blogger 有個小缺點,文章一多,稍早的舊文就可能後續的文章淹沒;雖然都有加上標籤跟搜尋區塊,畢竟不是每個人都知道去使用。所以這一則就把我 Blogger 中的一些常用的工具介紹文章連結整理列表,並且將本篇的連結加在 Blogger 的側欄中。如果是 HTML5 FUN 相關的,則是放在「HTML5 FUN 精選集

好用工具精選集

相關連結


JavaScript : blur() 與按鈕的連發

朋友說學生在玩以 HTML5 FUN 烘焙機製作的遊戲時,發現空白鍵多按幾下,遊戲畫面會有「重影」的情形。聽起來應該是遊戲重覆載入了,本以為是單一遊戲的問題,試了一下,其實是HTML5 FUN 烘焙機啟動遊戲流程中的臭蟲。

在網頁瀏覽器中,按鈕除了可以用滑鼠按下,當按鈕已經「焦點」時(例如利用鍵盤的 Tab 鍵去按,一次次換焦點,直到目標變成焦點後不再按 Tab 鍵;或是剛剛被用滑鼠按過),我們也可以按鍵盤的 Enter 鍵;除此之外,按鍵盤的空白鍵也可以的(當網頁中沒有任何物件是焦點時,以 Chrome 來說,按下空白鍵是跳到下一頁)。

整理一下關鍵點,用鍵盤按按鈕的兩個條件:

  • 焦點已在按鈕上。
  • 按下 Enter 鍵或是空白鍵。

嵌入網頁的 HTML5 FUN 遊戲是在 [PLAY] 鈕按下去以後載入程式,按完後焦點仍然停留在 [PLAY] 鈕上,所以在還沒有用滑鼠按其它物件之前,按了鍵盤的 Enter 鍵或是空白鍵,變會再載入並啟動一次遊戲,多按幾次 Enter 鍵或是空白鍵,應該該會呈現當掉的狀態。

按鈕「連發」的測試

來做個小實驗,下面有兩個按鈕,每成功按一次,中央的計數的數字就會加一。第一個按鈕是沒有特別處理的按鈕;第二個按鈕則會檢查有沒有連續地按,必須在按完後間隔一秒鐘,按了才會作用,讓數字加一。

實驗的方法是:

  1. 用滑鼠按按鈕,看中央的數字是否有累加。
  2. 按鍵盤的空白鍵,看中央的數字是否有累加。

0

如何讓按鈕無法連按

第二個按鈕經過處理後,滑鼠按完,如果又接著按鍵盤的空白鍵,不但沒讓數字累加,還將網頁的頁面捲了一頁(恢復為原來 hot key 的功能)。動了什麼手腳?

其實應該分為兩部份,一是如何讓按鈕在滑鼠按完以後,無法接著用空白鍵或 Enter 鍵來按,再來是控制下一次可以再按的時間點。

第一項任務比較容易完成,只要讓按鈕從 focus 變成 lost focus ,也就是讓按鈕執行 blur() 就好。例如按鈕物件是 btn,就執行:

btn.blur();

第二項任務,讓按鈕不能「連發」,可以利用一個變數來當旗標,不存在,表示首次按,按完就先設定變數內容,再利用 timeout 來設定在一段時間(看想多久後開放下次可按按鈕)後,執行將變數清除的指令;否則如果旗標存在的狀況,就不再繼續執行正常的動作(如本例中的,將數字累加)。

//讓 button lost focus, 以免按空白鍵也觸發
btn.blur();
//避免短時間內連續執行,有發現重覆執行就暫停 
if(typeof(window['clickEnable']) == 'undefined' || window['clickEnable']==null) {
  //首次按,設旗標
  window['clickEnable'] = true;
  setTimeout( function() {
    //時間到後清除旗標
    delete window['clickEnable'];
  }, 1000);
} else {
  //連續按了,不執行後面
  return;
}

//正常的程序

常常覺得,有人能發現自己的缺點是一件幸福的事;發現了問題,又能將問題處理掉,讓人、事、物更完美,能不幸福嗎!

相關連結


2023年5月15日 星期一

JavaScript : 去掉 HTML 原始碼中的程式部份

2023年5月15日 星期一

 我 Blogger 中的文章清單是讓它取每一篇文章的前 140 個字當摘要顯示,之前偷懶,沒有將 JavaScript 的程式碼去掉,摘要就被程式碼佔掉了不少字數。原來大部份的文章是沒有什麼影響,因為帶有程式碼區塊都是放文末居多,但這一次將程式碼放在最前面,可就慘了。為了解決這個問題,只好重新再調整樣版的程序,多一道將 JavaScript 程式碼去掉的步驟。

去掉 JavaScript 當然是要使用正規語法來搜尋最快,大概是這樣:

htmlString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '')

將正規語法拆解,筆記一下重點:

  • /<script\b 可以找到 <script (沒有大於符號)。
  • [^<]* 找到任何除了小於符號 < 以外的字元。
  • (?:(?!<\/script>)<[^<]*)*   找到任何字元,一直到發現 </script> 為止。
  • <\/script>/ : 找到 </script> tag.
  • /gi : 使用 g 的旗標,找到所有符合條件者;使用 i 的旗標,不分大小寫。

如果還要去掉其它所有 HTML tag 的部份,就再做一次這個規則的:

htmlString.replace(/<[^>]+>/g, '')

用這個語法找到小於符號 < 開頭,直到大於符號才停止的字串。

將去掉 JavaScript 程式碼、去掉其它 tag 和去掉換行字元及跳格字元 (\n|\r|\t) ,全部合在一起,變成:

htmlString.replace(/<script\b[^<]*(?:(?!<\/script>)<[^<]*)*<\/script>/gi, '').replace(/<[^>]+>/g, '').replace(/\n|\r|\t/g, '')

哈!看似完美,我搞了個大烏龍。上面的語法是用來去掉 HTML 原始碼的,但是我原來抓文章內容是用:

post.textContent

用 textContent 就不會有 HTML tag 啊!結果當然沒有如預期去掉想刪除的部份。所以必須改為使用:

post.innerHTML

重新設定為處理過的內容也是必須使用 innerHTML。

另外,因為是放在 Blogger 的樣版中的 JavaScript ,所以特殊符號(像大於、小於、引號... )也必須先編碼過,不過會出現 XML 解析的錯誤訊息。

最後用的是:

<script type='text/javascript'>var post=document.getElementById(&quot;p<data:post.id/>&quot;), summary=post.innerHTML.replace(/&lt;script\b[^&lt;]*(?:(?!&lt;\/script&gt;)&lt;[^&lt;]*)*&lt;\/script&gt;/gi, &#39;&#39;).replace(/&lt;[^&gt;]+&gt;/g, &#39;&#39;).replace(/\n|\r|\t| /g, &#39;&#39;).substr(0,140); post.innerHTML=summary+&quot;......&quot;; </script>

有一些「眉眉角角」還是得記錄下來,太久沒用,忘得差不多了。


打造自己的遊戲 : HTML5 FUN 烘焙機大彙整

雄的 HTML5 FUN 網站提供了一些不用安裝,可以直接在網頁瀏覽器中使用的數位學具與教具,它們除了可以使用已建立好的題庫,還可以打造成自己的工具或是遊戲。

如果想試玩各個遊戲或工具,就到 HTML5 FUN 網站,網址如下:

如果想查看各個遊戲或工具的詳細說明,或是手動建立題庫的方法,請參考「HTML5 FUN 精選集」:

如果想製作可以放 Blogger、Google Sites 或其它網站的 HTML5 FUN 遊戲,就請繼續看下去,使用 HTML5 FUN 烘焙機來幫您打造自己的遊戲。

遊戲式題庫烘焙機 (HTML5 FUN Homepage)

什麼是「遊戲式題庫烘焙機 (HTML5 FUN Homepage)」?

這個「烘焙機」是我和好友江明勳老師經過一番討論後,幫 HTML5 FUN 遊戲製作工具所取的名稱 (「Homepage 烘培雞」的聯想)。

HTML5 FUN 的遊戲題庫彈性其實可以很大,透過題庫設定,可以自訂題庫內容,打造自己的遊戲。為了方便大家能在網頁瀏覽器中即可設定,最後還能將遊戲放到網站中使用,無論是 Blog、Google Sites、Weebly 或是其它網站中,都可以使用 HTML5 FUN 烘焙機來製作嵌入的語法;甚至下載為單一遊戲網頁,打開來就可以在本機玩。

目前 HTML5 FUN 大部份可自訂題庫的遊戲都有支援烘焙機,打開烘焙機以後,即可看到已支援烘焙機的遊戲清單,並由清單中選取想製作的遊戲;有的遊戲還支援多種題庫設定範本,製作時可以參考範本,輕鬆設定。

HTML5 FUN 的烘焙機,只要三大步驟就可以製作嵌入網頁的HTML語法;貼入 Blogger 、Google Sites 或網頁中,即可分享、使用自製的 HTML5 FUN 遊戲。

製作 HTML5 FUN 的遊戲就是這麼簡單,讓我們馬上按底下的啟動按鈕,打開「HTML5 FUN 烘焙機」製作自己的 HTML5 FUN 遊戲吧!

相關連結


    2023年5月14日 星期日

    LimeJS : 無法載入多個編譯過的遊戲

    2023年5月14日 星期日

     HTML5 FUN 的遊戲與工具大部份是使用 LimeJS 這個 HTML5 game framework 開發的,記得以前曾經試著在不重新載入頁面,動態載入第二個遊戲,但總是卡在一個看不懂的錯誤訊息,也沒去細究問題在哪裡(其實當時也看不出來啦!),最後就這樣擱著。最近打算將 HTML5 FUN 遊戲的製作工具「遊戲式題庫烘焙機 HTML5 FUN Homepage」全部整合在一個頁面中,不得不去面對「在不重新載入頁面,動態載入第二個遊戲」的問題。在一堆已經看不出意義的英文字母中研究了兩天,總算是找到問題了。

    當我們利用 lime.py build  並加上參數「-a」時,程式中大部份的變數的幾乎都為了縮短名稱而較難識別,只能從一些字串內容或沒被改名稱的函數來當特徵,去找到問題點。

    問題點一:closure/closure/goog/dom/dom.js 

    觀察了一下,每次在不重新載入頁面,動態載入已經編譯過的第二個遊戲時,會出現類似這樣的錯誤訊息而無法繼續:

    Uncaught TypeError: Cannot read properties of undefined (reading 'querySelectorAll')

    比對了兩個遊戲已編譯的的程式碼後,由二支程式中有呼叫「querySelectorAll」的地方往回追溯,有一個全域變數的名稱和第一支程式的一樣;如果重新整理頁面,把兩支程式轉入的順序顛倒,雖然追到的變名稱不同,但是發生錯誤的原因都是一樣,有全域變數被覆蓋了。追到這個函數裡的全域變數「pa」了問題:

    function Ob(a) {
      return a ? new Pb(Qb(a)) : pa || (pa = new Pb)
    }

    而它的宣告段落是這樣:

    var pa;
    var qa = String.prototype.trim ? function (a) {

    註:第二行是故意留作記錄的,「.trim」是找到「pa」的特徵點。

    很明顯的,pa 並沒設定初值,導致第二支程式載入後,pa 因為已存在,不會用新的,然後也不是原來的要使用的物件,就發生錯誤而中斷程式了。

    追本溯源,比對了原始碼,總算找到 LimeJS 使用了「closure/closure/goog/dom/dom.js」,函數的原始碼如下:

    goog.dom.getDomHelper = function (a) {
      return a ? new goog.dom.DomHelper(goog.dom.getOwnerDocument(a)) : goog.dom.defaultDomHelper_ || (goog.dom.defaultDomHelper_ = new goog.dom.DomHelper)
    };

    變數的「goog.dom.defaultDomHelper_」宣告是這樣:

    goog.dom.defaultDomHelper_;

    改成指定 null 初始值給它:

    goog.dom.defaultDomHelper_ = null;

    重新編譯遊戲的原始碼以後,第二個遊戲載入時,果然就不再發生錯誤了。

    問題點二:lime.audio.context

    dom.js 原始碼的變數初始問題解決後,本以為可以安枕無憂地繼續整合我的「HTML5 FUN 烘焙機」,結果部份遊戲的新錯誤訊息又出現了:

    TypeError: Nd.decodeAudioData is not a function

    「decodeAudioData」這個特徵很顯,它是在 LimeJS 處理聲音播放的「lime/src/audio/audio.js」檔案中。對照了一下,那個「Nd」指的應該就是原始碼中的「lime.audio.context」。一樣地,追到了聲音物件初始函數的這裡:

    lime.audio.Audio.prototype.prepareContext_ = function() {
        if (lime.audio.context) return;

    也就是當「lime.audio.context」已有內容時,它就不會再進行初始化的動作了,但是它的舊內容對應到的,又不是真正要使用的聲音物件,然後程式就中斷執行了。所以將那兩行改為:

    lime.audio.Audio.prototype.prepareContext_ = function() {
    if (typeof(lime.audio.context)!='undefined' 
    && lime.audio.context != null
    && typeof(lime.audio.context['createGain'])!='undefined'
    ) return;

    也就是它必須是物件,而已是帶有「createGain」函數的,才視為已存在。

    經過前面兩個問題點的研究,不但「HTML5 FUN 烘焙機」順利地進行功能整合與改進;感覺自己的功力似乎又提升了不少。

    目前「遊戲式題庫烘焙機 HTML5 FUN Homepage」已經測試得差不多,再新增幾個遊戲範本,即可以公開給大家使用了,先看看我為它設計的圖示,聞香一下:

    相關連結



    2023年5月4日 星期四

    Biking : 炮子崙步道

    2023年5月4日 星期四

     天氣狀況 : 晴

    TRIP DIST : 25.14
    TRIP TIME : 1:52:59
    AVG. SPEED : 13.3
    MAX. SPEED : 42.8

    上一次騎深坑炮子崙步道是2013年11月09日的事了,上週去找桐花時,就在想,應該把附近的山路再複習一下;有好天氣,當然就不要錯過了。

    由深坑文山路轉入往炮子崙步道的入口很好認,印象中,往炮子崙步道登山口前是沒有上坡,往林家草厝的才有陡坡,但卻慢慢地有一陡了,騎著騎著倒是有一點迷惑了。雖然如此,還是沿著野溪繼續往前,終來到叉路了。萬家香土雞城的招牌字跡斑駁,看來是沒在營業。

    20230504_114931

    右轉進入叉路,這一小段陡到我乾脆下車用牽的;哈!要是以前,一路騎上去的。

    20230504_115319

    看到登山口,表示要開始「被車騎」了。

    20230504_115923

    最後一次來這邊就發現原有漂漂亮亮的木階梯有很多毀壞的,今天看到是壞得更徹底;不過這樣子也好,哈!我能推著車走的路段就長了。

    終於來到了民宅,十年前這邊還有人和狗在活動,現在看起來都沒人居住了。

    20230504_122222

    過了民宅,表示要開始陡上,大部份只能扛車前進。

    20230504_122429

    大滴、小滴的汗直直落,衣服溼就算了,連眼鏡都「淹水」;然後小昆蟲大概嗅到我是顏上加鹽,「鹽值」百分百,一路都在耳朵邊嗡嗡,好不煩人。

    氣喘噓噓地,終於看到前面有亮光,直上穿出樹林,就是別人的菜園,表示快到猴山坑。坐在菜園旁的石頭上,吃了一塊週日從鹿港帶回來的兔寮牛舌餅,等休息夠了,才又推車前進。

    20230504_125040

    來到猴山坑,終於又可以在柏油路騎乘了。這一路往猴山岳土雞城有綠蔭,涼快舒適。體力真的有差,新光路猴山岳登山口前的這小一段,實在太陡,只能下車用推的走了。就這樣一路推車前進,最後下到指南宮纜車站上方的茶園,站在電塔旁稍作休息。

    20230504_131728

    記得之前去騎五分山,在五分山拍對面山頭的不厭亭;到了不厭亭再拍五分山(雄:Biking : 106 + 102 縣道 : 五分山與不厭亭),滿有意思的。今天騎到了瓦厝茶坊前才想到也玩一下,往指南宮纜車站的方向,照前一張照片站的位置,照片左側可以看到纜車站,由纜車站往右找,看到的第一個電塔旁,就是在對面停留拍照的地點:

    20230504_140753

    過了天恩宮,就一路滑回山下了,本想吃一碗冰涼的豆花,居然賣完了,害我滿臉豆花。

    相關連結

    2023年5月1日 星期一

    FontForge: 製作給網頁用的 web font

    2023年5月1日 星期一

     打從 Flash 時代在設計國字旁加上直式排版的注音模組時,就一直有個困擾,在不同作業系統時,因為能使用的字型不同,尺寸大小就很難控制;尤其是在 Linux 中,調號的符號有的很小,差異更大。去年有花了一點時間研究怎麼製作 web font,將注音符號由教育部開放的字型中擷取出來,應用在 HTML5 FUN 國字加直式注音的程式中,效果滿不錯的。最近因為要讓「HTML5 對對碰」能使用「EngTRESS A」(教育部九年一貫英語組輔導群製作的 EngTRESS font),又需要製作 web font ,結果當然是因為太久沒用,根本完全忘了程序是什了。這一次特別手寫筆記,然後將程序記錄在本篇中,方便以後參考。

    需要使用到的工具是「FontForge」,它的官網如下:

    我下載回來的 EngTRESS font 的字型檔檔名是「EngTRESS.ttc」。

    啟動 FontForge 以後,先找到存放 EngTRESS.ttc 的路徑,並開啟它:

    這個字型檔中有兩種字型「EngTRESS A」和「EngTRESS B」,B 的字型是有加線的,所以選擇「EngTRESS A」:

    接著選擇要製作成 web font 的字。因為 EngTRESS font 只有針對書寫英文時會用到的字設計,所以,以可以用這樣的程序來選取所有字:

    • 按上方主選單「Edit」中的「 Select」
    • 然後點選「 Glyphs Worth Outputting」

    選好要處理的字以後,就可以產出 web font 了:

    • 按上方主選單「File」
    • 按「Generate Fonts」

    在 Generate Fonts 的對話框中,選擇字型檔的格式及路徑:

    • 先選擇要儲存的資料夾
    • 選擇「Web Open Font (WOFF)」格式
    • 輸入檔名
    • 按「Generate」鈕來產出字型檔。


    如果像上圖中有勾選了「Validate Before Saving」,可能會出現底下的訊息:

    沒關係,就放心地按「Generate」的按鈕來儲存字型檔。

    完成的話,就可以去前面指定的路徑找製作好的 .woff 檔案了。

    前面我們是利用「Select」的「Glyphs Worth Outputting」來選取字型檔中有造字的部份,這個方法要是用在中文字型檔,應該滿可怕的,會有五、六千個宇,甚至一、兩萬個字。如果只是想製作注音符號的部份,可以這樣做:

    • 按主選單「Edit」中的「Select」。
    • 點選「Select by Script」。

    接著在下拉式選單中找「Bopomofo」

    另外兩個選項設為:

    • All glyphs
    • Select Results

    按「OK」鈕,就會將所有注音符號選取好。

    如果想再繼續加別的字集,就重覆前面的程序,並將「Select Results」換成「Merge Results」。

    至於如何利用 JavaScript 來載入製作好的 web font 呢?可以參考「CSS Font Loading API 」中的「FontFace」:

    相關連結


    2023年4月28日 星期五

    JavaScript : 將字串中的單引號或雙引號編碼

    2023年4月28日 星期五

    有人遇到在 HTML5 FUN 的遊戲中,部份圖片出不來的問題,仔細的觀察以後,一個小發現,在所謂有問題的遊戲中,題庫設定出現了很多單引號。

    可能是以前大部份都是出中文的題庫,幾乎很少去考慮到單引號放在題庫中會產生的負面效應。試了一下,果然將題庫中的單引號編碼過以後,原來的問題就不再出現。

    改程式嗎?其實不需要,有需要的話,只要多一道將引號編碼的程序,可在題庫設定(假設題庫的變數名稱為 questionLines)的後面再加上底下這行:

    questionLines = questionLines.replace(/['"]/g, function(match){ return "%" + match.charCodeAt(0).toString(16);} );

    上面的程式碼只要找到單引號或是雙引號,就會將它置換為 %27 (單號),或是 %22 (雙引號),並更新題庫變數的內容。經過這樣的處理,如果題庫設定是拿來當圖片檔名就不會被引號所干擾而未如預期呈現了。

    一直以來,都覺得寫程式是一種樂趣,也樂於與人分享成果;但也漸漸發現隨著時代潮流的演變,很多人都忘了自己是誰,他人又是誰,連互動都沒有,就開始對別人要這個,要那個的,只能說是人心不古,又或自己慢慢變個老頭子了。

    Biking : 春崎產業道路+樟湖步道

     天氣狀況 : 晴

    TRIP DIST : 0
    TRIP TIME : 0
    AVG. SPEED : 0
    MAX. SPEED : 0

    二月份曾騎車上山想看花(參見: 雄:Biking : 春崎產業道路+樟湖步道+樟樹步道),還小迷路了一下。前幾天看同事分享的桐花照片,就在二月份的路線上,於是今天又去騎了一趟。結果才幾天而已,地乾了,花也沒了。

    在優人神鼓前的小路,已經沒有滿地的桐花了,偶有幾朵桐花由樹上落下,耳邊傳來花朵打在別的植物上「啪啪啪」的聲音,倒是滿有趣的。



    今天沒再去亂鑽小路,前段就直接扛車往上,後段則一來沒有爬山的人,再來泥土也乾得差不多了,所以能騎的路段算不少;除了扛車那段讓我的汗一顆顆冒出來,基本上就這樣輕鬆地騎完了。結果馬錶可能因為一路又扛又推的,震到它都罷工了,只記錄到四公里多。



    2023年4月25日 星期二

    HTML5 : 對對碰烘焙機

    2023年4月25日 星期二

    HTML5 FUN 的對對碰是一個可以自訂題庫的翻牌小遊戲,牌面目前支援文字、圖片或是聲音;如果翻到同一組牌,就可加分,翻錯則扣分;牌組可以使用兩張不同的牌面(兩欄式題庫),也可以使用相同的牌面(單欄式題庫);遊戲的模式可設定為「蓋牌模式」,除了翻牌,還考記憶力。

    HTML5 對對碰遊戲截圖

    如果有興趣,可以在 HTML5 FUN 網站中玩玩「HTML5 對對碰」的範例題庫,網址如下:

    HTML5 對對碰上一次較大的更新已是 2021年6月的事,詳情可以參考以下的舊文:

    拖到 2023 年,HTML5 對對碰總算也支援「烘焙機」,可以使用 HTML5 FUN 的「烘焙機」(Blogger及網站嵌入語法產生器),只要三大步驟即可製作嵌入網頁的 HTML語法,貼入 Blogger 、Google Sites 或網頁中,即可分享使用自製的「HTML5 : 對對碰」。

    請按底下的按鈕,即可打開「HTML5 對對碰烘焙機」來製作自己的 HTML5 對對碰遊戲:

    相關連結


     
    雄::gsyan © 2009. Design by Pocket