1、中國地質(zhì)大學（武漢）計算機科學與技術學院學院畢業(yè)設計（論文）題目：網(wǎng)絡五子棋的設計與實現(xiàn)摘 要五子棋起源于中國，是我國古代黑白棋種之一，據(jù)考究，五子棋的出現(xiàn)時間早于圍棋，是一種上手簡單但卻內(nèi)藏玄機的游戲。五子棋不但能夠鍛煉人的思維能力，和邏輯能力，而且我們通過下棋能領悟人生哲理。五子棋文化淵源流長,博大精深，經(jīng)過幾千年的傳播，結合中西方文化，不僅活躍在國際比賽，更是各個年齡段都喜歡的大眾游戲。隨著互聯(lián)網(wǎng)的發(fā)展，方便，快捷已經(jīng)成為了時代的主題，傳統(tǒng)五子棋方式已經(jīng)不能滿足廣大用戶的需求，網(wǎng)絡五子棋應運而生。本設計的實現(xiàn)采用B-S結構，以Spring-SpringMVC-MyBatis框架為主體，結

2、合Websocket技術，實現(xiàn)了人機對戰(zhàn)，網(wǎng)絡雙人對戰(zhàn)兩種游戲模式，人機對戰(zhàn)側重于AI算法，而雙人對戰(zhàn)側重于網(wǎng)絡通信。關鍵詞：五子棋；SSM；WebsocketAbstractGoBang originated in China and is one of the ancient black and white chess species in China. According to the study, the appearance of GoBang is earlier than Go, which is a simple but hidden game.GoBang can not o

3、nly train peoples thinking ability, but also logical ability, and we can understand life philosophy by playing chess. The culture of GoBang has a long history and is profound and profound. After thousands of years of communication, combined with Chinese and Western culture, it is not only active in

4、international competitions, but also popular games of all ages.With the development of the Internet, convenience and speed have become the theme of the times. The traditional GoBang method can no longer meet the needs of the majority of users, and the network GoBang came into being. The implementati

5、on of this design adopts the B-S structure, with the Spring-SpringMVC-MyBatis framework as the main body, combined with Websocket technology, realizes the human-machine battle, the network double-play game mode, the man-machine battle focuses on the AI algorithm, and the double-player focuses on net

6、work communication.Keywords: GoBang; SSM; Websocket目錄TOC o 1-3 h u HYPERLINK l _Toc8288 第一章 緒論 PAGEREF _Toc8288 1 HYPERLINK l _Toc13938 第二章 開發(fā)工具、環(huán)境及技術支持 PAGEREF _Toc13938 2 HYPERLINK l _Toc14342 2.1 涉及到的關鍵技術 PAGEREF _Toc14342 2 HYPERLINK l _Toc5600 2.1.1 jsp PAGEREF _Toc5600 2 HYPERLINK l _Toc31429

7、2.1.3 WebSocket PAGEREF _Toc31429 4 HYPERLINK l _Toc7720 2.1.4 javascript PAGEREF _Toc7720 5 HYPERLINK l _Toc5497 2.1.5 Maven PAGEREF _Toc5497 6 HYPERLINK l _Toc17417 2.2 開發(fā)環(huán)境和開發(fā)工具 PAGEREF _Toc17417 6 HYPERLINK l _Toc4095 第三章 五子棋概要設計 PAGEREF _Toc4095 7 HYPERLINK l _Toc9627 3.1 需求分析 PAGEREF _Toc9627

8、7 HYPERLINK l _Toc14072 3.2 模塊化 PAGEREF _Toc14072 7 HYPERLINK l _Toc4162 3.3 功能設計概述 PAGEREF _Toc4162 9 HYPERLINK l _Toc4213 第四章 詳細設計和實現(xiàn)過程 PAGEREF _Toc4213 12 HYPERLINK l _Toc3861 4.1 登錄注冊具體實現(xiàn)過程 PAGEREF _Toc3861 12 HYPERLINK l _Toc27449 4.1.1 注冊功能 PAGEREF _Toc27449 12 HYPERLINK l _Toc3509 4.1.2 登錄功能

