2023年6月2日 星期五

Biking : 石碇淡蘭古道

2023年6月2日 星期五

天氣狀況 : 晴
TRIP DIST : 31.91
TRIP TIME : 1:28:24
AVG. SPEED : 19.6
MAX. SPEED : 40.3

本來計畫去騎石碇北47-1,順便買許家麵線的粗麵線,東摸西摸才出發,時間看來不太夠,只好去淡蘭古道。一路沒人,連吊橋都可以騎過去。來到小廣場,也沒不像上回一堆人在唱卡拉OK,真不懂,為什麼出來健走,還要帶吵死人不償命的設備,聽聽大自然的流水聲、蟲鳴鳥叫不是很好嗎?

在木椅上才休息一會兒,汗水直直滴,滴落在地板上

定睛一看,哈!還滿有趣的:


在汗水上有倒影吔!那樹葉,那天空,可不是我 P 上去的。

休息夠了,繼續前行,依然沒人,真的是賺到了,可以一路騎到底。前幾天的大雨,河水湍急,沒注意到水中魚,因為目光都在一隻白色的鴨子身上了

這隻鴨子的警覺性滿高的,看我停下來,本來離溪邊很近的,就稍往溪中央移動;看我拿出手機,就離我更遠了。拍完照就不打擾牠,繼續前行了。回程一路順風,咻咻咻地,倒也滿輕鬆的騎完一圈。


2023年5月31日 星期三

HTML5 : 足球高手與籃球高手

2023年5月31日 星期三
這一篇介紹文自 2012/11/25 就打了草稿,放到現在。就趁 HTML5 足球高手也改好版了,一鼓作氣,將它完成。

HTML5 籃球高手與 HTML5 足球高手都是源自於 2009~2011 年的 Flash 版,除了 HTML5 版可以跨平臺在支援 HTML5 的瀏覽器中使用外,它們的題庫和 HTML5 FUN 中的 PK、PK2 所使用的題庫是相容的,能夠支援文字題或是圖片題,當然我稱之為「語文高手」題型的國語同音字、多音字及形近字的題型也有支援。此外,現在出題更方便了,可以使用 HTML5 FUN 的「遊戲式題庫烘焙機」,直接在瀏覽器中出題,並可以將遊戲嵌入網站中。

HTML5 足球高手守門員的姿勢
HTML5 足球高手
HTML5 籃球高手

功能簡介

  • 可跨平臺,只要有支援 HTML5 的瀏覽器,即可使用。
  • 單機版可以自訂選單及題庫。
  • 行動載具支援離線使用。
  • 支援國語「形近字」、「多音字」和「同音字」的「語文高手題庫」,可以使用「雄:HTML5:語文高手題庫&國字加注音產生器」來出題。
  • 以用圖片、純文字、國字加直式注音、分式等當題目或是選項。
  • 可使用「HTML5 FUN 遊戲式題庫烘焙機」來打造自己旳遊戲。

玩一玩

HTML5 籃球高手與 HTML5 足球高手都可以在 HTML5 FUN 網站中找到,只要按一下它們的圖示,即可以試玩它們已建立好的範例題庫,HTML5 FUN 網站的網址如下:

籃球高手的圖示:

足球高手的圖示:


檔案內容

除了在 HTML5 FUN 網站中玩,我們也可以由 HTML5 FUN 網站中下載籃球高手或是足球高手打包的壓縮檔,將 html5_basketball.zip (html5_football.zip) 解壓縮以後。資料夾中會有一些檔案及資料,其功能簡述如下:

  • html5_basketball.html (html5_football.html):主網頁檔,要使用這個學具,就以網頁瀏覽器(例如: Chrome、Safari、Edge、Firefox...) 來開啟這個檔案。
  • basketball.js (football.js) :HTML5 主程式檔,由主網頁檔來載入使用的,必備但不要去更動它的內容。
  • basketball_set.js (football_set.js):基本設定檔,一般情形是不需要變更內容,如果想要自訂選單檔的檔名,可以在這個檔案中設定。
  • basketball_menu_set.js (football_menu_set.js):預設的選單設定檔。主程式會依這個檔案的內容來產生選單,並依設定載入指定的題庫檔案。
  • cache.manifest:快取設定檔,這個檔案用來告訴瀏覽器要將哪些檔案儲存起來,供離線時使用。如果有新增題庫檔案時,這個檔案的內容記得要更新。
  • assets 資料夾:這個目錄中放了程式會使用到的圖片檔和音效檔。
  • data 資料夾:這個目錄中放了 .js 的題庫範例檔案。

打造自己的遊戲

HTML5 籃球高手與 HTML5 足球高手都支援「HTML5 FUN 遊戲式題庫烘焙機」,想使用自己的題庫來玩籃球高手或是足球高手,無論是將遊戲放在網路,或是放儲存在本機中,可以用 HTML5 FUN 的烘焙機。

