基于SpringBoot和Vue的貪吃蛇雙人對戰(zhàn)游戲設(shè)計與實現(xiàn)

摘要：貪吃蛇是一款深受歡迎的經(jīng)典單機(jī)小游戲。然而，隨著互聯(lián)網(wǎng)多人聯(lián)機(jī)游戲的蓬勃發(fā)展，貪吃蛇傳統(tǒng)的單人作戰(zhàn)模式已逐漸不再適應(yīng)時代的需求。為了改變這一現(xiàn)狀，文章提出了一種基于SpringBoot和Vue框架的貪吃蛇雙人對戰(zhàn)游戲。游戲前端使用Vue框架結(jié)合HTML的canvas標(biāo)簽進(jìn)行游戲界面的構(gòu)建和圖形的繪制。后端采用SpringSecurity框架和JWT令牌技術(shù)實現(xiàn)了用戶登錄與注冊，確保用戶登錄過程及個人信息的安全。游戲匹配基于微服務(wù)架構(gòu)，通過WebSocket協(xié)議與客戶端進(jìn)行實時通信，實現(xiàn)了雙人匹配功能。為了增添更多變化和樂趣，系統(tǒng)還引入了人機(jī)對戰(zhàn)模式。在這個模式中，玩家可以選擇與機(jī)器人對戰(zhàn)，系統(tǒng)運用動態(tài)編譯技術(shù)來操控機(jī)器人的行為。該游戲的設(shè)計打造了一種全新的游戲體驗，不僅保留了傳統(tǒng)貪吃蛇游戲的經(jīng)典樂趣，還融入了現(xiàn)代游戲多人對戰(zhàn)的元素，顯著提升了游戲的互動性和刺激感。

關(guān)鍵詞：SpringBoot；Vue；匹配服務(wù)；WebSocket；微服務(wù)架構(gòu)；人機(jī)對戰(zhàn)

中圖分類號：TP311" 文獻(xiàn)標(biāo)志碼：A

0 引言

隨著互聯(lián)網(wǎng)技術(shù)不斷發(fā)展，游戲已經(jīng)融入人們的日常生活，成為不可或缺的一部分。貪吃蛇小游戲作為一款經(jīng)典休閑益智類游戲，憑借其簡單的操作和高度的可玩性，始終保持著穩(wěn)定的市場份額。然而，其固有的單人作戰(zhàn)模式使得它在眾多聯(lián)機(jī)對戰(zhàn)游戲中不夠突出。因此，為了提升貪吃蛇游戲的吸引力和娛樂性，本文深入探討了基于SpringBoot和Vue的貪吃蛇雙人對戰(zhàn)游戲設(shè)計與實現(xiàn)，玩家可以創(chuàng)建個人賬戶，選擇個性化的頭像和昵稱，通過匹配系統(tǒng)與其他玩家進(jìn)行雙人對戰(zhàn)。此外，本游戲還增加了人機(jī)對戰(zhàn)模式，進(jìn)一步豐富了游戲玩法。

1 相關(guān)技術(shù)介紹

1.1 SpringBoot

SpringBoot作為Spring框架的衍生開源工具，致力于簡化Java應(yīng)用程序的開發(fā)流程。它通過自動配置、內(nèi)嵌Web服務(wù)器、快速啟動等特性，極大地減輕了開發(fā)者的配置負(fù)擔(dān)和部署煩瑣性，進(jìn)而加快了開發(fā)速度^［1］。SpringBoot簡化了獨立、生產(chǎn)級別的應(yīng)用程序的創(chuàng)建過程，支持微服務(wù)架構(gòu)，集成了眾多即插即用的功能，包括健康檢查、監(jiān)控和日志管理，顯著提升了開發(fā)效率和應(yīng)用的可維護(hù)性。

1.2 Vue

