基于HTML5技术的五子棋游戏的设计与开发
2017-06-19董春侠司占军
董春侠，司占军
(天津科技大学 包装与印刷工程学院，天津 300222)
基于HTML5技术的五子棋游戏的设计与开发
董春侠，司占军
(天津科技大学 包装与印刷工程学院，天津 300222)
HTML5标准的制定与发布带动了HTML5游戏的发展。基于HTML5的五子棋游戏是一款休闲益智的网页游戏，主要利用了HTML5新增的Canvas标签实现游戏的开发。首先在PhotoShop中进行素材编辑和UI设计，然后利用HTML5和CSS3实现游戏页面的布局及样式，利用Canvas及其自带的API进行棋盘和棋子的绘制，并通过JavaScript脚本实现游戏的主要逻辑，最后利用XAMMP在本地服务器上发布。HTML5独特的跨平台能力，使得该游戏能够在多种平台设备上运行，达到完美的兼容效果。
游戏；五子棋；HTML5；Canvas
0 引言
随着信息时代的不断发展，带动了游戏产业的飞速提升，游戏成为了生活中必不可少的娱乐方式之一。游戏的种类逐渐从单一化向多元化发展，其中休闲类游戏占据着游戏市场的重要位置。无论是棋牌类游戏还是益智类游戏都备受大众喜爱，例如“斗地主”、“像素小鸟”等；此外，游戏的开发模式也多种多样，各具特色。其中，基于HTML5开发的游戏以其独特的跨平台性和轻量性，且无需进行客户端下载与安装，即可进行游戏，实现“即点即玩”，获得了很好的用户体验，并且具有很强的社交传播性[1-2]。
1 HTML5介绍
HTML5是HTML的最新标准，它提供了许多用以加强交互和多媒体支持的新元素，如Canvas、audio、video等,这些新元素使得浏览器不依赖Flash等第三方插件即可开发高质量的原生程序[3]。HTML5提供的Canvas是HTML5网页游戏开发中最重要的元素，它提供了新的网页编程接口，开发者可以通过JavaScript处理画布内的图像，可以在画布中绘制直线、圆、矩形等基本形状，实现游戏画面或其他虚拟图像的实时渲染[4]，完成游戏画面的搭建，使游戏的开发变得更加便捷。目前各大浏览器逐渐完善对GPU加速的2D Canvas渲染功能的支持，因此，使用Canvas绘制出的游戏动画运行速度明显加快。
与其他技术开发的游戏相比，基于HTML5开发的游戏有两点主要优势：一是其相关技术免费开放、规范并且易于推广；二是无需安装插件，减少了用户的麻烦，提高了安全性，是众多游戏开发者的优先选择[5]。本设计基于HTML5进行五子棋游戏的开发，使用户在与计算机对战时充分开动大脑，体验简单的人工智能算法的下棋逻辑，给用户体验带来一定的乐趣。
2 思路框架
基于HTML5技术的五子棋游戏结合HTML5、CSS3和JavaScript进行开发，利用JavaScript调用Canvas自带的API对棋盘和棋子的绘制和游戏主要逻辑的编写。每个界面放置不同的按钮，玩家通过点击按钮实现游戏的操作以及页面的跳转。除此之外游戏还能实现皮肤的切换。游戏的开发流程图如图1所示。
图1 思路流程图
3 游戏设计与实现
3.1 界面设计和素材处理
(1)棋盘设计：棋盘大小为450×450像素的正方形，横竖各15条线，构成255个交叉点，并设计多种风格的棋盘供用户选择。
(2)风格设计：由于五子棋起源于中国，本次五子棋游戏主要以“中国风”为基调进行设计。选用灰色作为游戏界面的主色调，搭配卷轴和画框构成游戏背景。其中卷轴的动画是在PhotoShop的动画面板中制作，通过设置每一帧的显示样式和每一帧动画的延迟时间以及循环播放次数，完成卷轴由内向外逐渐打开的动画效果。制作图和动画面板设置如图2如示。
图2 卷轴动画的制作
3.2 页面布局
游戏界面通过HTML进行布局，通过CSS进行样式调整，Canvas作为承载棋盘和棋子的画布。
3.2.1 棋盘的绘制[6]
在html文件中创建
由于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.createRadialGradient(200,200,50,200,200,20);
gradient.addColorStop(0,“#0A0A0A”);
gradient.addColorStop(1,“#6363766”);
context.fillStyle=gradient;
context.fill();
3.2.3 棋盘背景切换
更换棋盘背景风格是通过更改图片的路径来实现的。通过标签提供多组棋盘背景图片，并绑定onclick事件，当点击标签时调用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是相对于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技术开发的游戏能以最简单和最便捷的方式在移动设备上运行，并且其具有的跨平台能力，能良好地解决目前市场上各种不同操作系统和屏幕尺寸设备所带来的问题，使游戏的测试变得简单可行。其开放性的特点使HTML5不为单个公司所有或控制，使得HTML5拥有比其他类似平台更持久的生命力，在未来将会占据重要的地位。
图3 游戏主要界面图
[1] 黎志雄，黄彦湘，陈学中.基于HTML5游戏开发的研究与研究[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.
Design and development of gobang game based on HTML5
Dong Chunxia, Si Zhanjun
(College of Packaging & Printing Engineering, Tianjin University of Science & Technology, Tianjin 300222, China)
With the standard formulation and release of HTML5, it has led the development of HTML5 games. The gobang game based on HTML5 is a casual puzzle game which is released on web. It mainly used the new tag that is Canvas of HTML5 to 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.
game; gobang; HTML5; Canvas
TP399
A
10.19358/j.issn.1674- 7720.2017.11.004
董春侠，司占军.基于HTML5技术的五子棋游戏的设计与开发[J].微型机与应用，2017,36(11)：12-14.
2017-01-13)
董春侠(1992-)，通信作者，女，硕士在读，主要研究方向：数字出版、网站前端开发。E-mail：dcx_spring@126.com。
司占军(1971-)，男，硕士，硕士生导师，主要研究方向：印刷色彩及图形图像处理、数字出版技术、虚拟现实。