9、PAGEREF _Toc3509 13 HYPERLINK l _Toc1211 4.2 人機對戰(zhàn)具體實現(xiàn)過程 PAGEREF _Toc1211 15 HYPERLINK l _Toc15016 4.2.1 人機對戰(zhàn)棋盤畫法 PAGEREF _Toc15016 15 HYPERLINK l _Toc25746 4.2.2 人機對戰(zhàn)輸贏的判定 PAGEREF _Toc25746 17 HYPERLINK l _Toc28080 4.2.3 人機AI算法 PAGEREF _Toc28080 20 HYPERLINK l _Toc16373 4.3 雙人網(wǎng)絡對戰(zhàn)五子棋的實現(xiàn)過程 PAGEREF _T

10、oc16373 21 HYPERLINK l _Toc14776 4.2.1 雙人在線對戰(zhàn)棋盤畫法 PAGEREF _Toc14776 21 HYPERLINK l _Toc3691 4.2.2 雙人在線對戰(zhàn)輸贏判定 PAGEREF _Toc3691 23 HYPERLINK l _Toc20299 4.2.3 將下棋過程存入數(shù)據(jù)庫中 PAGEREF _Toc20299 25 HYPERLINK l _Toc236 4.2.4 悔棋功能的實現(xiàn) PAGEREF _Toc236 26 HYPERLINK l _Toc15290 4.2.5 WebSocket通信功能： PAGEREF _Toc15

11、290 26 HYPERLINK l _Toc22260 4.4 數(shù)據(jù)庫設計 PAGEREF _Toc22260 27 HYPERLINK l _Toc12876 第五章 程序測試 PAGEREF _Toc12876 29 HYPERLINK l _Toc10593 5.1 登陸、注冊模塊測試 PAGEREF _Toc10593 29 HYPERLINK l _Toc14394 5.2 人機模塊測試 PAGEREF _Toc14394 31 HYPERLINK l _Toc16659 5.3 網(wǎng)絡雙人對戰(zhàn)模式 PAGEREF _Toc16659 31 HYPERLINK l _Toc4423

12、5.4 用戶注冊信息和棋盤日志表查看 PAGEREF _Toc4423 32 HYPERLINK l _Toc32673 第六章 結論 PAGEREF _Toc32673 33 HYPERLINK l _Toc31267 致謝 PAGEREF _Toc31267 34 HYPERLINK l _Toc21153 參考文獻 PAGEREF _Toc21153 35 第一章 緒論五子棋起源于古代中國，漢書記載名為連珠、連五子，魏晉南北朝時期傳入日本，經(jīng)日本改進后傳入歐美，在歐美風靡一時。五子棋經(jīng)過時間和異域文化的洗禮才變成今天我們熟知的五子棋。五子棋不僅僅是作為一種娛樂大眾的游戲出現(xiàn)我們生活中，五

13、子棋吸收了古代數(shù)學，哲學的精華，五子棋的黑白代表著陰陽，自古便有陰陽和諧，五子棋的玩法很大程度上體現(xiàn)了這一思想。五子棋現(xiàn)在已經(jīng)作為一種競技類游戲活躍在世界賽場，由此可見其價值之高。隨著互聯(lián)網(wǎng)時代的到來，游戲行業(yè)迎來了春天，各種類型的游戲?qū)映霾桓F，客戶端-服務器模式的游戲依然是時代的主流，但是僅限于那些畫面精美，制作精良的大型動作游戲，現(xiàn)在許多休閑游戲不再需要下載客戶端了，只需要打開瀏覽器，輸入網(wǎng)址，登陸即可開始游戲，這就是瀏覽器-服務器模式的便捷之處，此次開發(fā)的目的就是實現(xiàn)基于瀏覽器-服務器模式下的網(wǎng)絡五子棋。在完成課題的同時，也能夠接觸現(xiàn)在主流的WEB開發(fā)模式和開發(fā)工具，熟悉開發(fā)流程和開發(fā)技

