基于微信web开发者工具的小游戏的设计与开发-毕业论文

2024年2月3日发(作者：)

---文档均为word文档，下载后可直接编辑使用亦可打印---

摘要

随着现代生活、工作节奏不断地加快，人们也逐渐开始重视在闲暇时间怎么去放松和娱乐，手机游戏便是其中的一大分支。自智能手机面世后，各类休闲娱乐的游戏APP便层出不穷；但相比于传统的游戏APP，微信小游戏一方面可以减少用户下载的操作，大大增加易用性，做到一点即用；另一方面在微信小游戏开发方面相比传统游戏APP也能够做到低成本和易开发；此外，微信还拥有庞大的用户群体，能够较易地提高使用率以及获得良好的推广度。

本文设计实现的是基于微信web开发者工具的“消消块”小游戏，基于JavaScript + 微信小程序API进行游戏相关功能的开发，编写游戏代码使用Visual Studio Code，并且适当参考了HTML5游戏设计与开发的相关代码逻辑、游戏原理与技术。微信小游戏“消消块”包括游戏主体、微信小游戏开放数据域、后台管理三个部分。游戏主体实现的是：登录页面、游玩页面、结束页面；微信小游戏开放数据域实现的功能是：玩家授权、存储玩家游戏信息、获取玩家游戏信息、分享玩家信息、玩家排行榜信息；后台管理展现的是：在微信小程序后台管理对小游戏进行相关设置。

关键词：小游戏 消消块 JavaScript API Visual Studio Code

广东东软学院本科生毕业设计（论文）

Abstract

With the continuous acceleration of the pace of modern life and work,

people are gradually beginning to pay attention to how to relax and

entertain in their leisure time. Mobile game is one of the branches. Since the

advent of smartphones, all kinds of leisure and entertainment game apps

have emerged endlessly; but compared to traditional game apps, on the one

hand, WeChat mini games can reduce user download operations, greatly

increasing the ease of use, and playing it with one click. On the other hand,

compared with traditional game APPs, WeChat mini games can also be

developed at low cost and easy to develop; in addition, WeChat also has a

large user group, which can easily increase the utilization rate and obtain

good promotion.

This article designs and implements a "Eliminate Blocks" mini game

based on WeChat web developer tools, based on JavaScript + WeChat mini

program API for game-related function development, using Visual Studio

Code for game code writing, And appropriate reference to the relevant code

logic, game principles and technologies of HTML5 games ’s design and

development. WeChat mini game "Eliminate Blocks" includes three parts:

game main body, WeChat mini game open data domain, and backstage

management. The main content of the game is: login page, play page, end

page. The functions implemented in the open data domain of WeChat mini

games are: player authorization, storing player game information, obtaining

player game information, sharing player information, player leaderboard

information. The backstage management shows that: WeChat mini program

backstage management sets related settings for mini games.

Key words: Mini games Eliminate Blocks JavaScript API

Visual Studio Code

广东东软学院本科生毕业设计（论文）

1.绪论

1.1 课题研究的背景及意义

在微信早已深入千千万万用户生活的今天，微信小游戏也在人们日常生活以及休闲娱乐中占据了相当的地位，各种类型的小游戏也犹如百花齐放般不断涌现，休闲游戏、棋牌游戏、竞技游戏无时无刻都在生活与闲暇时间与人们相伴。

2017年微信上线小游戏之后的19天里，小游戏的用户数就快速突破了3亿，然而中国手游用户数在2017年上半年才是4亿多；据统计，截止2019年，已有超过10亿用户在小游戏平台中使用过内容服务，不同类型小游戏的使用度差异明显，“消消块”属于休闲消除类小游戏，而休闲类小游戏有超过4亿的用户，产生的收益超过10亿，其中的消除类小游戏用户占比约25%，产生的收益占比约20%。微信小游戏类属于微信小程序，点击即玩的易用性令用户可以随时随地体验到不同类型、不同特色的轻度化游戏作品；且在游戏过程中又能够与社交圈产生更紧密的联系，可以分享给微信好友和分享到微信群、微信朋友圈；传统的手游APP开发商也可以通过微信小游戏来进行更有效、更先进的分发和推广引流，“无端”的版本模式也可以让用户抢先了解基本游戏内容，进行体验，这能够一定程度提升用户对手游APP主体的关注。据新的数据统计，微信的月活用户超过11亿，可以说在微信平台下的小游戏有着相当大的发展空间。众多的吸引使得社会各行业也都先后加入了微信小游戏的设计开发，逐渐形成了庞大的市场和健康的生态氛围，这对中国的移动互联网科技以及人民生活娱乐水平都将是极大的提升。

因此，根据微信小游戏的发展，选择了“基于微信web开发者工具的小游戏的设计与开发”这个题目。

1.2 课题研究现状

微信小游戏在向第三方开发者开放后，小游戏的种类也是愈加丰富。数据显示，休闲类小游戏在小游戏类目中的占比约80%，休闲类小游戏依然是大部分小游戏用

