基于HTML5技术的五子棋游戏的设计与开发

admin管理员组

文章数量:1531303

2024年6月29日发(作者：)

软件与算法

SoftwareandAlgorithms

基于

HTML5

技术的五子棋游戏的设计与开发

董春侠

，

司占军

（

天津科技大学包装与印刷工程学院

，

天津

300222）

摘要

：HTML5

标准的制定与发布带动了

HTML5

游戏的发展

。

基于

HTML5

的五子棋游戏是一款休闲益智的网页游戏

，

主要

然后利用

HTML5

和

CSS3

实利用了

HTML5

新增的

Canvas

标签实现游戏的开发

。

首先在

PhotoShop

中进行素材编辑和

UI

设计

，

现游戏页面的布局及样式

，

利用

Canvas

及其自带的

API

进行棋盘和棋子的绘制

，

并通过

JavaScript

脚本实现游戏的主要逻辑

，

最

使得该游戏能够在多种平台设备上运行

，

达到完美的兼容后利用

XAMMP

在本地服务器上发布

。HTML5

独特的跨平台能力

，

效果

。

关键词

：

游戏

；

五子棋

；HTML5；Canvas

中图分类号

：TP399

文献标识码

：ADOI：10．19358/j．issn．1674-7720．2017．11．004

J］．

微型机与应用

，2017，36（11）：12-14．

引用格式

：

董春侠

，

司占军

．

基于

HTML5

技术的五子棋游戏的设计与开发

［

DesignanddevelopmentofgobanggamebasedonHTML5

DongChunxia，SiZhanjun

（CollegeofPackaging＆PrintingEngineering，TianjinUniversityofScience＆Technology，Tianjin300222，China）

Abstract：WiththestandardformulationandreleaseofHTML5，ithasledthedevelopmentofHTML5games．ThegobanggamebasedonHT-

ML5isacasualpuzzlegamewhichisreleasedonweb．ItmainlyusedthenewtagthatisCanvasofHTML5torealizethedevelopmentofthe

game．Firstly，thematerialwaseditedandtheweb-pagewasdesignedwiththesoftPhotoShop．Then，thelayoutandstylewasrealizedwith

themainlogicofthegameHTML5andCSS3．TheboardandthepawnwerepaintedusingCanvasanditsownAPI．AndthroughtheJavaScript，

wasachieved．Finally，thegamewasreleasedonthelocalserver．Becauseoftheuniquecapabilitiesofcrossingplatform，thatmakesthegame

canberunonavarietyofplatforms，andachievetheperfectcompatibility．

Keywords：game；gobang；HTML5；Canvas

0

引言

随着信息时代的不断发展

，

带动了游戏产业的飞速提

面或其他虚拟图像的实时渲染

［4］

，

完成游戏画面的搭建

，

使游戏的开发变得更加便捷

。

目前各大浏览器逐渐完善

对

GPU

加速的

2DCanvas

渲染功能的支持

，

因此

，

使用

Canvas

绘制出的游戏动画运行速度明显加快

。

与其他技术开发的游戏相比

，

基于

HTML5

开发的游

戏有两点主要优势

：

一是其相关技术免费开放

、

规范并且

易于推广

；

二是无需安装插件

，

减少了用户的麻烦

，

提高了

安全性

，

是众多游戏开发者的优先选择

［5］

升

，

游戏成为了生活中必不可少的娱乐方式之一

。

游戏的

其中休闲类游戏占据着种类逐渐从单一化向多元化发展

，

游戏市场的重要位置

。

无论是棋牌类游戏还是益智类游

“

斗地主

”、“

像素小鸟

”

例如等

；

此外

，

戏都备受大众喜爱

，

游戏的开发模式也多种多样

，

各具特色

。

其中

，

基于

HTML5

开发的游戏以其独特的跨平台性和轻量性

，

且无需进行客

“

即点即玩

”，

户端下载与安装

，

即可进行游戏

，

实现获得了

［1-2］

很好的用户体验

，

并且具有很强的社交传播性

。

。

本设计基于

HTML5

进行五子棋游戏的开发

，

使用户在与计算机对战

体验简单的人工智能算法的下棋逻辑

，

时充分开动大脑

，

给用户体验带来一定的乐趣

。

1HTML5

介绍

HTML5

是

HTML

的最新标准

，

它提供了许多用以加

2

思路框架

CSS3

和基于

HTML5

技术的五子棋游戏结合

HTML5、

audio、video

等

，

强交互和多媒体支持的新元素

，

如

Canvas、

这些新元素使得浏览器不依赖

Flash

等第三方插件即可

开发高质量的原生程序

［3］

JavaScript

进行开发

，

利用

JavaScript

调用

Canvas

自带的

API

对棋盘和棋子的绘制和游戏主要逻辑的编写

。

每个

界面放置不同的按钮

，

玩家通过点击按钮实现游戏的操作

以及页面的跳转

。

除此之外游戏还能实现皮肤的切换

。

游戏的开发流程图如图

1

所示

。

。HTML5

提供的

Canvas

是

HT-

ML5

网页游戏开发中最重要的元素

，

它提供了新的网页

编程接口

，

开发者可以通过

JavaScript

处理画布内的图像

，

可以在画布中绘制直线

、

圆

、

矩形等基本形状

，

实现游戏画

12

《

微型机与应用

》2017

年第

36

卷第

11

期

软件与算法

SoftwareandAlgorithms

图

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

《

微型机与应用

》2017

年第

36

卷第

11

期

（

线条数

）

等于

0

时

，

从

（15，15）

起点到

（15，435）