14、術，也是對自己也是一種鍛煉。第二章 開發(fā)工具、環(huán)境及技術支持2.1 涉及到的關鍵技術2.1.1 jspJSP全稱Java Server Pages，JSP的全名叫做Java Server Pages，JSP屬于一種動態(tài)網(wǎng)頁腳本語言，可以跨多個平臺進行實現(xiàn)系統(tǒng)功能，因此具備較好的兼容性，和ASP語言相比，JSP雖然也是基于HTML文件進行運行，但是可以更好地實現(xiàn)與系統(tǒng)用戶之間的互動，讓用戶獲得更好的體驗。JSP語言的技術基礎實際上為Java Servlet，Java Servlet可以結合JSP共同實現(xiàn)大型軟件項目的開發(fā)。JSP腳本語言的優(yōu)勢非常鮮明，首先JSP適用于多種編程語言，尤其非常適合搭

15、配JAVA語言一起使用，結尾的標簽內(nèi)容為，可以最大程度地體現(xiàn)出JAVA語言的優(yōu)勢和特點，并且JSP語言本身也具備JAVA語言的一些特征。JSP語言還可以實現(xiàn)對Java web的UI部分，結合HTML文件、XML文件以及XHTML文件，采用嵌入式開發(fā)來進行前端設計。JSP語言還具備強大的兼容能力，只需要編輯一次，就可以在多個平臺間反復利用，極大地縮短了開發(fā)人員的開發(fā)時間，并且可以在多個編譯環(huán)境中進行開發(fā)，方便開發(fā)人員對系統(tǒng)進行部署，有利于對系統(tǒng)環(huán)境進行擴充。JSP腳本語言還具有較為可靠的穩(wěn)定性和安全性，自帶很多功能強大的工具，可以保證開發(fā)人員開發(fā)過程的順暢和便利，并且系統(tǒng)具有較高的安全性，再加上

16、JSP技術是可以免費下載的，這也讓JSP技術的應用范圍不斷擴大。此外，JSP語言可以實現(xiàn)對數(shù)據(jù)庫、用戶操作和選擇的相關信息以及JavaBeans組件來進行訪問，并且實現(xiàn)多個網(wǎng)頁間的信息傳遞和信息共享。2.1.2 SSM框架SpringSpring是軟件開發(fā)領域中一種常見的設計框架，其源代碼是對外開放的，并且屬于面向接口編程思維，主要用于處理和解決業(yè)務邏輯層和其他層次的問題。早在2003年，Spring就開始在開發(fā)領域被人們所熟知，一開始的主要應用在Java 語言的應用程序的開發(fā)上，創(chuàng)始人為Rod Johnson，因此，Spring框架不僅是JavaSE/EE分層，還是一種輕量級的全棧式框架 明

17、日科技. JavaWeb項目開發(fā)實戰(zhàn)入門. 吉林大學出版社，2017.1。 Spring設計框架的核心為是IOC和AOP，其中IOC的全稱為Inversion of Control，表示控制反轉，AOP的全稱為Aspect Oriented Programming，表示面向切面的編程方式。控制反轉，指的是對這些相互依賴對象的創(chuàng)建和協(xié)調(diào)工作都交由Spring容器來實現(xiàn)，當某個對象需要其他協(xié)作對象時，由Spring動態(tài)的通過依賴注入(DI, Dependency Injection)的方式來提供協(xié)作對象，其只需要關注業(yè)務本身的邏輯即可。Spring從2004年的第一版發(fā)展到現(xiàn)在，已經(jīng)成為了一個生態(tài)