户的选择。微信也在积极且逐步开放与小游戏的关联接口，拥有多个跳转入口，可以和小程序、公众号、朋友圈、用户交流链接，小游戏之间也能实现相应的跳转，小游戏和小程序直接互相唤醒等。数据显示,微信用户已经接受并广泛使用微信小程序, 尽管其中小游戏的占比相对较少，但用户使用度最高的小程序类别依然是小游戏。微信小游戏有更便捷的访问、更强大的功能和更简单的开发，且微信对于创新的小游戏也有相应的鼓励政策,吸引越来越多的开发者投入到小游戏的开发中,小游戏自身的产品红利也能够带来相应的营收,微信小游戏的未来发展依旧是平稳上升状态。

且微信小游戏的设计与开发能够很大程度地借鉴HTML5游戏与手游APP的相关原理、逻辑、代码、技术、后台管理、界面设计，现在许多的微信小游戏开发引擎与工具也能够与原生的微信开发者工具进行很好的互补与对接，一定程度降低了微信小游戏设计与开发的难度，结构与框架也较为轻巧，对开发者十分的友好。

1.3 课题研究目的

微信小游戏的游玩属于一种碎片化娱乐，不同种类、不同特色、不同玩法的小游戏带来了更多的娱乐可能。微信小游戏开发简单、易用性高、便捷度高，功能也能够相对丰富，最重要的是微信拥有极大的用户基数和极高的用户使用率，小游戏的推广和引流也因此较其他手游APP容易；微信小游戏与手游APP的因为各自的特性，二者之间也不具备可替代性，但微信小游戏与手游APP可以相互影响，实现互利共赢；小游戏玩法、操作简单，整体游戏节奏、氛围也偏轻松化，再有就是能够与微信社交关系链有更紧密的联系，成为日常生活中重要的社交互动形式之一。

1.4 本文的研究内容和设计结构

本课题将以理论分析、需求分析和设计实现相结合的方式来开发小游戏。对相关文献与文章进行查阅，得出小游戏实现可行性分析、需求分析。“消消块”小游戏的设计与开发工具是微信开发者工具与Cocos creator，代码语言是JavaScript，编写工具是Visual Studio Code，通过调用微信小游戏的API，以及接入微信小游戏开放域来实现游戏功能。

详细如下：

理论分析：通过对小游戏开发的相关理论的学习，以及当前线上小游戏存在的问题的探究，再结合本人对小游戏开发的理解，形成理论分析；

需求分析：查阅和研究相同类型的手游APP、小游戏设计与实现的相关文献与文章，从中总结微信小游戏的发展现状以及在微信平台下的自身价值，形成需求分析；

设计实现：在分析完相关理论和相关需求之后，也需要对游戏实现的可行性进行分析；构思游戏场景与游戏实现逻辑，确定整体游戏框架，根据需求进行页面设计，实现小游戏游玩的具体效果。

然后进行游戏测试，最后进行致谢、列出参考文献等。

本文设计的“消消块”小游戏包括游戏主体、微信小游戏开放数据域和后台管理三个部分。游戏主体主要展现的是：游戏接入页面、游戏登录页面、游戏结束页面；微信小游戏开放数据域主要包括的是：玩家授权、存储玩家游戏信息、获取玩家游戏信息、分享玩家信息、玩家排行榜信息；后台管理主要展现的是：微信小程序后台管理。

2.小游戏的开发工具和相关原理概述

2.1 微信开发者工具

微信官方在发布了可供开发人员开发微信小程序与微信小游戏的微信开发者工具的同时，也发布了可供开发人员进行参考的微信官方文档；开发人员可以使用开发者工具的相关功能进行调试、编写代码、发布小程序或小游戏等操作。

使用微信账号登录进入微信开发者工具，此账号成为小程序或小游戏的开发账号，储存与获取数据将以开发账号为基础。

开发者工具有三个模块：

（1）模拟模块

模拟进行代码编写与设计开发后，微信小程序与小游戏在手机微信端的显示效果，测试相应的功能的实现情况，点击预览，可以通过手机微信进行查看测试。

（2）调试模块

调试后，警告报错显示与相关参数查看的区域，分别为：Wxml、Console、Sources、Network、Appdata、Storage以及WxmlPannel。

（3）编辑模块

开发者进行代码编写的区域，可以对.json（配置文件）、.wxml（模块文件）、.wxss（样式文件）、.js（脚本逻辑文件）进行编写和修改，完成后可点击编译，在模拟器中查看效果。

2.2 微信小程序API

微信官方提供相应的原生微信小程序API，以供开发者进行相应的调用来达到功能的实现，储存用户数据，获取用户数据等。

小程序API的基本类型：

（1）事件监听

监听事件触发的API以 on 为开头，参数值为一个回调函数，如果事件触发，调用函数，传入参数，参数为相关数据。

（2）同步

同步API以 Sync 为结尾，另有一些同步API，可以通过函数返回值直接获取同步API的值，得出执行结果，如果执行期间发生错误，将引发异常且进行提示。

（3）异步

异步API占了相对较大的数量，一些可以接受指定类型的参数来接收接口的调用结果，参数为指定的字段。通过指定类型的参数获取传入的回调函数。一些可以进行值的返回操作，通过值的返回来实现功能的多元化。

