HTML5 : 幾A幾B猜數字

 最近玩了 Wordle 及其它衍生的猜謎遊戲，哈哈哈～當然會手癢，於是用 LimeJS 弄了一個傳統的幾 A 幾 B 猜數字 HTML5 遊戲。由於單純是十個數字取出五個數字組成的數字猜謎，猜起來比較不傷神。

這個「幾A幾B」的小遊戲可以在 HTML5 FUN 的網站中找到：

• https://gsyan888.github.io/html5_fun/

圖示長這個樣子:

自訂題目

初期是利用亂數產生五個不重覆的數字所構成的謎底，現在可以自行出題，並分享連結給別人玩。

自定四位數題目的幾A幾B

下圖是利用自訂題目的模式，出一個四位數謎題的過程。

幾A幾B自訂題目的流程

如果想自訂題目，在進入「HTML5 幾A幾B」以後，按一下畫面左下角的分享圖示，即可進入自訂題目的模式。

接著利用畫面下方的虛擬鍵盤輸入想設定的謎底，「位數」可以自行決定，像上圖中，謎底是「1680」，當按完「0」以後，如果按下虛擬鍵盤的「Enter」，就會在中央出現網址，順利的話，程式也幫我們把「帶有謎底」的網址複製到剪貼簿了(如果沒自動複製成功，那就自己手動處理囉！)。

出完題目，只要按一下右上角的藍色叉叉，就可以回到原本的遊戲模式了。

按右上角的藍叉叉關閉出題機

最後，只要把複製好的網址分享給別人，就可以讓大家來解謎了。

底下是開啟自訂題目網址的解說畫面：

已經變成４個數字的謎底

因為前面設定的謎底是「１６８０」，所以程式自動變成4個數字的謎底。「自訂題目」還有什麼變化呢？當我們出的謎底如果用了相同的數字，例如：「１７７９」，因為謎底數字中使用了兩個「９」，所以使用者在猜時，虛擬鍵盤按用過的數字，就不會再有「重覆」的提醒訊息。

分享解謎過程

當我們完成幾A幾B的題目後，畫面會出現以文字符號代表的解謎過程

解謎過程中使用到三種樣態的數字，跟遊戲過程中的格子顏色目的一樣：

• 帶有括號的數字：等於黑色格子，表示數字跟位置都錯的。
• 圈圈包住的數字：等於黃色格子，表示數字對，但位置錯。
• 全形的純數字：等於綠色格子，表示數字對，位置也對。

如果按右上角的「藍色叉叉」，就可以關閉，在還沒出新題目前，都可以按右下角的圖示，讓分享結果的畫面再重新出現。

更新記錄

• 2022.02.15 修正由網址解碼謎底程序的錯誤；修正未正確偵測並設定是否檢查數字重覆的功能；修正行動裝置在複製分享內容時，鍵盤收回，畫面未歸位的問題，在程序結束後半秒鐘，加入 window.scrollTo(0, 1) 來歸位。
• 2022.02.14 加入自訂謎底及分享連結的功能，可以自訂位數及數字是否重覆(由謎底的數字自動判斷)。
• 2022.02.13 加入複製作答結果的功能；調整格子及按鍵的大小。
• 2022.02.12 加入直式版面偵測，調整大小。
• 2022.02.11 初版。