目前 HTML5 FUN 的烘焙機中,提供四種題庫範例:
  • 出題光碟格式:這是仿照出版社出題光碟 CSV 格式的題庫,也可以自行使用試算表來製作,資料欄位依序為:題幹、解答(選項的號碼)、選項1、選項2、選項3、選項4。
    將試算表中帶有題庫資料的各欄選取,並複製好後,貼到HTML5 FUN 烘焙機中的「圖形式」編輯區中,即可轉為遊戲的題庫。
  • 兩欄式題庫:選擇這個題庫樣版以後,我們只要準備好每一題的題目及答案,然後在烘焙機的文字編輯區中,按照這樣的格式,一行一題,輸入題庫

    題目1##答案
    題目2##答案
    題目3##答案
    題目4##答案

    烘焙機出題時會自動幫忙製作遊戲所需要的題幹跟選項。

  • 三欄式題庫:選擇這個題庫樣版,每一題我們需要準備題目、正確選項和多個錯誤選項,每一行依類似這樣的格式輸入:

    題目##正確1##錯誤1~~錯誤2~~錯誤3
    題目##正確1##錯誤1~~錯誤2~~錯誤3
    題目##正確1##錯誤1~~錯誤2~~錯誤3

  • 語文高手題庫:這個樣版是針對國語的同音字、多音字或形近字而設計的,格式較複雜,建議使用「雄:HTML5:語文高手題庫&國字加注音產生器」來製作。
關於各種題庫,只要在 HTML5 FUN 烘焙機中,選定了題庫樣版以後,題庫編輯器均有詳細的說明,坐而言,不如起而行,按底下的圖示,開啟「HTML5 FUN 遊戲式題庫烘焙機」來打造自己的遊戲吧!

籃球高手烘培機

足球高手烘焙機

相關連結

  • 2023.05.07 修改題庫解析的程序。
  • 2022.01.12 支援 HTML5 烘焙機。
  • 2021.11.27 支援直拿版面。
  • 2012.12.12 發布。

足球高手更新記錄

  • 2023.05.31 預載守門員的圖片,以免第一次動作會有延遲或是跳格的情形。
  • 2023.05.26 發布 .v1。

2023年5月30日 星期二

SVG : Namespace prefix xlink for href on a is not defined

2023年5月30日 星期二

2022年11以後,就沒有再更新 HTML5 FUN 的「分類圖」,之後新增的「分數條小教具」、「真分數小教具」、「幸運999」、「遊戲式題庫烘焙機」、「數學小白板」、「足球高手」都不在分類圖中。於是把去年儲存的 Xmind 檔案,以 Xmind 線上版開啟後,把新的工具加入。不過,看到 Xmind 提醒檔案是舊格式,就知道不妙了,果然因為格式的改變,花了一整天,還沒有完全解決輸出後的 SVG 格式相容的問題。

去年為了怕自己忘記加工的程序,特別寫了這一篇「Xmind : 線上版匯出為 SVG 圖檔」的記錄。雖然還是有找到 SVG 檔,但是 Xmind 在裡面用「foreignObject」來包住節點的標題及連結,這部份對網頁瀏覽器來說,沒有什麼影響(當然,如果是比較舊的瀏覽器,可能就會有差別);但卻導致無法在 Inkscape 中看到節點的內容。試了很久,沒什麼進展,最後決定放棄用 Inkscape 來編輯了。

反正分類圖的內容,已經都在 Xmind 中處理好了,剩下的就是加上 QRCode 而已,就以 Notepad++ 純手工加語法吧!

將去年的做的 SVG 檔中,找到要添加的物件,複製後,貼到新匯出的 SVG 檔中,簡單吧!哈!要有這麼簡單,前面就不用寫一堆了。用瀏覽器開啟改好的 SVG 檔案,結果出現 [圖1] 這樣的畫面:

[圖1] 出現錯誤訊息的 SVG 檔案

關鍵的錯誤訊息:

Namespace prefix xlink for href on a is not defined

關鍵字應該是「xlink」,看了一下由舊檔案中複製過來的語法,有使用到:

  • xlink:href
  • xlink:title

再比對一下去年和今年的「svg」標籤中,新版的少了這個:

xmlns:xlink="http://www.w3.org/1999/xlink"

沒關係,少什麼就加什麼吧!

果然,加上去以後,我需要的 QRCode 圖片跟連結,就正常出現了。

[圖2] SVG 格式的 HTML5 FUN 分類圖

所以,要再幫去年的筆記追加一下:

  • 修改 <svg ... > ,在裡面加入「xmlns:xlink="http://www.w3.org/1999/xlink"」
  • 修改 <svg ... > 中的大小設定,稍微加寬一點:
    viewBox="0 0 1351 1267" width="1351" height="1267"
    改為
    viewBox="0 0 1351 1267" width="1521" height="1267"
  • 在 </svg> 前加入 QRCode 群組的語法。

相關連結



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

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

    相關連結

     
    雄::gsyan © 2009. Design by Pocket