（4）异步返回指定值

异步API有回调和承诺两种调用方法。当接口的指定参数对象不含成功、失败、完成三种情况之一的时候，异步API默认返回指定值，如果不返回，在回调模式下执行，并没有返回值。

2.3 Cocos creator

Cocos Creator游戏开发工具的内容创建与生产相较容易，同时还拥有许多便于操作的节点与控件，开发人员能够在工具中最大化地实现游戏的玩法逻辑和效果。辅助于强大的数据处理能力，能够一定程度减少开发人员的重复做工，减少开发的时间成本。

（1）多合一编辑器

编辑器拥有管理资源、调试游戏、预览游戏的功能，同时满足游戏页面设计的快速编辑和随意拖动，并且有相应的节点与控件可以选择，开发者可在编辑器中更便捷的对游戏布局进行设计排版。支持快速构建满足不同平台发布标准的代码包，可在Windows和Mac系统上使用。

（2）2D与3D

开发工具可以进行各种类型功能的二维和三维游戏的开发。并对纯二维的游戏开发工具进行了使用体验和引擎性能的提高和优化，支持且内置了Spine、Box2D、Texture Packer、TiledMap、DragonBones等二维开发功能。

（3）开源的游戏引擎

开发工具的游戏引擎是完全开放源代码的，并且开源的移动二维游戏框架的优势是易学习、易调试、可定制、性能高、文件体积小。

（4）多平台

Cocos Creator深入支持所有主要平台，游戏可以快速构建发布到Windows、Mac、Web、Android、iOS等小型游戏平台。在Web和小游戏平台上提供的是纯JavaScript开发引擎，以获得更好的性能和更小的封装。在其它原生平台上提供的是C++实现底层框架，以获得更高的运行效率。

（5）JavaScript

可以完全使用JavaScript语言来开发游戏，在开发工具上进行快速预览、调试，对已发布的游戏也能够进行更新修改。同时支持TypeScript语言。

（6）高效的工作流程

预配置的游戏对象被称为预制件，使用预制件可以使工作流程更为灵活高效，让设计师能够更加便利、放心的进行设计工作，而不必担心由于操作错误所浪费的时间。

（7）界面设计

内置的界面设计控件系统能够使开发者更直观地对游戏界面进行设计和实现，提高设计效率，最大化实现游戏在开发工具中的发布端模拟状态。

（8）自定义工具

开发者可以通过所需的工具对编辑器功能进行相应的扩展，来使个人工作流程与团队工作流程进行相对的配合。找到所需资源、范例、工具和插件，创建或添加自定义的插件，能够使开发者的项目开发进程进一步加快。

2.4 Visual studio code

一个轻量级的源代码编辑器，可以在Windows、Linux和Mac OS X平台上运行，并可以在Web和云应用的跨平台上进行代码编写。

（1）功能支持

编辑器的主要功能有：括号对应匹配、代码片段集合、语法彩色显示和可自定义的热键绑定。该编辑器不仅能够即用开源的分布式版本控制系统，而且还提供了大量快捷键，通过快捷键可以查看快捷键定义和更改快捷键。预设的常用快捷键有：放大缩小视图、格式化全部和指定代码、打开新的命令行提示符。

（2）语言支持

编辑器支持对以下语言或文件进行编写，有：JavaScript、TypeScript、HTML、CSS、F#、HandleBars、Markdown、C++、Python、Java、PHP、Haxe、Ruby、Sass、Rust、PowerShell、Groovy、R、JSON、Batch、Visual Basic、C#、Swift、Less、SQL、XML、Lua、Go、Ini、Razor、Clojure、Objective-C、Makefile、Perl、Coffee

Script、Dockerfile。

2.5 接入微信小游戏的开放数据域

微信小游戏为了防止用户信息和相关数据的泄露，增加了“开放数据域”。开放数据域的执行环境独立于主游戏，游戏引擎和加载的资源文件也完全独立。开发者想要通过获取储存在开放数据域的数据来实现排行榜等功能，只有从子域中调用相应的API才能实现排行榜信息的具体显示，主域无法进行调用实现效果。因为开放数据域只能在相应的离屏画布上渲染进行显示，所以需要开发者在主域中设置好相应的节点，以此来将离屏画布绘制在主域上。

开放数据域是单独的作用域，需要创建主域与子域项目：

（1）主域项目

所进行开发的小游戏的项目，也就是画布绘制显示的项目

（2）子域项目

开放数据域项目，设置以及调用好相应的API后，构建成微信开放数据域格式的文件，将子域文件放入到构建之后的主域项目文件的指定位置，就可以前往微信开发者工具运行主域项目，预览实现效果和进行功能测试。

2.6 微信小程序后台管理

（1）基本信息

小程序与小游戏基本信息的填写与修改，如名称、LOGO、简介等。

（2）管理

小程序或小游戏的版本管理、增删开发成员与权限管理、接收用户反馈。

（3）统计

小程序或小游戏的用户昨日概况、用户访问统计、用户访问分析、用户画像、收入分析、渠道分析。

（4）功能