Vue是一個用于構(gòu)建用戶界面的漸進(jìn)式JavaScript框架。Vue的設(shè)計宗旨在于通過簡潔而強大的API，讓開發(fā)者能夠迅速掌握并運用，同時提供了足夠的靈活性以應(yīng)對各種復(fù)雜應(yīng)用的需求。Vue的核心庫專注于視圖層，易于學(xué)習(xí)且便于集成到現(xiàn)有項目中，也可以與其他庫或現(xiàn)有項目無縫結(jié)合^［2］。Vue采用組件化的開發(fā)模式，使得開發(fā)者能夠?qū)⒂脩艚缑鎰澐譃榭蓮?fù)用的組件，每個組件都可獨立進(jìn)行維護(hù)。憑借其易用性、靈活性和高效性，Vue在前端開發(fā)領(lǐng)域贏得了廣泛的認(rèn)可，成為眾多開發(fā)者的首選之一。

1.3 微服務(wù)架構(gòu)

微服務(wù)架構(gòu)是一種設(shè)計軟件的方法，將單一應(yīng)用程序劃分為一組小型、獨立的服務(wù)，每個服務(wù)都實現(xiàn)了特定的業(yè)務(wù)功能并且可以獨立地開發(fā)、部署和擴(kuò)展。這些服務(wù)通常通過定義良好的API相互通信，最常用的是基于HTTP/REST的接口。每個服務(wù)都圍繞具體的業(yè)務(wù)能力構(gòu)建，擁有自己的數(shù)據(jù)庫和其他資源，從而確保服務(wù)之間的解耦。這種架構(gòu)風(fēng)格能夠促進(jìn)敏捷開發(fā)和持續(xù)交付，提高系統(tǒng)的可維護(hù)性和可伸縮性，同時也便于采用不同的技術(shù)棧和技術(shù)方案來實現(xiàn)各個服務(wù)。

1.4 WebSocket

WebSocket協(xié)議是一種網(wǎng)絡(luò)通信協(xié)議，旨在通過在客戶端和服務(wù)器之間建立持久、全雙工的連接，實現(xiàn)實時、低延遲的數(shù)據(jù)交換。與傳統(tǒng)的HTTP協(xié)議不同，WebSocket連接在建立后保持開放，允許雙方隨時發(fā)送和接收數(shù)據(jù)，減少了頻繁建立連接的開銷。通過使用WebSocket，開發(fā)者可以構(gòu)建更加動態(tài)和響應(yīng)迅速的Web應(yīng)用，提升用戶體驗。

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

2.1 系統(tǒng)總體架構(gòu)設(shè)計

本游戲的總體架構(gòu)設(shè)計采用了前后端分離模式，前端基于Vue框架和HTML的canvas標(biāo)簽構(gòu)建游戲界面，實現(xiàn)動態(tài)圖形繪制。對于前端發(fā)送的HTTP請求，后端基于SpringBoot和MybatisPlus框架對數(shù)據(jù)庫進(jìn)行高效處理，實現(xiàn)了用戶登錄注冊、查看個人信息、對局記錄與回放等功能^［3］。對于前端發(fā)送的WebSocket請求，系統(tǒng)通過不同服務(wù)端的處理與響應(yīng)，實現(xiàn)了游戲匹配、人機(jī)對戰(zhàn)等功能。此外，系統(tǒng)基于微服務(wù)架構(gòu)，將游戲服務(wù)端、匹配服務(wù)端和人機(jī)對戰(zhàn)服務(wù)端模塊化，增強了系統(tǒng)的可維護(hù)性和可擴(kuò)展性。這種設(shè)計方式顯著降低了系統(tǒng)各部分之間的耦合性，使得前端和后端可以獨立開發(fā)和部署，各個微服務(wù)之間也保持了松散的依賴關(guān)系，提高了系統(tǒng)的靈活性。系統(tǒng)總體架構(gòu)設(shè)計如圖1所示。

2.2 數(shù)據(jù)庫設(shè)計