18、帝國，經(jīng)過不斷的改進發(fā)展，現(xiàn)如今的SpringMVC、SpringBoot、Spring Cloud等解決方案共同構成了Spring框架。有人親切的稱之為：Spring 全家桶。在本項目中我們后臺選擇了Spring,SpringMVC,MyBatis這一套框架，搭配Maven，開發(fā)效率成倍提高。SpringMVCSpringMVC框架主要基于web層的，其框架類型屬于MVC模式，適合對Servlet進行配合，從而快速處理web層的響應和請求，還能快速獲取表單內(nèi)容，并且對表單進行校驗 楊靜.基于JAVA WEB中MVC模式的研究和應用J. 電腦知識與技術,2014,9(28)68-71。Spri

19、ngMVC的工作原理圖如圖1.1圖1.1SpringMVC框架根據(jù)配置來分，可以分為兩個啟動流程：1、對ontextLoaderListener進行初始化，完成對IoC容器的實例化后，將實例化的內(nèi)容注冊在ServletContext中。2、對DispatcherServlet進行始化，通過建立上下文，將上下文注冊在ServletContext中。由于本項目重點為算法和通信，故不再深究。 MyBatis MyBatis 一開始只是一個開源項目，由Apache軟件基金會推出，直到2010年，apache software foundation 將MyBatis 項目添加進入到google code

20、中，正式更名為MyBatis，MyBatis因此而來。2013，再次將MyBatis添加進入到Github。iBATIS源于“internet”和“abatis”這兩個意思，主要是基于Java語言的應用在持久層上的一種設計框架，因此，iBATIS開源提供多種持久層的框架，主要包括DAOs（Data Access Objects）、SQL Maps等 王循. JavaWeb快速開發(fā)框架中部分關鍵技術初步研究D . 吉林大學，2015。很多開發(fā)人員習慣采用MyBatis中的ORM機制，因此MyBatis可以面對純粹的Java對象，還可以根據(jù)Hibernate 來實現(xiàn)ORM，Hibernate 還可

21、以基于數(shù)據(jù)操作生成相應的SQL語句，但是MyBatis 在對數(shù)據(jù)庫進行處理時，其優(yōu)勢在于對SQL工作量、數(shù)據(jù)庫具有較好的可移植性，從而保證系統(tǒng)在設計的過程中可以具備更高的靈活性。因此，MyBatis 可以對ORM 的功能進行有效補充和完善，具有非常重要的現(xiàn)實意義。本課題的設計屬于Maven項目，只需在pom.xml中引入依賴即可。pom.xml中的配置如下 HYPERLINK C:/Users/jimmy/Documents/WeChat Files/xiaodi19961031/FileStorage/File/2019-05/gobang/pom.xml org.mybatismybati

22、s3.2.8 HYPERLINK C:/Users/jimmy/Documents/WeChat Files/xiaodi19961031/FileStorage/File/2019-05/gobang/pom.xml org.mybatismybatis-spring.3 WebSocketWebSocket主要基于一個獨立的TCP連接，從而完成通信協(xié)議，協(xié)議的類型屬于全雙工模式。在2011年，WebSocket就被IET列入為標準RFC 6455，并且讓RFC936不斷對其內(nèi)容進行補充，因此，W3C將WebSocketAPI列為標準 Chris Heilmann (Dece

23、mber 8, 2010). WebSocket disabled in Firefox 4.Hacks.M. Retrieved 2011-05-09.。WebSocket可以簡化服務器和客戶端之間的數(shù)據(jù)交換和交互功能，讓服務器主動給客戶端發(fā)送數(shù)據(jù)內(nèi)容，因此，WebSocket API的瀏覽器和服務器在完成首次握手后，就可以持續(xù)連接和通信，雙向進行數(shù)據(jù)交互。選用Websocket技術作為服務器和客戶端交互手段的原因：HTML頁面早期是靜態(tài)的，不能進行交互，后來出現(xiàn)了JavaScript,在一定程度上解決了交互問題，但是JS在剛出現(xiàn)的時候并不能和服務器進行交互，直到Ajax的出現(xiàn)。Ajax解決