虚拟支付、微信搜一搜、客服、订阅消息、PC小游戏。

（5）开发

运维中心、开发设置、开发者工具、安全中心。

（6）成长

能力地图、主体信用分、创意游戏、违规记录。

（7）推广

推荐组件、流量主、广告主。

（8）设置

基本设置、游戏设置、关联设置。

3.小游戏可行性分析与需求分析

3.1 小游戏可行性分析

（1）经济可行性

经济可行性是项目能否开发的基本条件之一，以及对后期所获得的利益进行评估，是否能得到最终利益大于投资利益的结果。而在这些费用里，主要包括整个游戏框架建设费用、完全运行的费用和后期管理维护的费用等。

在硬件需求方面，一台电脑、一部手机即可满足要求。软件需求方面，采用微信开发者工具以及Cocos creator进行开发，使用Visual studio code进行代码编写，都是免费软件开发，无需支付任何费用。小游戏的游戏内容相对简洁，操作简单，开发人员也不需要重新系统学习小游戏的开发知识，相对学习和借鉴HTML5游戏就可以进行开发。

微信小程序平台提供给开发者的大多数功能都是免费甚至永久免费的，开发者基本不需要考虑经济方面的问题。

（2）技术可行性

通过一系列的学习和研究，确定整个游戏的框架结构。根据这个框架结构来确定所要的条件是否具备，从硬件、软件的操作环境和操作性能，以及操纵人员的技术和数量等方面去思考这些可能性。

考虑到游戏框架的完整性，在所用工具方面我们选取了微信开发者工具和Cocos creator来对小游戏实行研发，同时也使用微信小游戏的开放数据域对“消消块”小游戏的相关游戏信息进行储存和调用。

在硬件方面，拥有一台电脑和一部手机，就能让整个小游戏研发系统顺利运行，以及能够很好地在完成后进行相应的测试。

在软件方面，本文设计与开发的“消消块”小游戏所采用的微信开发者工具、Cocos creator、Visual studio code。这几个工具是现在主流的微信小游戏开发与代码编写的工具，在各个方面都有很好的稳定性和参考性，因此在技术可行性这个层面来说，也是具有可行性的。

（3）操作运行可行性

操作运行可行性是指游戏系统对整个模块所产生的影响，以及各个因素对游戏系统的适应性。从使用难易程度上来看，因为小游戏系统设计简洁，且便于操作，普通的微信的使用用户，也可以清楚并熟练使用整个小游戏系统。对于开发人员来说，在后期的更新迭代的维护过程中，也能够在微信小程序后台实现相应的调整。

（4）发布上线可行性

1）所需材料

① 个人：《计算机软件著作权登记证书》、《游戏自审自查报告》；

② 非个人：《计算机软件著作权登记证书》、《游戏自审自查报告》、《广电总局版号批文》、《文化部备案信息》。

2）发布上线流程

① 注册登录进入微信公众平台，填写小游戏的相关信息；

② 在开发者工具中点击上传，填写版本信息；

③ 上传成功后，进入微信小程序后台管理，点击提交审核；

④ 勾选协议，填写所需信息与提交所需文件，提交等待官方审核

因此，只要满足相应的条件并且提交相应的材料，通过官方的审核后便可上线，发布上线也是具有可行性的。

3.2 小游戏需求分析

本文基于微信web开发者工具的“消消块”小游戏属于休闲类消除小游戏。 从微信上线小游戏至今，每年占最多比重的都是休闲类小游戏，且在2019年休闲类小游戏的流水也达到了10以上，有超过4亿用户游玩过休闲类小游戏，有超过40款休闲小游戏年注册量超过1000万。市场的统计数据表明，小游戏用户依然首选休闲类小游戏，且在当今快节奏的生活工作中，人们在闲暇时间的休闲娱乐也会首选轻松愉快的休闲类小游戏，不用重度地去投入身心精神，只为在游戏时间能够得到片刻的休息，同时又能够转变为社交圈的一种分享和交流。

休闲类小游戏又有以下几个主要特点：

（1） 界面简洁

（2） 玩法简单

（3） 操作简单

（4） 与社交圈产生联系

4.小游戏的设计与构思

4.1 小游戏结构与玩法的构思

（1）小游戏的结构设计：

本文设计的基于微信web开发者工具的“消消块”小游戏包括游戏主体、微信小游戏开放数据域和后台管理三个部分。游戏主体主要展现的是：游戏登录页面、游戏游玩页面、游戏结束页面；微信小游戏开放数据域主要包括的是：玩家授权、存储玩家游戏信息、获取玩家游戏信息、分享玩家信息、玩家排行榜信息；后台管理主要展现的是：微信小程序后台管理。（如图4-1-1所示）

图4-1-1小游戏结构图

（2）小游戏的玩法设计：

本文设计的基于微信web开发者工具的“消消块”小游戏是“消除”类的休闲小游戏，“消消块”顾名思义就是消除方块，操作也是类似于其他消除类小游戏，

点击符合消除条件的数字方块，然后进行消除。（如图4-1-2所示）

具体玩法介绍：