本游戲設(shè)計了3張核心數(shù)據(jù)表。首先是user表。它負(fù)責(zé)處理用戶的登錄和注冊流程，其中包含了用戶id（主鍵）、用戶名、密碼、頭像以及天梯積分等關(guān)鍵信息。其次是bot表。該表用于記錄用戶創(chuàng)建的機(jī)器人詳情，包括機(jī)器人id（主鍵）、關(guān)聯(lián)的用戶id（外鍵，指向user表的主鍵）、機(jī)器人標(biāo)題、描述、執(zhí)行代碼、創(chuàng)建時間以及最后修改時間等字段。最后是record表。它用于追蹤用戶的對局記錄，包含對局id（主鍵）、參與玩家a和b的id、初始坐標(biāo)、每一步操作記錄、地圖信息、失敗者標(biāo)識以及對局的創(chuàng)建時間。其中，user_id字段在bot表中作為外鍵，建立了user表與bot表之間的一對多關(guān)系。

2.3 游戲規(guī)則設(shè)計

在游戲匹配階段，玩家可以選擇與其他玩家或者機(jī)器人進(jìn)行對戰(zhàn)。匹配成功后，玩家的起始位置被設(shè)定在地圖的左下角和右上角，玩家可以利用鍵盤上的“w”“s”“a”“d”鍵來控制貪吃蛇，實現(xiàn)“上、下、左、右”的移動。如果玩家選擇與機(jī)器人對戰(zhàn)，機(jī)器人則會依據(jù)內(nèi)置的程序代碼智能判斷最佳的移動方向。在游戲初期，每移動一步貪吃蛇就會增長一格長度；隨著游戲的深入，每移動三步貪吃蛇才會增長一格。最終，若貪吃蛇撞墻、碰撞到其他玩家的貪吃蛇或是自身碰撞，游戲?qū)⒆詣优卸▌儇?fù)或平局。

3 系統(tǒng)具體實現(xiàn)

3.1 前端游戲地圖的實現(xiàn)

在游戲設(shè)計中，游戲地圖由幾個關(guān)鍵部分構(gòu)成：地圖基底的草地、邊緣的墻體、中心區(qū)域的隨機(jī)障礙物以及2位玩家的起始位置，如圖2所示。基于瀏覽器默認(rèn)每秒60幀的渲染頻率，在每次渲染前調(diào)用requestAnimationFrame API來繪制地圖，在繪制時采用HTML中的canvas標(biāo)簽進(jìn)行圖像的實時生成，確保了游戲地圖的連貫性以及蛇類角色移動的流暢性^［4］。

對于地圖基底的草地和邊緣墻體的繪制，本文使用雙重循環(huán)遍歷地圖的行（row）和列（col）。在（row+col）對2取余等于0的節(jié)點以及等于1的節(jié)點處，分別運用canvas標(biāo)簽的fillRect（）方法填充淺綠色和深綠色；邊緣墻體的繪制則是在row=0或col=0的節(jié)點處填充深棕色；對于地圖中間的隨機(jī)障礙物，根據(jù)用戶設(shè)定的數(shù)量，利用隨機(jī)數(shù)生成函數(shù)random（）來創(chuàng)建。同時，為了確保游戲的策略性，避免隨機(jī)生成的障礙物導(dǎo)致玩家陷入封閉區(qū)域，本游戲采用了深度優(yōu)先的搜索算法，構(gòu)建了check_connective（）函數(shù)。該函數(shù)須要傳入起點的坐標(biāo)信息，從起點開始，判斷每一個點在“上下左右”4個方向的偏移量是否有墻，如果沒有墻，則在“上下左右”其中任意一個方向進(jìn)行一次偏移并將新的坐標(biāo)信息傳入函數(shù)，重復(fù)此過程直到遞歸結(jié)束。一旦遞歸過程完成，若最新計算出的坐標(biāo)位置在終點，那么調(diào)用fillRect（）方法來生成一個雙方玩家均可通行、具有高度可玩性的地圖。如果最新的坐標(biāo)位置不在終點，則重新調(diào)用random（）函數(shù)生成隨機(jī)障礙物，直到確保起點與終點之間能夠連通。對于2名玩家起始點的貪吃蛇的創(chuàng)建，使用canvas標(biāo)簽中的arc（）方法，可以便捷地繪制出代表2名玩家的圓形區(qū)域。至此，前端游戲地圖界面得以實現(xiàn)。

