HTML5 : gomoku 漢字五子棋

 「漢字五子棋」是 2011年5月在 Plurk 上看到噗友的貼文而知道的，隨後我用 Flash 寫了個小工具，可供兩個人玩類似的遊戲，當時的討論噗文及 Flash 版的漢字五子棋說明，都在底下這篇舊文中：

• 雄 : Flash : gomoku 漢字五子棋

如舊文中的記錄，Flash 版的漢字五子棋自 2012年一月後就沒有更新了。這次的目標是將它以 HTML5 改寫，但盡量維持原有的運作方式。改變比較大的，大概就可供自訂內容的參數，改用較長的名稱，期待能較易理解，並在設定檔中多一些註解說明，方便使用者使用。

新版的 HTML5 漢字五子棋在 HTML5 FUN 中可以試玩，並下載，HTML5 FUN 網址如下：

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

功能說明

HTML5 版漢字五子棋可以用支援 HTML5 的網頁瀏覽器來開啟，因此能夠跨平臺使用。

• 使用者可以自訂棋盤有多少格，及格子內要填入旳文字。
• 可使用計時器，超過時間，自動換人執子。
• 可以直接按畫面最上方中央的棋子按鈕來指定由哪一方執子。
• 可以設定多少子連成一線時，由程式自動判斷輸贏。
• 畫面左下方有隱藏工具列，供棋局重置，或是重新輸入格子內的文字。
• 加入提示音效，亦可由隱藏工具列中關閉音效。

進入漢字五子棋以後，中央佔最大版面的是棋盤，每一個棋格中可以放字或詞。

棋盤的正上方有輪到誰執子的指示器，按下指示器的其中一個，表示該人是下一個放子的人。指示器的右側則是倒數計時器，啟用狀態時，如果倒數到零時，指示器會改變順序，並重新倒數。

在畫面的左下角，有一個藍色的箭頭，按下去以後，可以展開工具箱

工具箱中有「重置」、「輸入」和「靜音」三個按鈕。

按下「重置」鈕後，棋盤會重新產生，遊戲重頭玩。

按下「輸入」鈕，則會出現輸入區，讓使用者輸入想填在棋盤格子中的文字。如果所有文字是輸入成一行，進入遊戲時，字串會被分解成一個字一個字，並填入格子中；如果文字是分成多行，格子中則是填入一行的內容。

按下「靜音」鈕，可以關閉遊戲進行中的音效，再按一次則是開啟。

自製遊戲

漢字五子棋 2023年7月底以後的版本支援 HTML5 FUN 烘焙機，如果想修改遊的參數、題庫內容，打造客製化的漢字五子棋，可以使用這個：

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

參數設定

如果依照傳統的方式，如果想要自訂 HTML5 漢字五棋的棋盤棋格數或是其它參數，第一件事就是要將它下載到自己的電腦中；目前較新的方式是採用前一小節提到的 HTML5 FUN 烘焙機，不但能下載修改過的遊戲，也能將下載遊戲的設定檔，甚至將遊戲嵌到自己的網站中。底下的說明，謹供參考。

在 HTML5 FUN 的網站中，找到 html5_gomoku 的圖示，在它的下方有兩個小圖示，藍色的圖示按下去，就是開啟本篇文章；綠色的圖示按下去，則是下載一個檔案名稱為 html5_gomoku.zip 的壓縮檔。

將下載回來的 html5_gomoku.zip 解壓縮以後，應該會有一個 html5_gomoku 的資料夾，裡面至少有底下的檔案：

• html5_gomoku.html : 網頁檔，以支援 HTML5 的網頁瀏覽器開啟這個檔案，即可進入漢字五子棋。
• gomoku.js : 程式，會由 html5_gomoku.html 自動載入，不需要更動其內容。
• gomoku_set.js : 設定檔，這個檔案只在程式啟動時自動載入。因此如果更動了內容，記得儲存檔案以後，讓網頁 html5_gomoku.html 重新整理，才能讓新的設定生效。

gomoku_set.js 這個設定檔是一個純文字的檔案，裡面用的是 JavaScript 的語法，主要是一些設定的說明(註解)，和變數設定。它必須使用純文字的編輯器，如果在 Windows 中，只要使用附屬應用程式中的「記事本」就可以進行編輯了，開啟檔案修改設定的方法可以參考底下這篇舊文：

• 雄 : HTML5 : 如何以Windows的記事本修改.js設定檔

HTML5 版把參數的名稱做了修改，但是功能和 Flash 版大致類似：

• title : 遊戲成功載入設定檔時，畫面會顯示的標題字。
  
  
• font_family : 格子內文字所使用的字型名稱。
  
  
• fill_square_with_random_text : 格子內文字選用的方式。
  false: 按順序一個字一個字，或一行一行取用。
  true: 以亂數隨選文字（字或行）。
  
  
• timer_counter : 計時器倒數的秒數，如果設為 0 ，表示不計時。
  
  
• number_to_be_counted_as_a_win : 自動判斷輸贏時，多少子連線算贏。如果設為 0 時，表示不自動判斷。
  
  
• show_number : 是否在棋盤的每一格左上角顯示編號。
  false: 不標示
  true: 標示數字
  
  
• col_total : 棋盤橫向最多幾格。
  
  
• row_total : 棋盤縱向最多幾格。
  
  
• questionLines : 棋盤格子中的文字
  如果全部的文字只有一行，表示一格只放一個字。
  如果想一格一個語詞(一行)，就以多行的方式輸入文字，一個語詞一行。

更新記錄

• 2023.07.31 支援 HTML5 FUN 烘焙機；題庫變數名稱改用 questionLines。
• 2021.03.29 首版發布
• 2021.03.28 起草

相關文章

• 雄 : HTML5 FUN 精選集

• 雄 : 打造自己的遊戲 : HTML5 FUN 烘焙機大彙整(最新版烘焙機)

• 雄 : Flash : gomoku 漢字五子棋