1） 方块是数字为1 ~ 9且有相应颜色的数字方块；

2）数字方块具有增加数值的功能，点击数字方块则进行“+1”操作，从1到9依次“+1”，最大值为9；

3）游戏初始会随机生成“5 * 5”的数字方块矩阵，数字方块的最大数值为5

4）消除条件：点击后，数字方块的数值与左、右、上、下四个方向的数字方块的数值相同，且满足“>=3”的条件，进行消除；

5）消除后，自动随机在数字方块矩阵空缺处生成最大值为5的数字方块，若空缺处自动生成的数字方块再次且多次满足消除条件时，称为连击条件，则继续进行与连击次数相等的消除操作，直到不满足消除条件为止；

6）分数计算 = 被点击方块“+1”后数值 * 被消除的个数；

例：若被点击方块“+1”后数值为5，满足消除条件被消除的个数为5，此次消除得分为5 * 5 = 25；

7）生命值初始值为5，最大值为5；每次点击后生命值“-1”，消除成功后“+1”。若仅满足一次消除条件，生命值“-1”后再“+1”，生命值不变；若满足连击条件，生命值增加次数 = 连击次数。生命值为零，则游戏结束。

图4-1-2小游戏玩法逻辑图

4.2 小游戏功能与界面设计的构思

“消消块”小游戏由游戏主体、微信小游戏开放数据域和后台管理三个部分组

成，且每个部分的相应的游戏页面都有着一些实现游戏的功能，这些功能在提高“消消块”小游戏完整性的同时，也丰富了小游戏各部分各页面的内容，为用户提供了更多的选择。

游戏主体的相应功能：

（1）登录页面（如图4-2-1所示）

1）开始游戏按钮（用于点击后跳转至游玩页面，进行游戏的游玩）

2）游戏规则按钮（用于点击后显示游戏规则，供玩家观看游戏规则，熟悉小游戏的玩法和机制，显示页面如图4-2-2所示）

3）好友排行按钮（用于点击后，子域调用相应API从小游戏开放数据域获取好友游戏信息后，在主域中进行显示，玩家能够在此查看好友的游戏得分纪录，在排行榜中从高到低进行排名，显示页面如图4-2-2所示）

图4-2-1登录页面设计构思图 图4-2-2分页页面设计构思图

（2）游玩页面（如图4-2-3所示）

1）分数显示（游戏进行时，玩家进行点击操作且满足消除条件后的游戏得分的实时统计与显示）

2）生命值显示（游戏进行时，玩家进行点击操作，每次点击生命值-1，每次满足消除条件生命值+1，生命值最大值为5；满足连击消除条件时，生命值增加次数等于连击次数，生命值最大值为5）

3）游戏操作区（游戏进行时，玩家进行点击操作，游戏进行消除操作和连击消除操作的区域）

4）返回按钮（游戏进行时，用于点击后跳转至登录页面）

图4-2-3游玩页面设计构思图

（3）结束页面（如图4-2-4所示）

1）游戏得分结算（游戏结束时，输出本次游戏的最终分数）

2）新纪录的显示（游戏结束时，判断本次游戏得分是否为最高分，若为最高分，显示新纪录）

3）主页按钮（游戏结束时，用于点击后返回至登录页面）

4）再玩一次按钮（游戏结束时，用于点击后重新开始游戏）

5）分享按钮（游戏结束时，用于点击后，获取在微信小游戏开放数据域中游戏结束后经过判断为最高纪录的分数，触发分享事件，获取微信好友，且分享得分最高记录给好友）

图4-2-4结束页面设计构思图

（4）游戏音效

1）游戏背景音乐（从进入游戏登录页面开始即自动播放，页面的相互跳转也不影响背景音乐的播放节奏，循环一直播放）

2）游戏点击方块音效（每次对数字方块进行点击操作的同时，都会有相应的音效）

3）游戏消除方块音效（每次满足一次消除条件时，在数字方块消除动画执行的同时，都会有相应的音效，此处为音效1）

4）游戏消除方块连击音效（每次满足一次消除条件，消除动画执行后，空缺处新生成的数字方块满足连击条件，连续执行消除动画，都会有相应的连击音效，从音效1顺序播放至音效6，连击音效最大值为6，“>6”次的连续消除则一直播放音效6，直至连击条件的不满足，连击音效停止；下次点击操作，满足消除条件，播放音效1）

微信小游戏开放数据域的相应功能：

（1）玩家授权

参考微信官方文档中罗列的不同功能的API信息，在游戏代码中进行添加和编辑，从开放数据域中调用相应的信息，实现进入小游戏登录页面则需要进行玩家授

权的询问，只有进行玩家授权后，小游戏才有权从开放数据域中获取已经储存的游戏信息，这一步是前提。

（2）存储玩家游戏信息

参考微信官方文档中罗列的不同功能的API信息，在游戏代码中进行添加和编辑，实现在游戏结束的同时，对本次游戏得分进行与之前最高纪录得分的大小判断，如果本次得分“<”最高纪录分数，则直接跳过；如果本次得分“>”最高纪录分数，则把本次得分记录为最高纪录分数，储存在微信小游戏开放数据域中，以便之后操作的调用。

