基于JavaScript的人機五子棋游戲的設計與實現

衛少林，衛文學

（山東科技大學信息科學與工程學院，青島266590）

基于JavaScript的人機五子棋游戲的設計與實現

衛少林，衛文學

（山東科技大學信息科學與工程學院，青島266590）

近年來，游戲設計已經成為社會的一種熱門行業。針對目前網頁版游戲設計原理，設計實現網頁版人機交互五子棋游戲，采用JavaScript的相關技術對游戲的圖形界面進行設計，完成棋盤樣式以及棋子樣式的實現，并借助Sublime Text2.0編譯開發工具，結合相關智能算法，實現計算機模擬人工的智能落子。

游戲設計；五子棋；JavaScript

0　引言

人機大戰中，谷歌的圍棋程序AlphaGo 4:1大勝韓國棋手李世石，一舉攻克圍棋這個“人類智慧最后的高地”，展現了人工智能加速發展的強勁趨勢［1］，也使得人機對弈的棋類游戲成為了人們關注的焦點。下棋是一種抽象活動，對弈的實現需要博弈算法的支持。五子棋是一種兩人對弈的純策略型棋類游戲，起源于中國上古時代的傳統黑白棋種［2］，是世界上最古老的棋，它容易上手，老少皆宜，既可以提高邏輯思維能力，又可增強分析能力和忍耐力。另外，隨著近年來客戶端游戲暴露越來越多的弊端，網頁版游戲憑借其可玩性強、上手容易、游戲穩定、交流方便和擴展性高等特點［3］受到更多人的喜歡。本文將基于JavaScript腳本技術以及相關智能算法的使用，實現一個交互的網頁版人機五子棋游戲。

1　JavaScript與Sublime Text2.0概述

JS為JavaScript腳本語言的簡寫，它是一種目前被廣泛應用在客戶端網頁腳本中的語言［4］，其組成包括：ECMAScript、文檔對象模型（DOM）、瀏覽器對象模型（BOM）三部分，其目的是通過與HTML、XML和Java Applet等語言對象結合起來用來實現網站頁面的客戶端驗證以及網頁特效［5］。相對于其他網頁動態語言ASP、PHP，它具有安全性、動態性、實時性等重要特性是一種跨平臺性的、開發使用簡單的腳本語言。

本文采用Sublime Text2.0開發工具用來實現JavaScript語言的編譯。除了具有良好的擴展能力和完全開放的用戶自定義配置功能外，其具有強大的代碼編譯功能，支持多種編程語言，另外，其內嵌Python解釋器支持插件開發，大量插件可通過Package Control進行管理［6］，而且體積小、運行速度快。

2　設計目標

（1）利用Sublime Text2.0創建一個基于JavaScript的應用程序Chess，程序運行效果如圖1所示。

（2）圖1中棋盤由15條豎線，15條橫線組成，且棋子只能落在線與線的交叉點處。

（3）圖1中有黑白兩種顏色棋子，黑棋（人工方）根據鼠標移動點擊進行落子，且不能與白棋重疊。

（4）圖1中白棋（機器方）可以智能落子。

（5）五顆同種顏色棋子連成一線即獲得游戲勝利，不論黑棋或者白棋取勝自動跳出對話框提示游戲結束。

（6）棋盤大小為寬高都為450像素的矩形。

圖1　運行效果

3　游戲設計的原理及實現

JavaScript代碼，使用方法1來識別棋盤畫布，采用方法2來標示棋盤上下文為2D環境。棋盤區域為高420像素，寬420像素，棋盤由15條橫線，15條豎線組成，棋盤間隔為30像素，繪制棋盤的關鍵代碼如下：

3.1用戶界面界面的設計

表2　本文使用的標簽方法

該游戲的UI界面設計的目錄結構大致分為CSS目錄、Image目錄以及JavaScript目錄，且都存放于UI根目錄下，CSS是一種樣式表技術，其目錄下存放控制HTML內容顯示的.CSS樣式文件，Image目錄下存放設計用到的圖片素材，JS是一種腳本語言，其目錄下存放HTML網頁添加動態交互功能的.js交互文件，整個工程的目錄架構以及文件簡單介紹如下：

（1）Index.html:用于編寫HTML代碼，實現人機交互頁面；

（2）Logo.jpg：為棋盤的背景圖片；

（3）Script.js:用于編寫存放腳本代碼；

（4）Style.css:用于編寫存放樣式代碼。

該文主要標簽的使用，如表1所示。

表1　本文使用的標簽

該文主要方法的介紹，如表2所示。

①繪制棋盤

該游戲主要使用＜canvas＞標簽通過腳本繪制圖像，棋盤頁面結構的設計為瀏覽器居中，大小為高450像素，寬450像素的矩形。對于棋盤的繪制，本文采用方法3、方法4和方法5進行棋盤劃線。創建

②繪制棋子

五子棋中棋子分為黑棋以及白棋，下文中以黑棋的設計為例進行說明。對于黑棋的繪制，采用Canvas下的方法6、方法7和方法8繪制棋子，棋子為圓形，顏色為黑色和白色，并且棋子顏色為漸變，關鍵代碼實現如下：

③實現落子

棋子繪制完成以后，則可實現下棋子的功能，即：點擊鼠標的時候實現落子。棋盤落子根據索引坐標判斷落子位置，整個棋盤存放在數組chessBroad［］［］中，當chessBroad［i］［j］為0時，表示該位置為空，可以實現落子，具體代碼如下：

