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

衛(wèi)少林，衛(wèi)文學(xué)

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

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

衛(wèi)少林，衛(wèi)文學(xué)

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

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

游戲設(shè)計；五子棋；JavaScript

0　引言

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

1　JavaScript與Sublime Text2.0概述

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

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

2　設(shè)計目標

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

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

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

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

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

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

圖1　運行效果

3　游戲設(shè)計的原理及實現(xiàn)

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

3.1用戶界面界面的設(shè)計

表2　本文使用的標簽方法

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

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

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

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

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

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

表1　本文使用的標簽

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

①繪制棋盤

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

②繪制棋子

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

③實現(xiàn)落子

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

3.2智能算法設(shè)計

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

算法中相關(guān)數(shù)組的介紹如下：

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

（2）贏法統(tǒng)計數(shù)組：myWin=［］，它是一個一維數(shù)組，主要用于統(tǒng)計人工方某一種贏法的實現(xiàn)程度。

（3）贏法統(tǒng)計數(shù)組：computerWin=［］，它是一個一維數(shù)組，主要用于統(tǒng)計計算機某一種贏法的實現(xiàn)程度。

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

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

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

①游戲輸贏的判斷

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

圖1　黑棋獲勝流程圖

關(guān)鍵代碼如下：

②計算機落子的判斷

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

圖2　落子分析流程圖

部分代碼實現(xiàn)如下：

4　結(jié)語

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

［1］徐文華.人工智能倍增無人系統(tǒng)作戰(zhàn)效能［N］.學(xué)習(xí)時報，2016-05-30007.

［2］張佳佳.五子棋對戰(zhàn)平臺的設(shè)計與實現(xiàn)［J］.電腦知識與技術(shù)，2012，22:5409-5411.

［3］張勇輝.網(wǎng)頁游戲《時空》商業(yè)策劃書［D］.華南理工大學(xué)，2010.

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

［5］方蓓.基于JavaScript的簡易老虎機游戲的實現(xiàn)［J］.軟件導(dǎo)刊，2011，03:123-124.

［6］TechTarget中國.Sublime用戶如何基于APICloud開發(fā)跨平臺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

衛(wèi)少林（1993-），男，河南新鄉(xiāng)人，在讀碩士研究生，研究方向為物聯(lián)網(wǎng)技術(shù)

2016-06-14

2016-08-30

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

衛(wèi)文學(xué)（1967-），男，山西運城人，副教授，研究生導(dǎo)師，博士，研究方向為網(wǎng)絡(luò)安全