（3）获取玩家游戏信息

参考微信官方文档中罗列的不同功能的API信息，在游戏代码中进行添加和编辑，实现在排行榜中获取已经储存在微信小游戏开放数据域中好友的游戏分数信息，以便于排行榜的排名与分数排序。

（4）分享玩家游戏信息

参考微信官方文档中罗列的不同功能的API信息，在游戏代码中进行添加和编辑，实现在游戏结束页面弹出时，如果玩家选择分享游戏分数信息，则获取已经储存在微信小游戏开放数据域中个人的最高纪录分数信息，触发微信小程序的分享事件，分享分数；监控且打开微信小程序内置的转发功能，在进入小游戏后也可通过右上角来对小游戏进行分享，达到与社交圈产生联系的效果。

（5）玩家排行榜信息

参考微信官方文档中罗列的不同功能的API信息，在游戏代码中进行添加和编辑，实现在玩家点击好友排行按钮后，获取已经储存在微信小游戏开放数据域中的个人与好友的最高纪录分数信息，进行从小到大的分数排名，且从数据域中获取玩家的个人头像与微信名称，在排行榜中显示排行名次、玩家头像、玩家微信名称玩家游戏分数。

微信小程序后台管理：

（1） 基本信息

填写和完善微信小游戏的名称、LOGO、简介等基本信息。

（2） 管理

1）版本管理（小游戏的线上版本、审核版本、开发版本）

2）成员管理（添加或移除开发成成员，配置开发成员对小游戏的权限）

3）用户反馈（玩家游玩后发现问题进行反馈，可以在后台查看反馈信息）

（3）开发

可以查看小游戏的错误查询、实时日志、性能监测、告警设置、测速，还有接口的相关设置。

（4）设置

小游戏的基本设置、游戏设置、关联设置。

5.小游戏的实现

本文研究的是“基于微信web开发者工具的‘消消块’小游戏的设计与开发”，“消消块”小游戏的实现将从三个组成部分之一的游戏主体来进行详细描述，而游戏主体又分为登录页面、游玩页面、结束页面三个模块，所有的游戏代码编写以及从微信小游戏开放数据域中调用的API最终呈现的游戏效果就是以这三个页面所组成的小游戏。

5.1 登录页面的实现

（1）游戏LOGO的动画设置

使用active属性设置LOGO的抖动效果，先旋转4度，再回8度，循环执行（如图5-1-1所示）。

图5-1-1代码图

（2）游戏规则分页的显示

使用active属性设置当玩家点击“游戏规则”按钮时，显示在场景中创建的规则页面节点（如图5-1-2所示）。

图5-1-2代码图

（3）好友排行分页的实现

子域通过调用相应的API从小游戏开放数据域中获取游戏结束后储存的游戏得分纪录，在主域中进行绘制与显示。

1）主域部分：

① 在登陆页面场景上创建一个排行榜节点，添加WXSubContextView组件，组件上有FPS属性可以设置贴图的更新频率（如图5-1-3所示）；

图5-1-3 FPS属性图

② 在登陆页面场景代码中添加showRank()事件函数，设置WXSubContextView容器可见，从开放数据域获取游戏信息（如图5-1-4所示），且设置在点击关闭按钮时，关闭页面的同时清空排名信息，避免玩家再点击按钮时，排行榜会有重复内容出现（如图5-1-5所示）；

图5-1-4 代码图

图5-1-5 代码图

③ 添加initUserInfoButton ()事件函数来用于用户授权，调用微信开放数据域中的方法前需要用户授权，获取当前玩家的个人信息，头像、微信名称等（如图5-1-6所示）。

图5-1-6 代码图

2）子域部分：

① 设置好主域的WXSubContextView节点大小后，令子域场景大小与其一致，rankScrollView节点为滑动效果，增加content节点，并加上Layout组件，方便排

版以及自动调整高度；预制一个item节点，设置好名次、微信头像、微信名称、得分的位置与大小（如图5-1-7所示）；

图5-1-7 节点图

② 在子域中新建脚本，添加onLord方法，调用age方法来获取游戏数据（如图5-1-8所示）；

图5-1-8 代码图

③ 调用endCloudStorage()在开放域中获取好友的游戏数据(游玩过的好友的游戏数据储存在开放域中)。如果调用成功，循环读取玩家的信息，并将数据添加到allInfoList数组中（如图5-1-9所示）；

图5-1-9 代码图

④ 获取完毕之后，调用makeRanks方法进行排名，将allInfoList内部元素进行排序，根据分数来降序排列（如图5-1-10所示）；

图5-1-10 代码图

⑤ 循环数组，调用createItem方法生成预制，添加到content中（如图5-1-11所示）；

图5-1-11 代码图

⑥ 将子域项目构建成小游戏开放数据域格式，文件命名为OpenDataDomain，将文件复制到构建好的主域文件目录下，运行至开发者工具，游玩后，实现效果如下（如图5-1-12所示）。

图5-1-12 效果图

（4）登录页面的实现效果

1）登录页面（如图5-1-13所示）

2）游戏规则弹框分页（如图5-1-14所示）

