2024年4月29日发(作者：晁逸春)
基于Cocos2d-JS的手机网页游戏的设计与实现
张玉泉;赵甜
【摘 要】基于跨全平台的游戏引擎Cocos2d-JS,设计并实现了一款以大富翁为蓝
本的寓教于乐的手机网页游戏.首先研究了Cocos2d-JS游戏引擎的关键技术,然后
分析了游戏的整体框架和核心功能模块的实现.最后根据设计方案,使用Cocos2d-
JS开发出一款运行流畅的手机网页游戏.%Based on Cocos2d-JS, a full cross-
platform game engine,designed and implemented a entertaining mobile
web game based on researched the key technologies of
Cocos2d-JS game analyzed the whole framework of game
and implementation of core function modules. Finally,according to the
design proposal,developed a mobile web game that runs smoothly based
on Cocos2d-JS.
【期刊名称】《电子设计工程》
【年(卷),期】2017(025)016
【总页数】4页(P121-124)
【关键词】Cocos2d-JS;手机网页游戏;HTML5;多分辨率适配
【作 者】张玉泉;赵甜
【作者单位】武汉烽火技术服务有限公司 湖北 武汉 430070;武汉邮电科学研究院
湖北 武汉 430070
【正文语种】中 文
【中图分类】TN99
随着通信技术的发展和手机制造水平的提升，手机的功能越发强大，与人们的生活
密不可分。据报告显示，截止到2015年12月，中国网民有6.88亿，其中手机
网民达到6.20亿，通过手机上网的网民高达90.1%。智能手机市场份额不断上升，
进而带动了各种移动应用的井喷[1]。较为突出的是手机游戏，其中HTML5游戏
正在逐渐变得流行，吸引了越来越多的游戏玩家，同时也吸引了大量的开发者。游
戏引擎是游戏的核心，选择一款兼容性好、高效、容易使用的游戏引擎，能大大降
低游戏开发的成本[2]。为了实现不需要下载安装包，直接在手机微信端进行游戏
以及放大游戏对学习的正面促进作用[3]的目的，本文将介绍使用Cocos2d-JS引
擎开发一款基于大富翁的融合了答题环节的休闲益智类手机网页游戏。
2014年3月，Cocos2d-x团队将Cocos2d-html5和 Cocox2d-x JSB
（JavaScript Bindings）模块整合升级，Cocox2d-x JSB模块是从Cocos2d-x
中抽离出来的，发布了Cocos2d-JS引擎。2014年9月12日，Cocos2d-x团队
发布了 Cocos2d-JS v3.0，这是Cocos2d-JS的首个稳定版本。Cocos2d-JS与
Cocos2d-x相比更先进，不仅可以在本地运行，还可以在Web浏览器上运行[4]，
它可以用来开发跨平台浏览器的游戏和本地应用程序[5]。
Cocos2d-JS是跨全平台的游戏引擎，基于MIT开源协议，采用原生JavaScript
语言。Cocos2d-JS架构图如图1所示，由Cocos2D Graphic（图像引擎）、
Menu、CocosDenshion Audio（声音引擎）、Box2d Physics（物理引擎）、
Chipmunk Physics（物理引擎）组成。
Cocos2d-JS引擎的核心模块可分为Director（导演）、Scene（场景）、Layer
（层）、Node（节点）、Sprite（精灵）、Action（动作）等。Director是整个
Cocos2d-JS 引擎的核心，在游戏中起到组织者和领导者的作用[6]，由Director
来控制游戏里的一些常用操作，例如：场景的转换、游戏的继续与暂停、数据的保
存调用以及屏幕尺寸的获取等。Scene是Layer的容器，是游戏运行时显示的画
面，游戏中的画面切换其实就是场景在切换。每个场景都包含一个或多个层，彼此
叠加[7]。Layer通常包含的是直接在屏幕上呈现的内容，并且可以接受用户的输
入事件，包括触摸，加速度计和键盘输入等[8]。大部分类都继承Node，是引擎
中最重要的模块。Sprite是界面上显示的最小单元，每个精灵都是一个2D的并且
能够移动、旋转、缩放等动画的图片元素[8]。有一系列的动作，如平移、缩放、
旋转等，由Action控制。
游戏的整体流程图如图2所示，进入大厅选择地图及对手后开始游戏，通过骰子
的点数来控制每个玩家的移动，在移动过程中，除了触发购买土地建造建筑事件，
最终通过对手的金币数量是否为零来判断是否获胜，这是主要的获胜条件。还会触
发答题，答对题目数量累计到规定数量，便可获胜，即特殊胜利条件。在游戏过程
中，会触发NPC（Non-Player Character，非玩家控制角色），帮助或妨碍玩家，
提高游戏趣味性。
目前市面上智能手机种类很多，手机的分辨率各异，为了能适应不同的手机分辨率，
带来更好的游戏效果和用户体验，需选用合理的分辨率适配策略。本系统选用
568*320的资源分辨率和设计分辨率，Cocos2d-JS中预设了5种适配模式，本
系统中采用FIXED_HEIGHT（固定高）的模式，即保持传入的设计分辨率高度不
变，根据屏幕分辨率修正设计分辨率的宽度。
Cocos2d-JS图片显示有两个逻辑过程，从资源分辨率到设计分辨率，从设计分辨
率到屏幕分辨率，如图3所示。
本系统中，setContentScaleFactor（）为1，setDesignResolutionSize（）有
3个参数：DW，DH，resolutionPolicy。其中 scaleX=scaleY=SH/DH，
DW=ceif（SW/scaleX），resolutionPolicy为FIXED_HEIGHT。
游戏中需要用到很多图像和动画资源，PNG是首选图像格式[10]，资源包过大时，
会影响开始游戏的加载速度，需对资源进行合理的打包管理来减少内存空间的占用。
本系统采用TexturePacker来打包图片，这是一款实用的图片打包工具，能有效
减少内存损耗。TexturePacker将许多小图片合成一张大的图片，打包完成后生成
一个png文件和一个plist文件，如图4所示。在游戏中使用某张小图片资源时相
当于读取了大图片的某一部分。plist配置文件记录了各个子图片在大图片中的位
置和大小[11]，在Cocos2d-JS中解析plist文件，实现图片资源的载入。
在游戏中使用的图片资源，还可以根据其使用频率进行管理，能提升游戏的流畅性。
对使用频率较高的图片资源，可以在游戏开始时一次性全部加载；而对使用频率较
低的图片资源，在使用图片的界面载入的时候将图片读入[12]。
为了让画面看起来比较逼真，系统中的地图是分层设计的。从下至上分别是背景层、
动画层、状态层和菜单层。在游戏运行过程中，还会添加弹窗，显示公告信息或用
户资料信息，位于地图的最上层。
为了让地图上的各种控件呈现得较为清晰，地图的尺寸较大，在游戏运行中看到的
只是地图的一部分，玩家可以用手触摸来移动地图去看自己想关注的部分，例如已
经购买的土地、建造的建筑等等。此游戏是对战游戏，如果游戏过程中地图是静止
不动的，可能玩家移动后，在屏幕里会出现看不到自己的情况，因此本系统采用在
每次当前玩家移动并操作完成后，获取下一玩家的当前位置，通过合理的判断来移
动地图的方法，使得每次玩家在进行游戏时，基本位于地图的中央，能够清晰的看
到游戏里触发的各种状况，提高用户体验。
游戏中一个很重要的功能就是交互，使用事件监听器来处理用户交互，手机游戏中
主要涉及到的就是触摸事件，如点击骰子、点击选项回答问题等。首先创建一个事
件监听器，引擎提供了来统一创建各种类型的事件监听
器。然后将监听器加入到事件管理器，通过tener来实
现。当事件触发时，根据事件分发类型，事件管理器发给相应的事件监听器。通过
调用clone（）函数可以实现不同的对象共用一份监听器代码，减少代码量。
在游戏中出现弹窗时，需要屏蔽下层触摸，即只能对弹出的窗口进行操作，无法操
作下面的层。通过设置触摸监听器吞噬触摸，将弹窗层的触摸优先级大于其它的层
的触摸优先级来，极大地降低了游戏中触碰出现穿透的现象的发生[13]。
系统中涉及到很多数据的存储与读取，以答题模块为例，当玩家触发了答题后，系
统会弹出题目及选项，在游戏结束后，玩家的答题率等数据会存储到数据库中。系
统采用MySql数据库来存储数据，在eclipse端使用MyBatis+Spring MVC来
进行数据操作。在Cocos Code IDE端通过Cocos2d-JS的网络请求来读取数据，
将数据显示在游戏的弹窗里，题目是选择题类型，用户通过点击选项回答问题。一
轮游戏结束后，会统计玩家的答题数量、答题率等，存入数据库，这些数据对下次
的游戏会产生影响。
Cocos2d-JS提供CocosDension库来使用声音引擎，使用audioEngine类，可
以播放、暂停、暂停和恢复背景音乐和音效。背景音乐通常播放的时间长，频率低。
而声音效果则是播放的时间短、频率高[14]。可以通过设置参数来循环播放，还也
可设置音量大小。加载音乐和音效较耗时，为了防止由即时加载产生的延时导致实
际播放与游戏不协调的现象发生[15]，在游戏开始前需预加载音乐资源。
项目完成后，将项目发布到手机微信端，选择好对手、地图后，图5是项目在联
想K860i手机的微信端运行的效果，左上角是对手头像，点击头像可查看对手信
息；左边中间是一个伸展菜单，菜单里可以开启、关闭音乐；左下角是玩家头像
[16]，点击头像可以查看自己的信息；右上角是玩家的金币等数量；右边中间是按
钮，点击后在屏幕中央会出现骰子滚动的画面；右下角是玩家拥有的卡片数量；屏
幕上显示的是地图的一部分，地图会随着玩家的移动而移动。
图6是游戏运行中的画面，在游戏运行过程中，以弹窗的形式来提示玩家是否购
买土地、建造建筑、回答问题等。
可以看出，利用Cocos2d-JS框架开发出了一款在手机微信端运行流畅的手机网
页游戏[17]。本游戏主要是面向中小学生，游戏中嵌入的答题模块中的题目类型繁
多，不仅有与课堂相关的知识，还有趣味题，旨在玩家在玩游戏娱乐的同时也能学
到知识。
【相关文献】
[1]张地长.基于Cocos2d-X的战棋手游研发[D].南昌：南昌大学，2015.
[2]张晓，张艳青，苏航.基于libGDX的Android赛车游戏的设计与实现[J].电子设计工程，2015，
23（1）:4-6.
[3]熊志勇，韩青，王雪晴，等.基于COCOS2D的手游促学软件的设计与实现[J].电脑知识与技术，
2015，11（8）:78-79.
[4]关东升.Cocos2d-x实战.JS卷:Cocos2d-JS开发[M].北京:清华大学出版社，2015.
[5]Emanuele ng Cocos2d-JS Game Development[M].Packet Publishing，
2015.
[6]彭守镇，詹发荣.基于Cocos2d-android的手机游戏开发[J].电脑知识与技术，2014，10
（20）:27-28.
[7]满硕泉.Cocos2D-x权威指南[M].北京:机械工业出版社，2013.
[8]马晨阳.基于Cocos2d-x引擎的ARPG类手机游戏的设计与实现[D].广州：华南理工大学，
2015.
[9]李文博.基于Cocos2d-x移动平台跑酷类游戏的设计与实现[D].北京：北京交通大学，2015.
[10]Rod Strougo，Ray ng Cocos2D:A Hands-On Guide to Building iOS
Games with Cocos2D，Box2D，and Chipmunk[M].北京:机械工业出版社，2013.
[11]钟迪龙.Cocos2d-x游戏开发之旅[M].北京:电子工业出版社，2013.
[12]夏志海.基于Cocos2d-x的手机游戏坦克大战的设计与实现[D].哈尔滨：哈尔滨工业大学，
2013.
[13]禹煜.基于Cocos2d-x引擎的移动平台捕鱼类游戏的设计与实现[D].北京：北京交通大学，
2014.
[14]刘剑卓.Cocos2D-X游戏开发技术精解[M].北京:人民邮电出版社，2013.
[15]火烈鸟网络科技.Cocos2d-x高级开发教程:制作自己的《捕鱼达人》[M].北京:人民邮电出版社，
2013.
[16]李丹，王旭红，李向前，等.基于控制参数调整的容性逆变器容性深度研究[J].供用电，2015
（9）：63-68.
[17]肖笑.基于BCC算法的多机系统PSS参数优化设计[J].陕西电力，2012（12）：51-54.
2024年4月29日发(作者：晁逸春)
基于Cocos2d-JS的手机网页游戏的设计与实现
张玉泉;赵甜
【摘 要】基于跨全平台的游戏引擎Cocos2d-JS,设计并实现了一款以大富翁为蓝
本的寓教于乐的手机网页游戏.首先研究了Cocos2d-JS游戏引擎的关键技术,然后
分析了游戏的整体框架和核心功能模块的实现.最后根据设计方案,使用Cocos2d-
JS开发出一款运行流畅的手机网页游戏.%Based on Cocos2d-JS, a full cross-
platform game engine,designed and implemented a entertaining mobile
web game based on researched the key technologies of
Cocos2d-JS game analyzed the whole framework of game
and implementation of core function modules. Finally,according to the
design proposal,developed a mobile web game that runs smoothly based
on Cocos2d-JS.
【期刊名称】《电子设计工程》
【年(卷),期】2017(025)016
【总页数】4页(P121-124)
【关键词】Cocos2d-JS;手机网页游戏;HTML5;多分辨率适配
【作 者】张玉泉;赵甜
【作者单位】武汉烽火技术服务有限公司 湖北 武汉 430070;武汉邮电科学研究院
湖北 武汉 430070
【正文语种】中 文
【中图分类】TN99
随着通信技术的发展和手机制造水平的提升，手机的功能越发强大，与人们的生活
密不可分。据报告显示，截止到2015年12月，中国网民有6.88亿，其中手机
网民达到6.20亿，通过手机上网的网民高达90.1%。智能手机市场份额不断上升，
进而带动了各种移动应用的井喷[1]。较为突出的是手机游戏，其中HTML5游戏
正在逐渐变得流行，吸引了越来越多的游戏玩家，同时也吸引了大量的开发者。游
戏引擎是游戏的核心，选择一款兼容性好、高效、容易使用的游戏引擎，能大大降
低游戏开发的成本[2]。为了实现不需要下载安装包，直接在手机微信端进行游戏
以及放大游戏对学习的正面促进作用[3]的目的，本文将介绍使用Cocos2d-JS引
擎开发一款基于大富翁的融合了答题环节的休闲益智类手机网页游戏。
2014年3月，Cocos2d-x团队将Cocos2d-html5和 Cocox2d-x JSB
（JavaScript Bindings）模块整合升级，Cocox2d-x JSB模块是从Cocos2d-x
中抽离出来的，发布了Cocos2d-JS引擎。2014年9月12日，Cocos2d-x团队
发布了 Cocos2d-JS v3.0，这是Cocos2d-JS的首个稳定版本。Cocos2d-JS与
Cocos2d-x相比更先进，不仅可以在本地运行，还可以在Web浏览器上运行[4]，
它可以用来开发跨平台浏览器的游戏和本地应用程序[5]。
Cocos2d-JS是跨全平台的游戏引擎，基于MIT开源协议，采用原生JavaScript
语言。Cocos2d-JS架构图如图1所示，由Cocos2D Graphic（图像引擎）、
Menu、CocosDenshion Audio（声音引擎）、Box2d Physics（物理引擎）、
Chipmunk Physics（物理引擎）组成。
Cocos2d-JS引擎的核心模块可分为Director（导演）、Scene（场景）、Layer
（层）、Node（节点）、Sprite（精灵）、Action（动作）等。Director是整个
Cocos2d-JS 引擎的核心，在游戏中起到组织者和领导者的作用[6]，由Director
来控制游戏里的一些常用操作，例如：场景的转换、游戏的继续与暂停、数据的保
存调用以及屏幕尺寸的获取等。Scene是Layer的容器，是游戏运行时显示的画
面，游戏中的画面切换其实就是场景在切换。每个场景都包含一个或多个层，彼此
叠加[7]。Layer通常包含的是直接在屏幕上呈现的内容，并且可以接受用户的输
入事件，包括触摸，加速度计和键盘输入等[8]。大部分类都继承Node，是引擎
中最重要的模块。Sprite是界面上显示的最小单元，每个精灵都是一个2D的并且
能够移动、旋转、缩放等动画的图片元素[8]。有一系列的动作，如平移、缩放、
旋转等，由Action控制。
游戏的整体流程图如图2所示，进入大厅选择地图及对手后开始游戏，通过骰子
的点数来控制每个玩家的移动，在移动过程中，除了触发购买土地建造建筑事件，
最终通过对手的金币数量是否为零来判断是否获胜，这是主要的获胜条件。还会触
发答题，答对题目数量累计到规定数量，便可获胜，即特殊胜利条件。在游戏过程
中，会触发NPC（Non-Player Character，非玩家控制角色），帮助或妨碍玩家，
提高游戏趣味性。
目前市面上智能手机种类很多，手机的分辨率各异，为了能适应不同的手机分辨率，
带来更好的游戏效果和用户体验，需选用合理的分辨率适配策略。本系统选用
568*320的资源分辨率和设计分辨率，Cocos2d-JS中预设了5种适配模式，本
系统中采用FIXED_HEIGHT（固定高）的模式，即保持传入的设计分辨率高度不
变，根据屏幕分辨率修正设计分辨率的宽度。
Cocos2d-JS图片显示有两个逻辑过程，从资源分辨率到设计分辨率，从设计分辨
率到屏幕分辨率，如图3所示。
本系统中，setContentScaleFactor（）为1，setDesignResolutionSize（）有
3个参数：DW，DH，resolutionPolicy。其中 scaleX=scaleY=SH/DH，
DW=ceif（SW/scaleX），resolutionPolicy为FIXED_HEIGHT。
游戏中需要用到很多图像和动画资源，PNG是首选图像格式[10]，资源包过大时，
会影响开始游戏的加载速度，需对资源进行合理的打包管理来减少内存空间的占用。
本系统采用TexturePacker来打包图片，这是一款实用的图片打包工具，能有效
减少内存损耗。TexturePacker将许多小图片合成一张大的图片，打包完成后生成
一个png文件和一个plist文件，如图4所示。在游戏中使用某张小图片资源时相
当于读取了大图片的某一部分。plist配置文件记录了各个子图片在大图片中的位
置和大小[11]，在Cocos2d-JS中解析plist文件，实现图片资源的载入。
在游戏中使用的图片资源，还可以根据其使用频率进行管理，能提升游戏的流畅性。
对使用频率较高的图片资源，可以在游戏开始时一次性全部加载；而对使用频率较
低的图片资源，在使用图片的界面载入的时候将图片读入[12]。
为了让画面看起来比较逼真，系统中的地图是分层设计的。从下至上分别是背景层、
动画层、状态层和菜单层。在游戏运行过程中，还会添加弹窗，显示公告信息或用
户资料信息，位于地图的最上层。
为了让地图上的各种控件呈现得较为清晰，地图的尺寸较大，在游戏运行中看到的
只是地图的一部分，玩家可以用手触摸来移动地图去看自己想关注的部分，例如已
经购买的土地、建造的建筑等等。此游戏是对战游戏，如果游戏过程中地图是静止
不动的，可能玩家移动后，在屏幕里会出现看不到自己的情况，因此本系统采用在
每次当前玩家移动并操作完成后，获取下一玩家的当前位置，通过合理的判断来移
动地图的方法，使得每次玩家在进行游戏时，基本位于地图的中央，能够清晰的看
到游戏里触发的各种状况，提高用户体验。
游戏中一个很重要的功能就是交互，使用事件监听器来处理用户交互，手机游戏中
主要涉及到的就是触摸事件，如点击骰子、点击选项回答问题等。首先创建一个事
件监听器，引擎提供了来统一创建各种类型的事件监听
器。然后将监听器加入到事件管理器，通过tener来实
现。当事件触发时，根据事件分发类型，事件管理器发给相应的事件监听器。通过
调用clone（）函数可以实现不同的对象共用一份监听器代码，减少代码量。
在游戏中出现弹窗时，需要屏蔽下层触摸，即只能对弹出的窗口进行操作，无法操
作下面的层。通过设置触摸监听器吞噬触摸，将弹窗层的触摸优先级大于其它的层
的触摸优先级来，极大地降低了游戏中触碰出现穿透的现象的发生[13]。
系统中涉及到很多数据的存储与读取，以答题模块为例，当玩家触发了答题后，系
统会弹出题目及选项，在游戏结束后，玩家的答题率等数据会存储到数据库中。系
统采用MySql数据库来存储数据，在eclipse端使用MyBatis+Spring MVC来
进行数据操作。在Cocos Code IDE端通过Cocos2d-JS的网络请求来读取数据，
将数据显示在游戏的弹窗里，题目是选择题类型，用户通过点击选项回答问题。一
轮游戏结束后，会统计玩家的答题数量、答题率等，存入数据库，这些数据对下次
的游戏会产生影响。
Cocos2d-JS提供CocosDension库来使用声音引擎，使用audioEngine类，可
以播放、暂停、暂停和恢复背景音乐和音效。背景音乐通常播放的时间长，频率低。
而声音效果则是播放的时间短、频率高[14]。可以通过设置参数来循环播放，还也
可设置音量大小。加载音乐和音效较耗时，为了防止由即时加载产生的延时导致实
际播放与游戏不协调的现象发生[15]，在游戏开始前需预加载音乐资源。
项目完成后，将项目发布到手机微信端，选择好对手、地图后，图5是项目在联
想K860i手机的微信端运行的效果，左上角是对手头像，点击头像可查看对手信
息；左边中间是一个伸展菜单，菜单里可以开启、关闭音乐；左下角是玩家头像
[16]，点击头像可以查看自己的信息；右上角是玩家的金币等数量；右边中间是按
钮，点击后在屏幕中央会出现骰子滚动的画面；右下角是玩家拥有的卡片数量；屏
幕上显示的是地图的一部分，地图会随着玩家的移动而移动。
图6是游戏运行中的画面，在游戏运行过程中，以弹窗的形式来提示玩家是否购
买土地、建造建筑、回答问题等。
可以看出，利用Cocos2d-JS框架开发出了一款在手机微信端运行流畅的手机网
页游戏[17]。本游戏主要是面向中小学生，游戏中嵌入的答题模块中的题目类型繁
多，不仅有与课堂相关的知识，还有趣味题，旨在玩家在玩游戏娱乐的同时也能学
到知识。
【相关文献】
[1]张地长.基于Cocos2d-X的战棋手游研发[D].南昌：南昌大学，2015.
[2]张晓，张艳青，苏航.基于libGDX的Android赛车游戏的设计与实现[J].电子设计工程，2015，
23（1）:4-6.
[3]熊志勇，韩青，王雪晴，等.基于COCOS2D的手游促学软件的设计与实现[J].电脑知识与技术，
2015，11（8）:78-79.
[4]关东升.Cocos2d-x实战.JS卷:Cocos2d-JS开发[M].北京:清华大学出版社，2015.
[5]Emanuele ng Cocos2d-JS Game Development[M].Packet Publishing，
2015.
[6]彭守镇，詹发荣.基于Cocos2d-android的手机游戏开发[J].电脑知识与技术，2014，10
（20）:27-28.
[7]满硕泉.Cocos2D-x权威指南[M].北京:机械工业出版社，2013.
[8]马晨阳.基于Cocos2d-x引擎的ARPG类手机游戏的设计与实现[D].广州：华南理工大学，
2015.
[9]李文博.基于Cocos2d-x移动平台跑酷类游戏的设计与实现[D].北京：北京交通大学，2015.
[10]Rod Strougo，Ray ng Cocos2D:A Hands-On Guide to Building iOS
Games with Cocos2D，Box2D，and Chipmunk[M].北京:机械工业出版社，2013.
[11]钟迪龙.Cocos2d-x游戏开发之旅[M].北京:电子工业出版社，2013.
[12]夏志海.基于Cocos2d-x的手机游戏坦克大战的设计与实现[D].哈尔滨：哈尔滨工业大学，
2013.
[13]禹煜.基于Cocos2d-x引擎的移动平台捕鱼类游戏的设计与实现[D].北京：北京交通大学，
2014.
[14]刘剑卓.Cocos2D-X游戏开发技术精解[M].北京:人民邮电出版社，2013.
[15]火烈鸟网络科技.Cocos2d-x高级开发教程:制作自己的《捕鱼达人》[M].北京:人民邮电出版社，
2013.
[16]李丹，王旭红，李向前，等.基于控制参数调整的容性逆变器容性深度研究[J].供用电，2015
（9）：63-68.
[17]肖笑.基于BCC算法的多机系统PSS参数优化设计[J].陕西电力，2012（12）：51-54.