3.2智能算法設計

該游戲算法實現了當人在棋盤上落下黑棋時，計算機會在棋盤上落下相應的白棋。算法思想為：當落下黑棋時，計算機遍歷整個棋盤，尋找還沒有落子的交叉點，基于一種規則給予每個交叉點相應的得分，得分最高的交叉點為計算機落子的位置，其中的規則要基于下面兩條原則：①計算機白棋要順利連成5顆子；②計算機白棋要阻止人工方黑棋連成5顆子。

算法中相關數組的介紹如下：

（1）贏法數組：wins=［］，它是一個三維數組，記錄了五子棋所有的贏法，前兩維代表五子棋的棋盤，第三維代表贏法的種類，每一種贏法對應棋盤上固定的五個點。

（2）贏法統計數組：myWin=［］，它是一個一維數組，主要用于統計人工方某一種贏法的實現程度。

（3）贏法統計數組：computerWin=［］，它是一個一維數組，主要用于統計計算機某一種贏法的實現程度。

（4）棋盤數組：chessBroad=［］，它是一個二維數組，主要用于棋盤交叉點的描述。

（5）得分數組：myScore=［］，它是一個一維數組，用于統計棋盤上未落子點阻止人工方黑棋連成5顆子的得分程度。

（6）得分數組：computerScore=［］，它是一個一維數組，用于統計棋盤上未落子點使白棋順利連成5顆的得分程度。

①游戲輸贏的判斷

輸贏判斷：當人工方落下黑棋時，遍歷贏法數組wins=［］，如果在該交叉點存在贏法，則贏法統計數組myWin=［］在原來的基礎上加一，此時白棋在該交叉點處不存在贏法，設置其為假，判斷贏法統計數組my-Win=［］的大小，若myWin=［］值等于5，則黑棋獲勝。白棋獲勝思想與上述類似。判斷黑棋獲勝流程圖如圖1所示：

圖1　黑棋獲勝流程圖

關鍵代碼如下：

②計算機落子的判斷

計算機落子判斷：當在棋盤上落下黑棋時，首先考慮阻止黑棋連成5顆，計算機遍歷棋盤數組chess-Broad=［］，尋找未落子的交叉點，然后遍歷贏法數組wins=［］。如果在該點處是否存在贏法，先判斷贏法統計數組myWin=［］對應值的大小，并為該點設定相關分數，myWin=［］的值越小，對應交叉點分數越小，最終獲得棋盤上所有未落子交叉點的myScore［］值。接著考慮使白棋順利連成5顆，同樣，尋找未落子的交叉點，如果在該點處是否存在贏法，則判斷贏法統計數組computer-Win=［］對應值的大小，并為該點設定相關分數，computerWin=［］值越小，對應交叉點分數越小，最終獲得棋盤上所有未落子交叉點的computerScore=［］值。最優落子點的選擇則根據得分數組myScore=［］、computerScore=［］中的最大值進行確定，這樣既實現了白棋的被動防守又實現了主動攻擊。計算機落子分析流程如圖2所示。

圖2　落子分析流程圖

部分代碼實現如下：

4　結語

基于JavaScript強大的腳本編程能力，該文詳細介紹了五子棋游戲的設計過程，實現了人機在瀏覽器窗口下的對弈，完成了對系統架構的設計，介紹了相關算法，為了便于大眾理解，該游戲所采用的智能算法在復雜度方面相對簡單，使得其為參與網頁版棋類博弈系統的初學者提供了很好的參考。

［1］徐文華.人工智能倍增無人系統作戰效能［N］.學習時報，2016-05-30007.

［2］張佳佳.五子棋對戰平臺的設計與實現［J］.電腦知識與技術，2012，22:5409-5411.

［3］張勇輝.網頁游戲《時空》商業策劃書［D］.華南理工大學，2010.

［4］張軍林，陽富民，胡貫榮.JavaScript語言解釋器的設計與實現［J］.計算機工程與應用，2003，30:124-125+140.

［5］方蓓.基于JavaScript的簡易老虎機游戲的實現［J］.軟件導刊，2011，03:123-124.

［6］TechTarget中國.Sublime用戶如何基于APICloud開發跨平臺App［DB］，2015-09-29.

Design and Implement of Man-Machine Gobang Game Based on JavaScript

WEI Shao-lin，WEI Wen-xue

（Institute of Information Science and Engineering，Shandong University of Science and Technology，Qingdao 266590）

In recent years，game design has become a hot industry in society.Designed the human-computer interaction on Gobang game based on the Web page version of the game design principles，in order to complete the board style and the style of the pawn，designs the graphical interface of the game by using JavaScript technology，with the using of Text2.0 Sublime compiler development tools and correlation algorithm，realizes the computer intelligence to play chess.

Game Design；Gobang；JavaScript

1007-1423（2016）25-0058-05DOI：10.3969/j.issn.1007-1423.2016.25.013

衛少林（1993-），男，河南新鄉人，在讀碩士研究生，研究方向為物聯網技術

2016-06-14

2016-08-30

“十二五”國家科技支撐計劃（No.2014BAL04B06）

衛文學（1967-），男，山西運城人，副教授，研究生導師，博士，研究方向為網絡安全