3）排行榜弹框分页（如图5-1-15所示）

图5-1-13 效果图 图5-1-14 效果图 图5-1-15 效果图

5.2 游玩页面的实现

（1）得分计算

创建score节点，添加Lable控件，初始值为0，分数增加，传入消除的方块数值与消除方块的数，使用runAction方法来实现分数动画效果，先放大至1.2倍，然后分数数值变化，替换分数，缩小回原样（如图5-2-1所示）；游戏结束时，使用setNewCloudScore(newKVData)方法来设置储存分数，第一次游戏时，也调用该方法储存分数（如图5-2-2所示）；使用setBestScore()来将玩家的最高纪录分数储存到本地和微信小游戏开放数据域，首先从本地获取历史最高分，如果是第一次游戏直接设为最高纪录，储存到本地，调用rCloudStorage更新储存在开放数据域的分数，如果不是第一次玩，进行判断，本次得分“>”最高得分，储存到本地，调用rCloudStorage来更新储存在开放数据域的分数（如图5-2-3所示）。

图5-2-1 代码图

图5-2-2 代码图

图5-2-3 代码图

（2）生命值

按照小游戏的玩法设计，点击方块，生命值“-1”，满足一次消除条件，生命值“+1”，连击n次“+n”，且生命值“>5”就“=5”，生命值“<0”就“=0”；设置刷新显示生命值，控制生命值（爱心）的透明度，根据hp的值进行显示（如图5-2-4所示）。

图5-2-4 代码图

（3）游戏区域

1）方块矩阵的随机创建

对方块进行预制，随机创建5 * 5 = 25个方块，且数值“<5”，设定好坐标转化，设置左右上下均为不同方块（避免一开始就进行消除），创建完的节点存入节点数组（如图5-2-5所示）；

图5-2-5 代码图

2）点击之后的数值“+1” （如图5-2-6所示）

图5-2-6 代码图

3）判断消除与消除操作

判断消除：游戏中点击方块数值“+1”后，遍历有无相同方块，进行消除，定义一个方向数组，上下左右遍历，递归调用这个函数，一直执行到找不到为止；消除操作（如图5-2-7所示）：传入点击方块的行与列，如i与j行与列对应，跳过，被点击方块“+1”，不会被回收，而需要进行消除的节点先缩小到0，再进行回收，回收后在map数组中置为空，在节点数组中置为空（如图5-2-8所示）；

图5-2-7 代码图

图5-2-8 代码图

4）空缺处方块的补全与判断连击条件

方块补全：消除执行后，定义一个下落条件，检测到下方方块为空则下落，下方被下落的方块替换数据，节点与数据同步，把节点的引用传回去，消除的方块数据消失（如图5-2-9所示）；检测空的方块，刷新补空，随机生成数值“<5”的方块（如图5-2-10所示）；新建方块后继续检测是否满足消除条件，若满足，继续执行消除（如图5-2-11所示）；

图5-2-9 代码图

图5-2-10 代码图

图5-2-11 代码图

5）点击音效与连击音效

点击方块则播放点击音效（如图5-2-12所示）；播放连击音效，音效参数id为0-5，满足连击条件时，顺序播放，如果id < 0，直接返回，不执行任何操作，如果id > 5，直接播放最后一个音效（如图5-2-13所示）。

图5-2-12 代码图

图5-2-13 代码图

（4）游玩页面的实现效果（如图5-2-14、5-2-15所示）

图5-2-14 效果图 图5-2-15 效果图

5.3 结束页面的实现

（1）最终得分显示

直接添加overScoreLable节点在updateScoreLable(num, k)方法中，获取游戏的分数，显示在结束页面上（如图5-3-1所示）；

图5-3-1 代码图

（2）新纪录提示

直接添加new节点在setBestScore()方法中，如果判断本次得分 > 最高地方，显示新纪录（如图5-3-2所示）；

图5-3-2 代码图

（3）分享玩家分数

1）主动分享

设置分享按钮，在玩家点击按钮时，触发微信分享事件，自动跳转分享，调用shareAppMessage，设置好title，imageUrl，query，在title中引用玩家最高纪录分数（如图5-3-3所示）；

图5-3-3 代码图

2）被动分享

监听小程序右上角菜单的转发按钮，显示转发按钮（如图5-3-4所示）。

图5-3-4 代码图

（4）结束页面的实现效果

1）无新纪录结束页面（如图5-3-5所示）

2）新纪录结束页面（如图5-3-6所示）

3）分享跳转页面（如图5-3-7所示）

图5-3-5 效果图 图5-3-6 效果图 图5-3-7 效果图

6.小游戏的测试

6.1 登录页面的测试

（1）玩家授权测试

首次进入游戏成功弹出申请玩家授权（如图6-1-1所示）；

图6-1-1 测试图

（2）菜单分享按钮与分享测试

点击右上角的菜单栏，“发送给好友”按钮显示（如图6-1-2所示），点击按钮，跳转分享事件，成功分享游戏信息给好友（如图6-1-3、6-1-4所示）；

图6-1-2 测试图 图6-1-3 测试图 图6-1-4 测试图

