之一，受众体覆盖了以中国为主的世界各地近 9 亿活跃用户。现在的，已经构建出了社交、资讯、支付、工具这四大体系，恰巧缺少了娱乐。而小游戏的出现，正好满足了这个需求。虽然内部有游戏中心，但这是一个出口，游戏并不在之内，所以借助小程序而诞生的小游戏正好补足了娱乐这一空缺。
本文将从这个角度出发，从官方的“跳一跳”小游戏中学习和模仿，制作出自己可以定制的小游戏。小
游戏的生存紧紧依托于用户，没有真实的用户需求和体验就成为了无根之木，因此本文首先从游戏的设计角度出发，到小游戏的真实体验和特长，将其发扬光大，接着根据游戏的设计使用开发工具将游戏制作完成，实现了完整的项目流程。
1 游戏设计
■1.1 游戏需求
本文要做的是仿照“跳一跳”小游戏做出一款自己的小游戏，游戏宗旨是让游戏尽在掌握之中。为了保证游戏趣味性，在进行设计和开发工作之前，我们首先需要进行需求的调研，经过需求确认之后再进行研发工作。
游戏作为目前的主流娱乐方式之一，一直伴随着计算机技术和互联网发展，甚至在某种程度上促进了某些产业领域的发展。从半个世纪以前在大型机上的游戏，到现在各个平台上丰富缤繁的游戏种类，游戏的发展可以反映出人与社会对于放松和娱乐的需求。小程序自推出以来，很好地解决了碎片化一次性需求的问题，接着推出的小游戏也完美地解决了碎片化娱乐的需求。
“跳一跳”小游戏作为小游戏开放以来的第一款官方游戏，在推广之初便收到了如潮般的好评，我们认为这个应用的根本闪光点在于即时反馈，能够将用户的每一步操作精准地通过游戏中小人的运动反馈出来，并且给出不同瞬间的放松会起到非常好的减压和休息的作用。
鉴于小程序“跳一跳”的各种优点，我们的游戏的核心需求也将向“跳一跳”小游戏看齐，给用户即时的反馈，并且控制难度变化，游戏开始时让用户投入，游戏结束时让用户放松，同时还可以加入排行榜等功能强化小游戏的社交属性，增加用户粘性。
■1.2 游戏流程
作为碎片化的娱乐方式，小游戏的流程一般都不会太复杂，在本文要关注的小游戏中，流程便更是简单，用户只有一个操作，即点按屏幕。用户通过点按屏幕来给游戏中的人物蓄力，一旦松开手人物就会跳出，蓄力时间越长，跳出的距离越远。游戏中的路线是由一个个方格组成的岛屿，岛屿之间的距离各不相同，玩家需要控制人物在一个个岛屿上移动，要通过自己的控制保证游戏中的人物每一步正常的运动都能到达下一个岛屿而不是失败。整个游戏流程非常简单，但是由于实时反馈性和代入感十足，会给玩家带来非常舒畅的游戏体验。
■1.3 系统功能
作为一个软件系统，本文介绍的小游戏也包含了若干不同的模块，比如用户管理模块、素材管理模块、游戏核心模块、排行榜模块等，下边将分别从这几个方面来描述一下系统功能。
（1）用户管理模块，主要负责用户的管理，包括登录、注册等；
（2）素材管理模块，主要负责游戏素材的管理，包括可视化素材和关卡设计等；
（3）游戏核心模块，主要负责游戏进行流程；（4）排行榜模块，主要负责排行榜部分，包括触发器机制、离线计算、数据缓存等；
（5）根据以上描述，可以得到以下的系统功能图。
42  |  电子制作    2019年09月
www�ele169�com  |  43
软件开发
2 游戏实现
■2.1 实现过程
在游戏的开发过程中，首先需要在公众平台上进行
注册，然后通过维系开发者工具来进行游戏的开发。以下是程序代码的部分展示。
（1）运动部分核心函数//运动
var step=function step(){var w();var interval=currentTime-lastTime;var il(1000/interval);lastTime=currentTime;if(interval>100){requestAnimationFrame(step);return;}
免费小程序制作
if(fps>=30){start++;}else{var_start=Math.floor((currentTime-startTime)/17);start=_start>start?_start:start+1;}
//当前的运动位置
var value=fnGetValue(start,from,to-from,during);//如果还没有运动到位，继续if(start<=during && selfAnimationId> illAnimationId) {
options.callback(value);
requestAnimationFrame(step);}e l s e  i f (sta r t >d u r i n g  && s e l f A n i m at i o n I d > killAnimationId){
//动画结束，这里可以插入回调...options.callback(to,true);
}else{}
};
（2）分享排行榜部分调用代码//ShareRankReport://分享排行榜//ts//uint32，秒级日志时间戳//type//uint32，填6
//is_group//uint32，是否分享到聊，单聊：0，聊：1
},{
key:‘shareGroupReport’,value:function shareGroupReport(isGroup){
var data={Time(),type:6,is_group:isGroup
};portList.push(data);}
（3）挑战部分代码//挑战btn var msg=‘挑战’;var that=this;if(anizerInfo.left_time>0 && anizerInfo.is_self==0){
//剩余时间>0并且不是擂主，就可以挑战idx>0){//有名次的一定是[1,~)msg=‘再次挑战’;
}
this._drawImageCenter(‘res/btn_bg_g.png’, this._cx(207),this._cy(368),this._cwh(130),this._cwh(63), ‘bg’,function(){
ctx.font=this._cf(12);;
ctx.fillText(‘有效时间至
’,this._cx(223), this._
图1 小游戏系统功能图
44  |  电子制作    2019年09
月
}else if(anizerInfo.left_time==0 && anizerInfo.is_self ==0){
//没有剩余时间并且不是擂主，显示失效var that=this;
this._drawImageCenter(‘res/btn_bg_h.png’, this._cx(207),this._cy(368),this._cwh(130),this._cwh(63),‘bg’,function(){
ctx.font=that._cf(14);
ctx.fillStyle=‘rgba(0,0,0,0.3)’;ctx.fillText(‘挑战结束’, that._cx(207), that._cy(368));
that._updatePlane(‘bg’);},this.imgid[‘bg’]);ctx.font=this._cf(14);Align=“center”;ctx.fillStyle=‘#888’;
ctx.fillText(‘已失效’,this._cx(207),this._cy(403.5));}else if(anizerInfo.left_time>0 && this.
//有剩余时间，是擂主，擂主看到失效时间
ctx.font=this._cf(14);Align=“right”;ctx.fillStyle=‘#888’;ctx.fillText(‘有效时间至’,this._cx(223),this._cy(369));Align=“left”;ctx.fillStyle=‘#2c9f67’;
var nt=+new Date();var lt=nt+anizerInfo.left_time*1000;nt=new Date(lt);var Hours();
cx(280), this._cy(688),this._cwh(6.5), this._cwh(12.5), ‘bg’,null,this.imgid[‘bg’]);
this._updatePlane(‘bg’);}}
■2.2 成果展示经历了一系列的调试和改动之后，本系统可以正常运
行，基本满足最初的设计需求，以下是本系统运行过程中的
一些截图。
图2 部分素材
3 结论
本文最初便定了基调，便是模仿官方制作一款跳一
跳小游戏。确定了基调之后，本文也进行了一系列的调研，了解了目前小程序的整个生态环境，并且从用户体验和产品设计的角度分析小游戏如何能俘获人心。接着，本
文确立了游戏需求，从不同的角度切入系统，分析出了整个游戏的功能，进而确立了模块切分方案。接着，在经过仔细的设计和重复的打磨之后，笔者开始搭建小游戏的开发环境，进行小游戏的设计工作，经过不断的尝试和试错之后终于得到了较为满意的结果。在这个过程中，笔者不仅了解到了如何开发一款游戏，也明白了如何从用户的角度出发来设计产品，梳理思路。
软件开发
图3 代码运行情况-1
图4 代码运行情况-2
在感慨于既有成就的同时，笔者也还时刻记得本文的不足之处。笔者现在仍是高中生，时间和精力并非特别充裕，因此在小游戏的开发工作上仍有很多不足之处需要进一步改进，并且前期的调研和设计占据了太多的时间，导致最后的开发阶段时间略短。未来笔者将接着本项目的思路，进一步开发该游戏，并做好产品设计和用户调研，做好项目管理工作，一定会将这款游戏推向大众。
参考文献
＊ [1] 李梦媛. 小程序的广告形式与效果研究——以小游戏“跳一跳”为例[J]. 新媒体研究, (2018)13:2.
＊ [2].胡浩. 《》最新版小游戏体验[J]. 计算机与网络, (2018)01:1.
＊ [3].邢榕珊, 匡芳君. 小程序设计[J]. 计算机时代, (2018)08:4.
＊ [4].张文敏. 小程序游戏的发展现状及其社交属性[J]. 新闻研究导刊, (2018)14:1.
＊ [5]陈锦兴. 小程序打开新的盈利增长窗口[J]. 企业观察家, (2018)12.
＊ [6] 林洁如. 小游戏受热捧 小程序发展前景可期[J]. 新产经, (2018)02:3.
＊ [7]王欣悦. 传播游戏观视域下的“碎片化”娱乐研究——以“跳一跳”小游戏为例[J]. 新闻世界, (2018)02:3.
＊ [8]刘文辉, 王艺亭, 赵敏, 胡贺宁, 江丰光. 教育游戏评价指标的设计与开发[J]. 开放教育研究, (2017)02.
＊ [9]秦华. 计算机游戏叙述中的玩家沉浸与难度研究[D]. 清华大学，2009.
系统，这套系统应用了多传感器融合的SLAM算法，在计算量，精度等各个方面都有比较好的表现。但
是由于目前实验环境的限制，本文中只针对理论部分做了设计没有进行实验的操作，这是后续可以进行工作的方向。此外，在停车场这种重复性场景比较多的环境中，单纯的SLAM可能会有比较大的挑战，可以通过wifi定位或者贴标签的方式完成重定位。
参考文献
＊ [1] 孙凤池, 黄亚楼, 康叶伟. 基于视觉的移动机器人同时定位与建图研究进展[J]. 控制理论与应用, 2010, 27(4):488-494.
＊ [2] 基于改进粒子滤波器的移动机器人同时定位与建图方法[J]. 模式识别与人工智能, 2008, 21(6):843-848.
＊ [3] 朱凯, 刘华峰, 夏青元. 基于单目视觉的同时定位与建图算法
研究综述[J]. 计算机应用研究, 2018, 35(1).
＊ [4] 熊军林, 王婵. 基于RGB-D图像的具有滤波处理和位姿优化的同时定位与建图[J]. 中国科学技术大学学报, 2017, 47(8):665-673.＊ [5] 庄严, 王伟, 王珂，等. 移动机器人基于激光测距和单目视觉的室内同时定位和地图构建[J]. 自动化学报, 2005, 31(6):925-933.＊ [6] 柯文德, 蔡则苏, 李家兰. 机器人同时定位与地图构建技术研究[J]. 计算机应用研究, 2010, 27(4):1216-1219.
＊ [7] 陈常, 朱华, 由韶泽. 基于视觉的同时定位与地图构建的研究进展[J]. 计算机应用研究, 2018, 35(3):641-647.
＊ [8] 王权, 胡越黎, 张贺. 基于ROS与Kinect的移动机器人同时定位与地图构建[J]. 计算机应用研究, 2017, 34(10):3184-3187.＊ [9] 吕丹, 戴学丰, 刘树东. 一种同时定位与地图构建的仿真系统[J]. 微计算机信息, 2007, 23(5):244-246.
＊ [10] 姚二亮, 张合新, 张国良，等. 基于Vision-IMU的机器人同时定位与地图创建算法[J]. 仪器仪表学报, 2018(4).
（上接第17页）
（上接第61页）
育.2011. 17(4)：22-23.
＊ [3]教技厅《2018年教育信息化和网络安全工作要点》[R/OL]. [2018]1号 2018年3月1日.
＊ [4]姚亮.虚幻引擎（UE4）技术基础.第一版[M].北京：电子
工业出版社. 2018,9.
＊ [5]李伟.虚拟现实技术在高职教学中的应用[J].中国职业技术教育.2010（20）:49-50.
www�ele169�com  |  45