2021年4月3日 星期六

HTML5 : gomoku 漢字五子棋

2021年4月3日 星期六

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

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

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


功能說明

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

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


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

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

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


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

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

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


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


參數設定

如果想要自訂 HTML5 漢字五棋的棋盤棋格數或是其它參數,第一件事就是要將它下載到自己的電腦中。

在 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 版把參數的名稱做了修改,但是功能和 Flash 版大致類似:

  • title : 遊戲成功載入設定檔時,畫面會顯示的標題字。

  • font_family : 格子內文字所使用的字型名稱。

  • fill_square_with_random_text : 格子內文字選用的方式。
    0: 按順序一個字一個字,或一行一行取用。
    1: 以亂數隨選文字(字或行)。

  • timer_counter : 計時器倒數的秒數,如果設為 0 ,表示不計時。

  • number_to_be_counted_as_a_win : 自動判斷輸贏時,多少子連線算贏。如果設為 0 時,表示不自動判斷。

  • show_number : 是否在棋盤的每一格左上角顯示編號。
    0: 不標示
    1: 標示數字

  • col_total : 棋盤橫向最多幾格。

  • row_total : 棋盤縱向最多幾格。

  • text_of_board : 棋盤格子中的文字
    如果全部的文字只有一行,表示一格只放一個字。
    如果想一格一個語詞(一行),就以多行的方式輸入文字,一個語詞一行。


更新記錄

  • 2021.03.29 首版發布
  • 2021.03.28 起草


相關文章


0 意見:

張貼留言

 
© 2009. Design by Pocket