3.2 用戶登錄注冊功能實現(xiàn)

為保障數(shù)據(jù)安全，本系統(tǒng)要求用戶在進(jìn)行游戲、構(gòu)建機(jī)器人或查閱對局記錄等操作前必須完成程序的登錄，未登錄的用戶僅限于訪問登錄和注冊界面。本游戲采用Spring Security框架，通過調(diào)整SecurityConfig配置類，實現(xiàn)了對用戶訪問特定模塊權(quán)限的有效管理。在SecurityConfig配置類的調(diào)整過程中，本系統(tǒng)調(diào)用antMatchers方法指定了登錄用戶被授權(quán)訪問的路徑，同時調(diào)用permitAll方法設(shè)定了無須登錄即可訪問的路徑，從而實現(xiàn)了對用戶訪問權(quán)限的精細(xì)管理。

針對用戶登錄驗證過程，本游戲采用了JWT（JSON Web Token）令牌作為認(rèn)證的實現(xiàn)機(jī)制。當(dāng)用戶在前端頁面輸入用戶名和密碼并點擊“登錄”按鈕時，前端會向后端服務(wù)器發(fā)送一個請求。后端服務(wù)器在接收到請求后，將執(zhí)行一系列認(rèn)證流程。一旦認(rèn)證成功，服務(wù)器將生成一個JWT Token并發(fā)送響應(yīng)給前端。該Token隨后會被保存在瀏覽器的本地。此后，每當(dāng)前端向后端發(fā)送請求時，后端都會對JWT Token進(jìn)行驗證。如果Token驗證無誤，后端將執(zhí)行相應(yīng)的業(yè)務(wù)邏輯并返回前端所需的數(shù)據(jù)；如果Token驗證失敗，則會向前端返回錯誤信息并提示用戶重新進(jìn)行登錄操作。通過這2種方式，用戶和系統(tǒng)的安全性得以保證。

3.3 匹配功能的實現(xiàn)

玩家匹配是一個異步過程，匹配完成后須要確保每位用戶都能實時從前端獲取匹配結(jié)果，傳統(tǒng)的HTTP協(xié)議已不再適用。為了解決這一問題，本游戲使用WebSocket協(xié)議，通過維持單一的長連接，確保了客戶端與服務(wù)端之間的持續(xù)聯(lián)系，支持實時的雙向數(shù)據(jù)傳輸并允許客戶端與服務(wù)器之間自由地交換消息^［5］。

首先，在游戲服務(wù)端中構(gòu)建一個WebSocketServer服務(wù)類，以處理前后端之間的通信。當(dāng)前端多個用戶點擊“開始匹配”時，WebSocket服務(wù)器將接收來自不同用戶的連接請求，如果連接成功建立，用戶的id信息和WebSocket對象信息將被存儲于線程安全的Map容器中。然后，使用RestTemplate請求工具將用戶信息通過HTTP請求的方式從游戲服務(wù)端發(fā)送給匹配服務(wù)端。匹配服務(wù)端接收到請求后，會將玩家信息加入一個由多個線程共享的玩家列表（包括匹配線程和傳參線程）。為了防止讀寫沖突，在向列表中添加玩家信息時，須要對線程執(zhí)行加鎖操作。一旦玩家信息成功加入列表，就會對該線程進(jìn)行解鎖。