（3）游戏规则页面测试

点击游戏规则按钮，页面显示成功（如图6-1-5所示）；

图6-1-5 测试图

（4）排行榜页面测试

个人第一次游戏最高得分为151，好友为52，排序成功；个人第二次游戏最高得分为211，排行榜成功获取储存的数据，刷新显示（如图6-1-6、6-1-7所示）。

图6-1-6 测试图 图6-1-7 测试图

6.2 游玩页面的测试

（1）点击红框中数值为2的方块（如图6-2-1所示）；

（2）不满足消除条件，方块数值 “+1” 成功，数值为3，得分不变（如图6-2-2所示）；

（3）再点击，方块数值“+1”，数值为4，满足消除条件，消除执行后随机生成的方块再次满足消除条件，连击消除且得分增加为89（如图6-2-3所示）。

图6-2-1 测试图 图6-2-2 测试图 图6-2-3 测试图

6.3 结束页面的测试

（1）是否为新纪录测试

第一次游戏得分为142，第二次游戏得分为89，不是新纪录（如图6-3-1所示），第三次游戏得分为151，是新纪录，成功显示新纪录（如图6-3-2所示）；

图6-3-1 测试图 图6-3-2 测试图

（2）分享按钮测试

点击分享按钮，触发分享事件（如图6-3-3所示），分享游戏信息成功（如图6-3-4所示）

图6-3-3 测试图 图6-3-4 测试图

7.结论

致谢

岁月匆匆，时光飞逝；他日稚气未脱行走于烈日之下是为军训，今日略显成熟查询于所见所识已为论文；他日满心欢喜享受于大学生活实为愉快，今日满身惆怅浪迹于社会生活却为迷茫。

我时常都在不禁的感叹，四年光阴尽是如此之快，也时常不禁的回想，是否虚度四年光阴，答案我心中早已了然，却还是止不住思考，亦或者说为自省。

校园学习生活，组织社团生活，老师同学相处，洋溢着许许多多的快乐；标志的钟楼与石刻，徇烂的星光大道，蓦然回首，大家都已纷纷散去，各奔东西，在东软我们有着高光时刻，亦夹杂着暗淡时刻，干过很多事情，也发生了很多故事，有些东西可能等到我们踏出校园再回首时，才能感觉到它的温馨之处，才能懂得它的弥足珍贵。

大学时光中，我们常常会谈及高中生活的人与事，迈出社会时，我们肯定又会时常想起大学生活的人与事，这其中的人，我们的情谊又是那么的简单质朴。非常幸运能够在大学校园的各个途径结识了许许多多的人，我也从形形色色的人身上吸收到了很多有益的东西，

感谢16数媒3班的伙伴们，正因为有你们我才有了更深的集体感。

感谢曾经教过我的东软老师们，正因为有你们我才能汲取到知识。

感谢我在东软所认识的朋友们，正因为有你们我才能有丰富多彩的课外生活。

感谢我的指导员与论文指导老师， 正因为有你们我才能解决许多问题和完成毕业论文。

最后，感谢我的父母对我的培养与支持。

献上许巍的《空谷幽兰》的一句歌词：

“一念净心，花开遍世界”。

望与诸君共勉之。

参考文献

[1]武思怡,解佺,张雨,侯秉昀. 微信小程序开发研究[J]. 无线互联科技,2018,15(11):52-54.

[2]张文敏. 微信小程序游戏的发展现状及其社交属性[J]. 新闻研究导刊,2018,9(14):108.

[3]邢榕珊,匡芳君. 微信小程序设计[J]. 计算机时代,2018(08):9-12.

[4]刘嘉琪. 基于受众心理视域的社交媒体游戏使用动因研究——以微信小游戏为例[J]. 新媒体研究,2019,5(12):53-55.

[5]李昱杉. 基于微信小程序的“跳一跳”小游戏设计[J]. 电子制作,2019(18):42-45.

[6]于晓燕. 智能手机游戏界面设计研究[D].华东理工大学,2015.

[7]刘琳. 手机游戏交互设计中的图形界面研究[D].南京师范大学,2012.

[8]王玉洋. 基于微信小程序的移动学习平台环境构建与系统设计开发[D].南京大学,2018.

[9] 刘玉佳．微信“小程序”开发的系统实现及前景分析[J]．信息通信，2017(1)：260—261.

[10] 腾讯公司微信公众平台开发者文档 [EB／0L](2014—12—22) http：／／mp．W

eixin．Qq．com／wiki／home／mdexhtm

[11] 喻国明,梁爽.小程序与轻应用:基于场景的社会嵌入与群体互动[J].武汉大学学报(人文科学版),2017,70(06):119-125

[12] 孙月玲. 微信小程序的设计与开发[J]. 电子技术与软件工程.2018/10/17

[13] 钱乐秋,牛军钰.软件工程[M],清华大学出版社,2007,40-77.

[14]张炜. 以基本游戏为对象的游戏定义及其机制研究[D].中国美术学院,2016.

[15]尚存保. 基于手机平台的网游关键技术研究与实现[D].北京工业大学,2015.