24、了頁面和服務端進行交互的問題，但是Ajax所有的請求都必須由客戶端發(fā)起，服務器端響應，如果服務器端有最新消息難以及時發(fā)送到客戶端，在WebSocket出現(xiàn)之前，客戶端和服務器的信息交互方法主要有以下三種方式：輪詢：客戶端定期持續(xù)向服務器發(fā)送請求內(nèi)容，從而判斷服務器是否存在新數(shù)據(jù)，如果有新數(shù)據(jù)，需要傳送到客戶端進行顯示。服務端如果沒有就返回給一個空的json或者xml文檔，此方法實現(xiàn)方式簡單，但是會存在大量的無效請求，服務器端的資源占用過大 洪世勇. 高Java中基于Socket的網(wǎng)絡編程J. 軟件工程師，2013（01）：61-62長連接：類似于輪詢，不同點在于服務器端不會每次都會響應客戶端的

25、請求，只有在服務器端有最新的數(shù)據(jù)時才會響應客戶端的請求，這種方式解決了長連接存在無效請求的問題Applet和Flash：實現(xiàn)了真正意義上的全雙工通信，但存在安全問題，可移植性差WebSocket的優(yōu)勢：由于WebSocket與HTTP使用的端口相同，夸張的講幾乎所有防火墻都不會阻塞Websocket連接。WebSocket使用HTTP協(xié)議進行握手通信，因此它能夠輕而易舉的集成到瀏覽器中使用WebSocket進行通信時，無論時服務器端還是客戶端都可以知道消息的啟動或者到達WebSocket支持跨域，可以避免Ajax的限制2.1.4 javascriptJavascript屬于一種較為常見的腳本語

26、言,主要用于Web的開發(fā),為Web網(wǎng)頁設置多種動態(tài)效果和相關功能,因為原始的HTML語言功能性很差，只能實現(xiàn)一些靜態(tài)功能，而且界面單一。JavaScript的出現(xiàn)使得前端界面變得豐富多彩，通過精美的包裝，給用戶提供更流暢美觀的瀏覽效果。通常JavaScript腳本語言是嵌入在HTML中來實現(xiàn)各種動態(tài)的功能。Javascript的特點：是一種解釋類型的腳本語言，簡單易懂，易編寫修改。基于對象可跨平臺，可移植性強2.1.5 Maven Apache Maven是一種常見的軟件項目管理工具，主要基于POM模型，主要用戶對項目的構建，從而對項目的相關文件進行管理。除此之外也能提供中央倉庫，自動幫我們下

27、載構件，省去了自己配置項目時，需要下載工具的麻煩，如果想要引入jar包，根本無需手動添加，只要在pom.xml下添加依賴即可。上面已經(jīng)提到了引入了MyBatis，本項目還引入了websocket等依賴，依賴較多故不一一說明。 2.2 開發(fā)環(huán)境和開發(fā)工具開發(fā)環(huán)境：win10 64位操作系統(tǒng)處理器：Intel(R) Core(TM) i5-4210U CPU 1.70GHz 2.40GHz內(nèi)存（RAM）:12G開發(fā)工具：JDK 1.7 IntelliJ IDEA 2019.1.2版本Mysql 5.7.25版本Apache Tomcat 8.5.35版本Navicat Premium12.0.18

28、版本第三章 五子棋概要設計3.1 需求分析通過分析，根據(jù)需求，要求實現(xiàn)以下功能：賬號的登陸、注冊、退出、密碼修改等功能人機對戰(zhàn)功能雙人網(wǎng)絡對戰(zhàn)功能重開對局功能悔棋功能認輸功能通過將用戶要求轉化為具體功能，目的更加明確，將功能模塊化，以便更快更好的完成該項目。3.2 模塊化系統(tǒng)分為3個主要模塊登陸、注冊模塊人機對戰(zhàn)模塊雙人網(wǎng)絡對戰(zhàn)各個模塊功能結構圖：登陸、注冊模塊如圖3.1圖3.1登陸模塊人機對戰(zhàn)模塊如圖3-2圖3.2 人機模塊雙人網(wǎng)絡對戰(zhàn)如下圖3-3圖3.33.3 功能設計概述本系統(tǒng)是基于瀏覽器服務器模式下網(wǎng)絡五子棋程序，能夠?qū)崿F(xiàn)人機對戰(zhàn)，雙人網(wǎng)絡對戰(zhàn)，完成了五子棋游戲的一些基礎操作，如落子、

