基于HTML5技术的五子棋游戏的设计与开发
董春侠，司占军
（天津科技大学包装与印刷工程学院，天津300222）
摘要：HTML5标准的制定与发布带动了HTML5游戏的发展。基于HTML5的五子棋游戏是一款休闲益智的网页游戏，主要利用了HTML5新增的Canvas标签实现游戏的开发。首先在PhotoShop中进行素材编辑和UI设计，然后利用HTML5和CSS3实现游戏页面的布局及样式，利用Canvas及其自带的API进行棋盘和棋子的绘制，并通过JavaScript脚本实现游戏的主要逻辑，最后利用XAMMP在本地服务器上发布。HTML5独特的跨平台能力，使得该游戏能够在多种平台设备上运行，达到完美的兼容效果。
关键词：游戏；五子棋；HTML5；Canvas
中图分类号：TP399文献标识码：A DOI：10．19358/j．issn．1674-7720．2017．11．004
引用格式：董春侠，司占军．基于HTML5技术的五子棋游戏的设计与开发［J］．微型机与应用，2017，36（11）：12-14．
Design and development of gobang game based on HTML5
Dong Chunxia，Si Zhanjun
（College of Packaging＆Printing Engineering，Tianjin University of Science＆Technology，Tianjin300222，China）
Abstract：With the standard formulation and release of HTML5，it has led the development of HTML5games．The gobang game based on HT-ML5is a casual puzzle game which is released on web．It mainly used the new tag that is Canvas of HTML5to realize the development of the game．Firstly，the material was edited and the web-page was designed with the soft PhotoShop．Then，the layout and style was realized with HTML5and CSS3．The board and the pawn were painted using Canvas and its own API．And through the JavaScript，the main logic of the game was achieved．Finally，the game was released on the local server．Because of the unique capabilities of crossing platform，that makes the game can be run on a variety of platforms，and achieve the perfect compatibility．
Key words：game；gobang；HTML5；Canvas
0引言
随着信息时代的不断发展，带动了游戏产业的飞速提升，游戏成为了生活中必不可少的娱乐方式之一。游戏的种类逐渐从单一化向多元化发展，其中休闲类游戏占据着游戏市场的重要位置。无论是类游戏还是益智类游戏都备受大众喜爱，例如“斗地主”、“像素小鸟”等；此外，游戏的开发模式也多种多样，各具特。其中，基于HTML5开发的游戏以其独特的跨平台性和轻量性，且无需进行客户端下载与安装，即可进行游戏，实现“即点即玩”，获得了很好的用户体验，并且具有很强的社交传播性［1-2］。
1HTML5介绍
HTML5是HTML的最新标准，它提供了许多用以加强交互和多媒体支持的新元素，如Canvas、audio、video等，这些新元素使得浏览器不依赖Flash等第三方插件即可开发高质量的原生程序［3］。HTML5提供的Canvas是HT-ML5网页游戏开发中最重要的元素，它提供了新的网页编程接口，开发者可以通过JavaScript处理画布内的图像，可以在画布中绘制直线、圆、矩形等基本形状，实现游戏画面或其他虚拟图像的实时渲染［4］，完成游戏画面的搭建，使游戏的开发变得更加便捷。目前各大浏览器逐渐完善对GPU加速的2D Canvas渲染功能的支持，因此，使用Canvas绘制出的游戏动画运行速度明显加快。
与其他技术开发的游戏相比，基于HTML5开发的游戏有两点主要优势：一是其相关技术免费开放、规范并且易于推广；二是无需安装插件，减少了用户的麻烦，提高了安全性，是众多游戏开发者的优先选择
［5］。本设计基于HTML5进行五子棋游戏的开发，使用户在与计算机对战时充分开动大脑，体验简单的人工智能算法的下棋逻辑，给用户体验带来一定的乐趣。
2思路框架
基于HTML5技术的五子棋游戏结合HTML5、CSS3和JavaScript进行开发，利用JavaScript调用Canvas自带的API对棋盘和棋子的绘制和游戏主要逻辑的编写。每个界面放置不同的按钮，玩家通过点击按钮实现游戏的操作以及页面的跳转。除此之外游戏还能实现皮肤的切换。游戏的开发流程图如图1所示。
21
《微型机与应用》2017年第36卷第11期
《微型机与应用》2017年第36卷第11期欢迎网上投稿www．pcachina．
com
图1
思路流程图
3
游戏设计与实现
3．1
界面设计和素材处理
（1）棋盘设计：棋盘大小为450ˑ450像素的正方形，横竖各15条线，构成255个交叉点，并设计多种风格的棋
盘供用户选择。
（2）风格设计：由于五子棋起源于中国，本次五子棋
游戏主要以“中国风”为基调进行设计。选用灰作为游戏界面的主调，
搭配卷轴和画框构成游戏背景。其中卷轴的动画是在PhotoShop 的动画面板中制作，通过设置每一帧的显示样式和每一帧动画的延迟时间以及循环播放次数，完成卷轴由内向外逐渐打开的动画效果。制作图和动画面板设置如图2如示
。
图2
卷轴动画的制作
3．2页面布局
游戏界面通过HTML 进行布局，通过CSS 进行样式调
整，Canvas 作为承载棋盘和棋子的画布。3．2．1
棋盘的绘制
［6］
在html 文件中创建＜canvas ＞标签作为承载棋盘的容器，像所有的DOM 对象一样Canvas 有自己本身的属性、方法
和事件，其中就有绘图的方法，js 能够调用它来进行绘图。由于Canvas 的左上角为画布的起点，坐标为（0，
0）。通过计算，除去左右各留白的15个像素后，棋盘的4个顶点在Canvas 中的坐标依次为（15，
15）、（435，15）、（435，435）、（15，435）。利用for 循环可以迅速画出棋盘，当i
（线条数）等于0时，从（15，15）起点到（15，435）点开始绘制第一条纵线，当i 等于1时，纵坐标保持不变，起点和终点的横坐标各增加30个像素，第二条纵线绘制完成。以此类推，绘制其余的13条纵线。当i =15时，不满足i ＜15的条件，退出for 循环，从而完成五子棋盘的15条纵线的绘制，同理绘制出15条横线。实现代码如下：
function drawChessBoard （）｛for （var i =0；i ＜15；i ++）｛
context．moveTo （15+i*30，15）；
context．lineTo （15+i*30，435）；context．stroke （）；
context．moveTo （15，15+i*30）；
context．lineTo （435，15+i*30）；context．stroke （）；｝｝
3．2．2棋子的绘制
五子棋的绘制是由3个大小不一的圆形组成。其中
的两个小圆左渐变效果。以黑棋为例，先利用beginPath （）创建路径，然后用arc 方法绘制一个实心圆，调用fill 填充颜。然后用CSS3新增样式gradient 属性绘制棋子的渐变效果，使棋子呈现立体感。代码如下：
context．beginPath （）；
context．arc （200，200，100，0，2*Math．PI ）；context．closePath （）；
var gradient =context．createＲadialGradient （200，200，50，200，200，20）；
gradient．addColorStop （0，“#0A0A0A ”）；gradient．addColorStop （1，“#6363766”）；context．fillStyle =gradient ；context．fill （）；
3．2．3棋盘背景切换
更换棋盘背景风格是通过更改图片的路径来实现的。通过＜a ＞标签提供多组棋盘背景图片，并绑定onclick 事件，当点击＜a ＞标签时调用onclick 绑定的函数从而实现背景的切换。
3．3游戏主要逻辑3．3．1
落子的实现
落子需要给棋子绑定一个onclick 事件。以黑子为
例，当点击鼠标实现黑棋的落子，具体代码如下：
chess．onclick =function （e ）｛var x =e．offsetX ；var y =e．offsetY ；var i =Math．floor （x /30）；var j =Math．floor （y /30）；oneStep （i ，j ，true ）；｝
以上代码中，offset 代表了HTML 元素相对于自己的offsetParent 元素的位置，由于落子的实现是在棋盘中完成的，所以这里的父级为Canvas 元素。e．offsetX 是相对于
3
1
《微型机与应用》2017年第36卷第11期
Canvas 坐标系的左上角开始的坐标。由于棋盘在Canvas 中绘制左右各留白15个像素，且黑白棋子和棋盘的每个
格子各为30ˑ30个像素［7］
。棋盘的坐标系相对于Canvas 向右下方移动了15个像素，所以棋子横纵坐标各整除30，刚好每隔30个像素落到横纵线的交叉点上，从而完成落子的实现。
3．3．2赢法数组的计算
首先用一个三维数组记录五子棋所有的赢法，数组的
前面两位数据代表五子棋的棋盘坐标，
第三个数据表示赢法的种类。每种赢法在棋盘上只显示5个棋子，并且这些
棋子相互连接成一条线，可以为横线、竖线或是斜线，用true 代表交叉点存在棋子，棋盘上的其余位置都为false ，表示没有棋子存在。赢法数组的计算的部分代码如下：
var count =0；
for （var i =0，i ＜15，i ++）｛for （var j =0；j ＜11；j ++）｛for （var k =0；k ＜5；k ++）｛
wins ［i ］［j +k ］［count ］=true ；｝count ++；｝｝
3．3．3人机对战五子棋AI 的实现
五子棋游戏的玩法少不了人机对战的模式，玩家和计
算机各执黑棋和白棋，双方依次交替落子，任何一方首先实现5个棋子的连接则为胜利方。其中，计算机的落子是通过算法计算实现的。AI 方首先需要遍历整个棋盘上还没有落子的交叉点，通过算法给这些交叉点分别计算得分，得分最高的交叉点则是AI 方需要落子的地方。依靠这种算法，AI 方不仅需要连接5个棋子，还需要阻止玩家
游戏网页界面设计
首先取得胜利，从而实现玩家与计算机的对战模式。3．4
游戏发布
通过修改测试后将游戏开发包放入建站集成软件包
Xammp 的htdocs 内进行本地服务器的发布。游戏开始画面、
主画面和说明画面最终效果如图3所示。4结束语
基于HTML5技术开发的游戏能以最简单和最便捷的方式在移动设备上运行，并且其具有的跨平台能力，
能良好地解决目前市场上各种不同操作系统和屏幕尺寸设备所带来的问题，使游戏的测试变得简单可行。
其开放性的图3
游戏主要界面图
特点使HTML5不为单个公司所有或控
制，使得HTML5拥有比其他类似平台
更持久的生命力，在未来将会占据重要
的地位。参考文献
［1］黎志雄，黄彦湘，
陈学中．基于HT-ML5游戏开发的研究与研究［J ］．东莞理工学院学报，2014，21（5）：48-53．
［2］吴少军．网页游戏
开发新趋势与新技术漫谈［J ］．当代教育理论与实践，2012，4（6）：175-176．
［3］余飞．HTML5图形图像处理技术研究［J ］．计算机光盘软件
与应用，
2013（12）：261，263．［4］沈柯，司占军．基于HTML5的物品360度展示特效研究
［J ］．软件导刊，2015，14（9）：169-171．［5］冯科融，王和兴．HTML5网页游戏分析［J ］．网络通信，2012（24）：71-72．［6］卫少林，卫文学．基于JavaScript 的人机五子棋游戏的设计
与实现［J ］．现代计算机（专业版），2016（25）：58-62．［7］Huang Jianheng．HTML5代码实现双人对弈游戏的四种方式［
EB /OL ］．（2016-10-06）［2016-11-05］．http ：//blog．csdn．net /huangjianheng/article/details/52745476？locationNum =13．
（收稿日期：2017-01-13）
作者简介：
董春侠（1992－），通信作者，女，硕士在读，主要研究方向：
数字出版、网站前端开发。E-mail ：dcx_spring@126．com 。司占军（1971－），男，硕士，硕士生导师，主要研究方向：印
刷彩及图形图像处理、数字出版技术、虚拟现实。
（上接第11页）
［15］GAＲDNEＲ-STEPHEN P．The serval project ：practical wire-less ad-hoc mobile telecommunications ［EB /OL ］．（2011-7-22）
［2016-11-03］．http ：//developer．servalproject．org /files /CWN_Chapter_Serval．pdf．
［16］SALMON J L ，YANG Ｒ．A proximity-based framework for
mobile services ［C ］．2014IEEE International Conference on Mobile Services．IEEE ，2014：124-131．
（收稿日期：2017-01-11）
作者简介：
卫力（1992－），男，硕士研究生，主要研究方向：邻近区域服务、
D2D 通信。王玉峰（1974－），通信作者，男，工学博士，主要研究方向：多学科启发的网络和系统
的研究与应用，包括宽带信息网络、无线P2P 、
移动社交网络等。E-mail ：wfwang@njupt．edu．cn 。4
1