基于HTML5 和JavaScript 的五子棋游戲的設計與實現

摘要：隨著移動終端的發展和智能設備的普及，網絡小游戲因其獨特的特點受到廣大用戶的喜愛。利用HTML5和Ja?vaScript制作網絡小游戲已成為一種主流趨勢。文章主要闡述了如何利用HTML5和JavaScript實現五子棋游戲，對實現該游戲所需的各項技術進行了分析，并對游戲的系統功能設計進行了詳細闡述。同時，文章對各功能的實現進行了詳細描述，并附上了重要功能模塊的代碼。

關鍵詞：HTML5；JavaScript；五子棋

中圖分類號：TP37 文獻標識碼：A

文章編號：1009-3044（2024）31-0128-03

開放科學（資源服務）標識碼（OSID） ：

0 引言

隨著互聯網的普及和信息技術的發展，網絡小游戲因其便捷性、多樣性、易上手和免費使用等特點，逐漸成為人們在碎片化時間休閑娛樂的首選，深受廣大用戶喜愛。五子棋游戲是一款老少皆宜的小游戲，在休閑娛樂、緩解壓力和提升注意力及反應能力等方面都發揮了積極作用，成為人們日常娛樂中的首選游戲之一。本文主要論述如何設計一款網絡五子棋游戲，使用戶只須打開瀏覽器或手機應用即可進行游戲，從而方便用戶使用[1]。

五子棋游戲的設計與實現已有許多研究：文獻[1] 介紹了利用C++實現五子棋游戲；文獻[2]討論了基于Android的五子棋游戲設計與實現；文獻[3]描述了基于C語言的五子棋游戲的設計與實現；文獻[4]詳述了基于Flash的五子棋軟件的設計與實現；文獻[5]則介紹了基于J2ME 的手機五子棋游戲設計與實現；文獻[6]從算法的角度探討了搜索算法在五子棋博弈中的人工智能應用研究。

1 技術分析

本文主要闡述利用HTML5和JavaScript實現五子棋游戲。隨著網頁技術的不斷發展和完善，使用HTML5和JavaScript制作網絡小游戲已成為一種主流趨勢。HTML5開發的程序可在各種設備上運行，無需額外的插件或軟件；它獲得了各種操作系統和瀏覽器的支持，確保了開發游戲在各種環境下的穩定性和一致性。通過結合JavaScript，HTML5可以處理音頻、視頻和其他多媒體元素，為游戲增添更多樂趣和視聽效果。HTML5提供了內置的多媒體元素，Canvas元素和WebGL技術使開發者能夠在網頁中實現復雜的圖形和動畫效果。HTML5和JavaScript語法簡潔明了，易于學習和使用，開發者能夠快速上手。此外，HTML5 和JavaScript 擁有龐大的開發者社區和豐富的資源庫，開發者可以輕松獲得開源代碼、教程和工具，以解決游戲開發過程中遇到的問題[2]。

本文采用HBuilder X作為開發軟件。HBuilder X 是一款功能強大且易于使用的開發工具，適用于Web 和移動端應用程序的開發。它提供了豐富的功能，如代碼自動完成和智能提示、內置大量常用代碼以提高編程效率、集成調試工具以方便開發者進行代碼調試和錯誤修正。此外，HBuilder X集成了模擬器，可以在開發過程中快速預覽和測試應用程序在不同設備上的效果[3]。

2 系統功能設計

五子棋程序通常可以分為以下三個主要模塊：人機交互模塊、游戲邏輯模塊和算法處理模塊。通過這三個模塊的協作，一個完整的五子棋程序能夠實現游戲規則的正確執行、良好的用戶交互體驗，以及具有一定智能水平的人機對戰功能[4]。

人機交互模塊負責處理用戶與程序之間的交互，包括顯示游戲界面、接收用戶輸入、向用戶輸出信息等功能。這個模塊通常會利用圖形界面，使用戶可以通過點擊界面上的按鈕或者棋盤上的交叉點進行操作。人機交互模塊需要與游戲邏輯模塊進行交互，將用戶的操作轉化為對游戲狀態的修改，并將游戲狀態的變化反饋給用戶。

