基于HTML5 和JavaScript 的五子棋游戲的設(shè)計與實現(xiàn)

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

關(guān)鍵詞：HTML5；JavaScript；五子棋

中圖分類號：TP37 文獻(xiàn)標(biāo)識碼：A

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

開放科學(xué)（資源服務(wù)）標(biāo)識碼（OSID） ：

0 引言

隨著互聯(lián)網(wǎng)的普及和信息技術(shù)的發(fā)展，網(wǎng)絡(luò)小游戲因其便捷性、多樣性、易上手和免費使用等特點，逐漸成為人們在碎片化時間休閑娛樂的首選，深受廣大用戶喜愛。五子棋游戲是一款老少皆宜的小游戲，在休閑娛樂、緩解壓力和提升注意力及反應(yīng)能力等方面都發(fā)揮了積極作用，成為人們?nèi)粘蕵分械氖走x游戲之一。本文主要論述如何設(shè)計一款網(wǎng)絡(luò)五子棋游戲，使用戶只須打開瀏覽器或手機應(yīng)用即可進(jìn)行游戲，從而方便用戶使用[1]。

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

1 技術(shù)分析

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

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

2 系統(tǒng)功能設(shè)計

五子棋程序通?？梢苑譃橐韵氯齻€主要模塊：人機交互模塊、游戲邏輯模塊和算法處理模塊。通過這三個模塊的協(xié)作，一個完整的五子棋程序能夠?qū)崿F(xiàn)游戲規(guī)則的正確執(zhí)行、良好的用戶交互體驗，以及具有一定智能水平的人機對戰(zhàn)功能[4]。

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

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

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

3 系統(tǒng)功能實現(xiàn)

3.1 用戶界面設(shè)計

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

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

3.2 棋盤實現(xiàn)

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

3.3 棋子實現(xiàn)

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

4 判斷人落子是否獲勝

4.1 設(shè)置贏法數(shù)組

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

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

4.2 判斷人落子是否獲勝

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

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

5 計算機落子的算法

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

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

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

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

6 總結(jié)

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

參考文獻(xiàn)：

[1] 嚴(yán)正學(xué).C++實現(xiàn)五子棋游戲[J].電腦編程技巧與維護，2011（15）：72-74.

[2] 李舒婷，高燕.基于Android的五子棋游戲設(shè)計與實現(xiàn)[J].軟件導(dǎo)刊，2016，15（4）：98-99.

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

[4] 呂尚榕.基于flash的五子棋軟件的設(shè)計與實現(xiàn)[D].上海：復(fù)旦大學(xué)，2012.

[5] 馬鵬強.基于J2ME的手機五子棋游戲設(shè)計與實現(xiàn)[D].成都： 電子科技大學(xué)，2012.

[6] 董紅安.計算機五子棋博奕系統(tǒng)的研究與實現(xiàn)[D].濟南：山東師范大學(xué)，2005.

【通聯(lián)編輯：唐一東】