点开始绘

制第一条纵线

，

当

i

等于

1

时

，

纵坐标保持不变

，

起点和终

点的横坐标各增加

30

个像素

，

第二条纵线绘制完成

。

以

此类推

，

绘制其余的

13

条纵线

。

当

i=15

时

，

不满足

i＜15

的条件

，

退出

for

循环

，

从而完成五子棋盘的

15

条纵线的

绘制

，

同理绘制出

15

条横线

。

实现代码如下

：

functiondrawChessBoard（）｛

for（vari=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（）；

vargradient=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）｛

varx=e．offsetX；

vary=e．offsetY；

vari=Math．floor（x/30）；

varj=Math．floor（y/30）；

oneStep（i，j，true）；｝

以上代码中

，offset

代表了

HTML

元素相对于自己的

offsetParent

元素的位置

，

由于落子的实现是在棋盘中完成

的

，

所以这里的父级为

Canvas

元素

。e．offsetX

是相对于

欢迎网上投稿

www．pcachina．com

13

软件与算法

SoftwareandAlgorithms

Canvas

坐标系的左上角开始的坐标

。

由于棋盘在

Canvas

中绘制左右各留白

15

个像素

，

且黑白棋子和棋盘的每个

［7］

格子各为

30×30

个像素

。

棋盘的坐标系相对于

Canvas

向右下方移动了

15

个像素

，

所以棋子横纵坐标各整除

30，

刚好每隔

30

个像素落到横纵线的交叉点上

，

从而完成

落子的实现

。

3．3．2

赢法数组的计算

首先用一个三维数组记录五子棋所有的赢法

，

数组的

第三个数据表示赢前面两位数据代表五子棋的棋盘坐标

，

法的种类

。

每种赢法在棋盘上只显示

5

个棋子

，

并且这些

棋子相互连接成一条线

，

可以为横线

、

竖线或是斜线

，

用

true

代表交叉点存在棋子

，

棋盘上的其余位置都为

false，

表示没有棋子存在

。

赢法数组的计算的部分代码如下

：

varcount=0；

for（vari=0，i＜15，i++）｛

for（varj=0；j＜11；j++）｛

for（vark=0；k＜5；k++）｛

wins［i］［j+k］［count］=true；｝

count++；｝｝

图

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］

冯科融

，J］．

网络通信

，2012

王和兴

．HTML5

网页游戏分析

［

（24）：71-72．

［6］

卫少林

，

卫文学

．

基于

JavaScript

的人机五子棋游戏的设计

J］．

现代计算机

（

专业版

），2016（25）：58-62．

与实现

［

［7］HuangJianheng．HTML5

代码实现双人对弈游戏的四种方

EB/OL］．（2016-10-06）［2016-11-05］．http：//blog．csdn．

式

［

net/huangjianheng/article/details/52745476？locationNum=13．

（

收稿日期

：2017-01-13）

作者简介

：

董春侠

（1992－），

通信作者

，

女

，

硕士在读

，

主要研究方向

：

mail：dcx_spring@126．com。

数字出版

、

网站前端开发

。E-

司占军

（1971－），

男

，

硕士

，

硕士生导师

，

主要研究方向

：

印

刷色彩及图形图像处理

、

数字出版技术

、

虚拟现实

。

3．3．3

人机对战五子棋

AI

的实现

五子棋游戏的玩法少不了人机对战的模式

，

玩家和计

算机各执黑棋和白棋

，

双方依次交替落子

，

任何一方首先

实现

5

个棋子的连接则为胜利方

。

其中

，

计算机的落子是

通过算法计算实现的

。AI

方首先需要遍历整个棋盘上还

没有落子的交叉点

，

通过算法给这些交叉点分别计算得

分

，

得分最高的交叉点则是

AI

方需要落子的地方

。

依靠

AI

方不仅需要连接

5

个棋子

，

这种算法

，

还需要阻止玩家

从而实现玩家与计算机的对战模式

。

首先取得胜利

，

3．4

游戏发布

通过修改测试后将游戏开发包放入建站集成软件包

Xammp

的

htdocs

内进行本地服务器的发布

。

游戏开始画

主画面和说明画面最终效果如图

3

所示

。

面

、

4

结束语

基于

HTML5

技术开发的游戏能以最简单和最便捷的

方式在移动设备上运行

，

并且其具有的跨平台能力

，

能良

好地解决目前市场上各种不同操作系统和屏幕尺寸设备

所带来的问题

，

使游戏的测试变得简单可行

。

其开放性的

（

上接第

11

页

）

［15］GAＲDNEＲ-STEPHENP．Theservalproject：practicalwire-

lessad-hocmobiletelecommunications［EB/OL］．（2011-7-

22）［2016-11-03］．http：//developer．servalproject．org/

files/CWN_Chapter_Serval．pdf．

［16］SALMONJL，YANGＲ．Aproximity-basedframeworkfor

mobileservices［C］．2014IEEEInternationalConferenceon

MobileServices．IEEE，2014：124-131．

（

收稿日期

：2017-01-11）

作者简介

：

卫力

（1992－），

男

，

硕士研究生

，

主要研究方向

：

邻近区域服

D2D

通信

。

务

、

王玉峰

（1974－），

通信作者

，

男

，

工学博士

，

主要研究方向

：

多学科启发的网络和系统的研究与应用

，

包括宽带信息网络

、

无

mail：wfwang@njupt．edu．cn。

移动社交网络等

。E-

线

P2P、

14

《

微型机与应用

》2017

年第

36

卷第

11

期

本文标签： 游戏实现棋盘