29、勝負判定、認輸、悔棋、棋盤保存等功能。游戲界面簡潔，邏輯性較強。服務器端設計：處理用戶的登陸、注冊、密碼修改等信息，將用戶信息及時同步到數(shù)據(jù)庫中。瀏覽器端設計：對表單進行正確填寫，及時反饋給客戶端信息，使得用戶能夠進行正常的登陸和游戲，并且點擊相應的button發(fā)出鼠標點擊請求事件，服務器通過不同的事件，進行不同的反應用戶注冊：首次游戲的用戶需要填寫注冊信息，并將數(shù)據(jù)存入數(shù)據(jù)庫中。用戶通過注冊來創(chuàng)建自己的賬號，以便登錄后進行游戲。用戶登錄：用已有的賬號信息登錄，通過和數(shù)據(jù)庫表User內(nèi)信息進行比較，驗證登錄，如果信息正確進入主頁面，否則彈出信息錯誤提示。人機對戰(zhàn)：選擇先手、后手，棋子顏色，重新

30、開始等功能人機對戰(zhàn)模式的系統(tǒng)流程圖如下圖3.4 寧淑榮 楊國興. Java五子棋游戲制作. 清華大學出版社，2017.5圖3.4雙人網(wǎng)絡對戰(zhàn)：認輸、悔棋、重開功能雙人網(wǎng)絡對戰(zhàn)模式系統(tǒng)流程圖如下圖3-5圖3.5修改密碼功能：輸入兩次新密碼即可修改密碼，將新密碼同步到數(shù)據(jù)庫User表中第四章 詳細設計和實現(xiàn)過程4.1 登錄注冊具體實現(xiàn)過程4.1.1 注冊功能注冊功能是由前臺的register.jsp頁面的form表單來實現(xiàn)的，通過點擊注冊提交form表單，再由controller接受表單信息，并作出響應。代碼如下。 此時發(fā)出去的請求會被web.xml攔截下來，進而將請求內(nèi)容添加到相應的Reques

31、tMapping中，RequestMapping屬于一種常見的注解方法，根據(jù)傳入的參數(shù)User 中的username判斷用戶是否存在并注冊，代碼如下:UserController.java: RequestMapping(value = register.action) public String register(HttpServletRequest request, Model model, User user) User user1 = userService.selectUser(user); if (user1 != null) request.setAttribute(error,

32、 該用戶已經(jīng)存在,請重新注冊！); return register; else userService.saveUser(user); return login; UserMapper.xml中用戶注冊的sql: insert into user (username, password, createtime, phone, states) values (#username,jdbcType=VARCHAR, #password,jdbcType=VARCHAR, #createtime,jdbcType=TIMESTAMP, #phone,jdbcType=BIGINT, #states,

33、jdbcType=VARCHAR) 4.1.2 登錄功能登錄功能起始是由前臺的login.jsp頁面的form表單開始，點擊登錄提交form表單 此時發(fā)出去的請求會在web.xml中被攔截，并且由相應的RequestMapping方法來進行處理，參數(shù)username 主要用來對用戶的登錄狀態(tài)進行判斷，如果用戶已經(jīng)登錄成功，user將被添加到session中。所謂session，在軟件開發(fā)領域，主要是指會話控制，因此，Session 的對象一般就是對用戶會話相關信息的存儲，當用戶在網(wǎng)頁中進行操作，從而讓網(wǎng)頁跳轉時，Session 對象對象依然存在，不會造成丟失的情況，如果用戶還沒有創(chuàng)建會話，在對

