基于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-），男，山西运城人，副教授，研究生导师，博士，研究方向为网络安全