在對玩家進(jìn)行匹配時，首先應(yīng)依據(jù)用戶ID查詢玩家的天梯積分。若玩家間天梯積分的差距小于10分，匹配系統(tǒng)會立即促成他們的對戰(zhàn)；若積分差距超過10分，匹配線程將進(jìn)入1 s的睡眠，同時匹配限制將被放寬，當(dāng)分差小于20分時，系統(tǒng)將再次執(zhí)行玩家的匹配。這個過程將重復(fù)進(jìn)行，直至玩家成功匹配。匹配成功后，將調(diào)用匹配服務(wù)端的sendResult方法，通過RestTemplate請求工具和HTTP協(xié)議將匹配結(jié)果的請求發(fā)送給游戲服務(wù)端。隨后，通過調(diào)用游戲服務(wù)端的WebSocketServer服務(wù)類的sendMessage方法，利用用戶的WebSocketSession對象，將匹配成功的信息發(fā)送至前端。最后，用戶將接收到相應(yīng)的匹配信息。

3.4 人機(jī)對戰(zhàn)功能實現(xiàn)

3.4.1 機(jī)器人的添加

為了實現(xiàn)人機(jī)對戰(zhàn)功能，首先必須構(gòu)建一個能夠依據(jù)代碼自動執(zhí)行的機(jī)器人。用戶在完成游戲的登錄流程后，便可進(jìn)入個人主頁并創(chuàng)建專屬機(jī)器人。用戶在點擊“創(chuàng)建Bot”按鈕后，前端將會彈出一個機(jī)器人信息編輯界面，用戶可以根據(jù)個人喜好設(shè)定機(jī)器人的名稱、描述以及其執(zhí)行的代碼。

3.4.2 機(jī)器人數(shù)據(jù)持久化

當(dāng)控制層（Controller層）接收到前端發(fā)起的增加機(jī)器人的POST請求時，后端通過@RequestBody注解獲取請求體中的信息并將其存儲于一個Map容器內(nèi)。在執(zhí)行插入操作前，后端執(zhí)行了一系列驗證流程。若用戶輸入的信息為空或不符合規(guī)定，前端將向用戶反饋錯誤信息，提示用戶輸入正確的數(shù)據(jù)。如果驗證無誤，將調(diào)用服務(wù)層（Service層）中相應(yīng)的增加機(jī)器人接口，通過實現(xiàn)類將Map中獲取的機(jī)器人信息轉(zhuǎn)換為bot對象并通過botMapper接口的insert函數(shù)實現(xiàn)該bot對象的持久化存儲。

3.4.3 機(jī)器人的設(shè)計思想

游戲機(jī)器人設(shè)計的核心目標(biāo)是在與對手的對弈中盡可能規(guī)避障礙物，延長生存時間。為了實現(xiàn)這一目標(biāo)，本研究將深度優(yōu)先搜索算法作為機(jī)器人控制策略的核心，通過遞歸方法遍歷所有可能，直至發(fā)現(xiàn)一條可避免碰撞的路徑，從而確保機(jī)器人能在每個決策時刻執(zhí)行當(dāng)前最優(yōu)的動作^［6］。

3.4.4 機(jī)器人代碼的執(zhí)行

為了實現(xiàn)機(jī)器人代碼的動態(tài)編譯，本游戲在項目中引入了Joor庫作為依賴。根據(jù)用戶在前端界面設(shè)計的機(jī)器人行為代碼，系統(tǒng)將負(fù)責(zé)動態(tài)編譯并執(zhí)行這些代碼。為了防止用戶編寫的代碼因為無限循環(huán)或其他邏輯錯誤對游戲穩(wěn)定性產(chǎn)生的影響，系統(tǒng)將動態(tài)編譯和執(zhí)行代碼的過程放在一個獨立的線程中并使用try/catch/finally代碼塊進(jìn)行封裝。若用戶編寫的代碼能夠正常運行，程序會返回一個介于0到3之間的數(shù)字，用來指示機(jī)器人下一步的行動方向：0代表向上，1代表向右，2代表向下，3代表向左；若用戶編寫的代碼運行超時或編譯錯誤，系統(tǒng)將自動中斷線程并觸發(fā)異常，以確保游戲的穩(wěn)定運行。