游戲邏輯模塊負責處理游戲規則和邏輯，包括棋盤的初始化、落子的合法性檢測、判斷勝負等功能。該模塊通常采用合適的數據結構來表示棋盤狀態，并使用相關算法來檢測棋局勝負情況，如判斷是否有五子連珠等。游戲邏輯模塊還處理用戶之間的交互，包括落子、悔棋和重新開始游戲等操作。

算法處理模塊負責實現人機對戰的算法和策略，包括計算機程序的落子策略、評估棋局局勢、搜索最佳下法等功能。此模塊通常利用一些成熟算法來模擬人類玩家的思考過程，如五元組算法、基于搜索樹的算法、Alpha-Beta剪枝算法等。人機對戰模塊需要與游戲邏輯模塊和人機交互模塊進行交互，接收棋局狀態并計算最佳落子位置，然后通知游戲邏輯模塊執行落子操作。

3 系統功能實現

3.1 用戶界面設計

在設計五子棋游戲界面時，程序開發人員需要考慮用戶體驗，同時兼顧界面的美觀性。游戲主界面應清晰明了，包含開始游戲、游戲設置、退出游戲等按鈕或選項；界面的一側或底部可以放置一個游戲信息欄，用于顯示當前游戲狀態、當前玩家、勝負情況等信息。信息欄上還可添加一些按鈕，如悔棋和重新開始，以增加游戲的可操作性[5]。

五子棋界面的重要內容包括棋盤和棋子。棋盤上的網格應有明確的邊界線，以便用戶清晰看到每個格子的位置。棋盤可以使用不同的顏色或紋理來增加視覺吸引力。棋子通常為圓形，不同玩家的棋子顏色應明顯區分，如黑色和白色。棋子放置在棋盤上時，可以添加音效，以增加游戲的互動性和樂趣。具體可參考圖1所示。

3.2 棋盤實現

使用HTML5中的Canvas可以方便快捷地繪制五子棋的棋盤。設棋盤區域的長寬為450px × 450px，包含15×15的棋盤網格，每個網格間隔30px，網格距上下左右的邊距各為15px。使用getElementsByClass? Name（）識別棋盤畫布，使用getContext（）來標識棋盤上下文為2D環境，并使用moveTo（）、lineTo（）、stroke（）繪制直線。在繪制棋盤時，還可以根據用戶的喜好添加背景顏色，以增強程序的可視化效果。具體代碼如下所示：

3.3 棋子實現

使用HTML5中的Canvas可以方便快捷地繪制五子棋的棋子。根據上文可知，棋盤每個網格間隔為30px；根據視覺效果，設置所繪棋子的半徑為13px；根據使用習慣，設置人落子的顏色為黑色，機器落子的顏色為白色，也可根據需要設置不同的顏色。具體代碼如下所示：

4 判斷人落子是否獲勝

4.1 設置贏法數組

要判斷人落子后是否獲勝，需要檢查棋盤上是否有5個連續的棋子同為黑色，這些連續的棋子可以是水平方向、垂直方向、正斜線方向或反斜線方向。定義一個三維數組wins[x][y][z]，用來標記所有可能出現同色五子的坐標，其中x表示棋子所在的x軸，y表示棋子所在的y軸，z表示五子連珠的贏法編號。以橫向坐標為例，第一行上可以表示的wins數組有11個，以z軸贏法編號區分，第一個贏法數組為wins[0][0][0]、wins[1][0][0]、wins[2][0][0]、wins[3][0][0]、wins[4][0][0]，對應圖2所示；第二個贏法數組為wins[1][0][1]、wins[2] [0][1]、wins[3][0][1]、wins[4][0][1]、wins[5][0][1]，對應圖3 所示；依此類推，第十一個贏法數組為wins[10][0][10]、[w0i]n[1s[01]1，]對[0]應[1圖0]、4w所ins示[1。2][水0][平10方]、向win一s[共13有][0]1[510行]、，w贏in法s[1數4]組有11×15 = 165個。