34、web進行操作時， Web 服務器會自動為用戶進行創(chuàng)建，值得注意的是，如果Session 過期， Web 服務會將其終止掉。代碼如下: RequestMapping(value = login.action) public String login(HttpServletRequest request, HttpServletResponse response, User user) response.setHeader(Content-type, text/html;charset=UTF-8); User user1 = userService.selectUser(user); if (

35、user1 = null) request.setAttribute(erro, 密碼錯誤); return login; else request.getSession().setAttribute(user, user1); return redirect:main.action; 有了session,我們便可配置攔截器，根據(jù)session中User信息是否存在來判斷用戶的登錄狀態(tài)，如果用戶處于登陸狀態(tài)登錄，則通過，否則將自動將其攔截到登錄頁面 public boolean preHandle(HttpServletRequest request, HttpServletResponse

36、response, Object obj) throws Exception String url = request.getRequestURI(); User user = (User) request.getSession().getAttribute(user); if (user != null) /如果用戶已經(jīng)登錄 直接放行 return true; else /如果用戶訪問的是登錄 注冊就放行，其他的攔截到登錄頁面 if (url.contains(login.action) | url.contains(register.action)| url.contains(index.

37、action) return true; else response.sendRedirect(login.jsp); return false; 以下是修改密碼的sql,流程基本如上，故不詳細說明 update user set password = #password,jdbcType=VARCHAR, createtime = #createtime,jdbcType=TIMESTAMP, phone = #phone,jdbcType=BIGINT, states = #states,jdbcType=VARCHAR where username = #username,jdbcTyp

38、e=VARCHAR 4.2 人機對戰(zhàn)具體實現(xiàn)過程4.2.1 人機對戰(zhàn)棋盤畫法導入背景圖片，根據(jù)圖片像素大小，將背景圖片分割成15*15的正方形網(wǎng)格作為棋盤棋盤的邊框，每個小格子的長，寬像素設置如下：div.chessboard margin: 30px 0 0 50px; width: 542px; background: url(img/chessboard.png) no-repeat 14px 14px rgb(250, 250, 250); overflow: hidden; box-shadow: 2px 2px 8px #888; -webkit-box-shadow: 2px 2

39、px 8px #888; -moz-box-shadow: 2px 2px 8px #888;div.chessboard div float: left; width: 36px; height: 36px; border-top: 0px solid #ccc; border-left: 0px solid #ccc; border-right: 0; border-bottom: 0; cursor: pointer;棋盤畫法：重復topline的畫法依次將背景圖片分割成15*15的網(wǎng)格 4.2.2 人機對戰(zhàn)輸贏的判定根據(jù)最后的落子來判斷輸贏，依次從X軸方向、Y軸方向、左斜方向、和右斜方

40、向統(tǒng)計同一方向上的相同顏色連續(xù)棋子數(shù)目，如果在同一方向上相同連續(xù)棋子的數(shù)目等于5時持該顏色棋子的一方獲勝具體實現(xiàn)的代碼如下：playerWinOrNot: function (i, j) var nums = 1, /連續(xù)棋子個數(shù) chessColor = this.humanPlayer = black ? this.BLACK_CHESS : this.WHITE_CHESS, m, n; /x方向 for (m = j - 1; m = 0; m-) if (this.chessArrim = chessColor) nums+; else break; for (m = j + 1;

41、m = 5) this.playerWin(); return; else nums = 1; /y方向 for (m = i - 1; m = 0; m-) if (this.chessArrmj = chessColor) nums+; else break; for (m = i + 1; m = 5) this.playerWin(); return; else nums = 1; /左斜方向 for (m = i - 1, n = j - 1; m = 0 & n = 0; m-, n-) if (this.chessArrmn = chessColor) nums+; else b

42、reak; for (m = i + 1, n = j + 1; m 15 & n = 5) this.playerWin(); return; else nums = 1; /右斜方向 for (m = i - 1, n = j + 1; m = 0 & n 15; m-, n+) if (this.chessArrmn = chessColor) nums+; else break; for (m = i + 1, n = j - 1; m = 0; m+, n-) if (this.chessArrmn = chessColor) nums+; else break; if (nums

43、= 5) this.playerWin(); return; this.AImoveChess();,4.2.3 人機AI算法各個玩家每下一步棋時，AI算法會遍歷整個棋盤，通過計算出每個位置的權重值，再將權重值進行比較，根據(jù)不同權重比，確定棋局的形式，規(guī)定固定棋型的分數(shù)，根據(jù)棋型，確定棋盤每個位置空子的分值，然后就下分值最高的那個點 裴博文. 五子棋人工智能權重估值算法J.電腦編程技巧與維護, 2008 (06):69-73 。computeWeight: function (i, j) var weight = 14 - (Math.abs(i - 7) + Math.abs(j - 7),

44、 /基于棋盤位置權重 pointInfo = , /某點下子后連子信息 chessColor = this.AIPlayer = black ? this.BLACK_CHESS : this.WHITE_CHESS; /x方向 pointInfo = this.putDirectX(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true);/AI下子權重 pointInfo = this.putDirectX(i, j, -chessColor)

45、; weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false);/player下子權重 /y方向 pointInfo = this.putDirectY(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true); pointInfo = this.putDirectY(i, j, -chessColor); weight += this.w

46、eightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, false); /左斜方向 pointInfo = this.putDirectXY(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true); pointInfo = this.putDirectXY(i, j, -chessColor); weight += this.weightStatus(pointInfo.nums

47、, pointInfo.side1, pointInfo.side2, false); /右斜方向 pointInfo = this.putDirectYX(i, j, chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointInfo.side2, true); pointInfo = this.putDirectYX(i, j, -chessColor); weight += this.weightStatus(pointInfo.nums, pointInfo.side1, pointIn

48、fo.side2, false); return weight;,4.2 雙人網(wǎng)絡對戰(zhàn)五子棋的實現(xiàn)過程4.2.1 雙人在線對戰(zhàn)棋盤畫法根據(jù)圖片像素大小，將背景圖片分割成15*25的正方形網(wǎng)格作為棋盤背景，具體實現(xiàn)過程：樣式： tr height: 40px; td width: 39px; table /*border-right: 1px solid #010000;*/ /*border-bottom: 1px solid #010000;*/ table td border-left: 1px solid #010000; border-top: 1px solid #010000 ta