4 結(jié)語

本文深入探討了基于SpringBoot和Vue框架的貪吃蛇雙人對戰(zhàn)游戲的設(shè)計與實現(xiàn)，通過采用前后端分離的開發(fā)模式，結(jié)合微服務(wù)架構(gòu)和WebSocket協(xié)議，成功打造了一個融合傳統(tǒng)貪吃蛇游戲樂趣與現(xiàn)代網(wǎng)絡(luò)對戰(zhàn)元素的全新游戲。該游戲?qū)崿F(xiàn)了用戶登錄注冊、個人主頁設(shè)置、實時匹配對戰(zhàn)等核心功能并創(chuàng)新性地加入了人機(jī)對戰(zhàn)模式，增強了游戲的互動性和挑戰(zhàn)性。本研究的成果不僅為貪吃蛇游戲的愛好者們帶來了新的娛樂選擇，同時也為網(wǎng)絡(luò)游戲開發(fā)領(lǐng)域貢獻(xiàn)了新的思路和實踐案例。

參考文獻(xiàn)

［1］姜一波.基于SpringBoot+Vue的在線考試系統(tǒng)設(shè)計與實現(xiàn)［J］.無線互聯(lián)科技，2023（23）：68-71.

［2］沈佳棋，倪珊，王杰，等.基于Vue+SpringBoot的分類學(xué)科競賽管理系統(tǒng)設(shè)計［J］.無線互聯(lián)科技，2020（17）：74-77.

［3］石雨昕，關(guān)家興，鄒博華，等.基于SpringBoot微服務(wù)架構(gòu)設(shè)計與實現(xiàn)實驗室開放課題管理系統(tǒng)［J］.實驗室檢測，2024（1）：101-106.

［4］施瑤.基于HTML5的貪吃蛇游戲設(shè)計與實現(xiàn)［J］.福建電腦，2018（7）：118-119.

［5］劉金帥，葛明濤，胡海峰，等.基于SpringBoot和WebSocket的實時電力可視化系統(tǒng)的研究與實現(xiàn)［J］.河南科技，2024（7）：10-13.

［6］車志宏，呂峰.基于α-β剪枝算法的五子棋游戲設(shè)計與實現(xiàn)［J］.電腦編程技巧與維護(hù)，2024（4）：131-133，153.

（編輯 王雪芬）

Design and implementation of greedy snake duel game based on SpringBoot and Vue

ZHANG" Hao， YAO" Baiyun*， DU" Ruiqing

（School of Information and Electrical Engineering，Hebei University of Engineering， Handan 056038， China）

Abstract： Greedy Snake is a popular classic single player mini game. However， with the vigorous development of online multiplayer games on the Internet， the traditional single player combat mode of the greedy snake has gradually not adapted to the needs of the times. In order to change this situation， this article proposes a two player battle game called Snake based on SpringBoot and Vue framework. The game frontend uses Vue framework combined with HTML canvas tags to build the game interface and draw graphics. The backend adopts the SpringSecurity framework and JWT token technology to implement user login and registration， ensuring the security of the user login process and personal information. Game matching is based on microservice architecture， and realtime communication with the client is achieved through WebSocket protocol， realizing the function of two person matching. In order to add more variety and fun， the system has also introduced a humanmachine combat mode. In this mode， players can choose to battle against robots， and the system uses dynamic compilation techniques to control the robot’s behavior. The design of this game creates a brand new gaming experience， which not only retains the classic fun of traditional snake games， but also incorporates elements of modern multiplayer battles， significantly enhancing the interactivity and excitement of the game.

Key words： SpringBoot; Vue; matching service; WebSocket; microservice architecture; manmachine combat