同理，在垂直方向也有165個贏法數組。采用相同的方法，可以統計出正斜線和反斜線方向各有121 個贏法數組，最終的贏法數組總數為572個。以下程序利用`count`變量設置贏法數組的編號，通過循環嵌套在水平、垂直、正斜線、反斜線四個方向完成贏法數組的賦值。下面以水平方向賦初值代碼為例，具體如下所示：

4.2 判斷人落子是否獲勝

本文使用二維數組chessboard[i][j]來表示游戲棋盤，chessboard[i][j]數組初始值為0，表示當前棋盤位置無棋子。定義chess.onclick = function（e）事件，當用戶點擊棋盤時，瀏覽器會將事件對象e傳遞給函數，包含當前鼠標的位置等信息。具體代碼如下：

其中，count變量表示贏法數組wins中一維數組的長度，myWin用于記錄用戶在各贏法上的分值。對于每個贏法數組，如果在某個坐標位置（i，j） 的值為true，則表示在該位置下棋可以形成相應贏法。當在某個贏法數組中的（i，j） 位置下棋時，將該位置的myWin計數加一。如果某個贏法的計數myWin[k]達到5，則表示該贏法已實現五子連珠，游戲結束，用戶獲勝。

5 計算機落子的算法

計算機落子前需要遍歷棋盤上的所有空閑位置，計算每個空閑位置所在贏法上已有的棋子數量。對于每個空閑位置，計算機會評估其在當前局勢下的分值，具體考慮以下幾個因素：

1） 是否有形成五子連珠的潛在機會；2） 是否可以阻止對手形成五子連珠；3） 是否有形成活四、沖四等有利局面的可能；4） 是否能構成雙三等對手難以應對的威脅。

根據評估結果，計算機將選擇評估得分最高的位置作為落子點。在評估空閑位置的分值時，需要區分當前位置是用于攔截用戶還是計算機自身獲勝所需。即使是形成四子等相同情況，由于計算機所處的位置不同，其賦予的分值也應有所區別，其中計算機自身獲勝所需位置的分值應高于攔截用戶時的分值。用戶可以根據算法需要自行設置所需的分值，具體參見表1所示。

從上文可知，人落子的顏色為黑色，機器落子的顏色為白色。表中“白子4”表示計算機想要自己獲勝時，棋盤上白子已有3個，其他情況依此類推；“黑子4”表示計算機攔截用戶時，用戶在棋盤上的黑子已有3個。這個算法相對簡單，僅考慮了局勢評估和最優位置選擇，未涉及對手反應和更復雜的搜索過程。程序運行結果表明，該算法在正常情況下能夠表現出一定的智能水平，實現人機互動。算法的部分代碼如下所示：

6 總結

本文主要介紹了利用HTML5和JavaScript實現五子棋游戲。游戲中的其他功能，如悔棋功能、重新開始等較易實現，在此不做過多闡述，讀者可根據需要進行功能擴充。本文從學習和提升編程能力的角度出發，不借助任何框架來實現Web游戲，從而達到對編程知識的進一步鞏固和提升。此外，還可以從五子棋游戲衍生出去，開發更多類似的網絡小游戲。

參考文獻：

[1] 嚴正學.C++實現五子棋游戲[J].電腦編程技巧與維護，2011（15）：72-74.

[2] 李舒婷，高燕.基于Android的五子棋游戲設計與實現[J].軟件導刊，2016，15（4）：98-99.

[3] 何星，段華瓊.基于C語言的五子棋游戲的設計與實現[J].信息與電腦（理論版），2021，33（24）：118-120.

[4] 呂尚榕.基于flash的五子棋軟件的設計與實現[D].上海：復旦大學，2012.

[5] 馬鵬強.基于J2ME的手機五子棋游戲設計與實現[D].成都： 電子科技大學，2012.

[6] 董紅安.計算機五子棋博奕系統的研究與實現[D].濟南：山東師范大學，2005.

【通聯編輯：唐一東】