49、ble tr:nth-last-child(1) td border-left: 0px solid #010000; table td:nth-last-child(1) border-top: 0px solid #010000 img width: 22px; height: 22px; 畫棋盤：var XX=0;var YY=0;var str = ;for (var i = 0; i 15; i+) str += ; for (var j = 0; j 25; j+) str += ; str += ;利用WebSocket建立連接并進行通信：Websocket的接口類：import

50、 javax.websocket.OnClose;import javax.websocket.OnMessage;import javax.websocket.OnOpen;import javax.websocket.Session;import javax.websocket.server.PathParam;import javax.websocket.server.ServerEndpoint;4.2.2 雙人在線對戰(zhàn)輸贏判定雙人對戰(zhàn)游戲勝利的判定和人機對戰(zhàn)相同都是統(tǒng)計X軸方向、Y軸方向、左斜方向、和右斜方向同一方向上的相同顏色連續(xù)棋子數(shù)目 private static int is

51、Success(int x, int y, int f, int oriData) /y的范圍在0-14之間，x的范圍在0-24之間 int count = 0; for (int i = x - 1; i -1; i-) if (oriDatayi != f) break; count+; for (int i = x + 1; i 3) return f; count = 0; for (int i = y + 1; i -1; i-) if (oriDataix != f) break; count+; if (count 3) return f; count = 0; for (int i = x + 1, j = y + 1; i 25; i+, j+) if (j -1; i-, j-) if (j -1) if (oriDataji != f) break; count+; else b