开启AdminJS成长之旅！这是我参与「AdminJS日新计划 · 2 月更文挑战」的第 5 天，点击查看活动详情
嗨！大家好，我是会做游戏也会教你做游戏的小蚂蚁。欢迎关注微信公众号【小蚂蚁教你做游戏】，每天学点儿做游戏的知识。 。
最近有几位同学问水平方向上的关卡翻页功能怎么做，这篇教程就详细的介绍一下水平的关卡翻页功能的实现方法。
如果游戏中的关卡数量比较多，一般有两种方式展示大量的关卡按钮，一种是垂直的滑动显示，这个比较简单，只需要使用一个“滚动列表”插件即可实现。另一种是水平方向的翻页显示，当然水平方向上也是可以滑动的，但是似乎很少看见有在水平方向上使用滑动的方式显示大量关卡按钮的（或许这样与我们的操作习惯不符，或许你可以尝试一下这种很少有人用的方式？），大部分水平方向关卡的切换都是使用点击按钮翻一页的方式。
先来看一下我们今天要学习制做的关卡翻页示例。
如图，每一页显示 4x4 的 16 个关卡，下方有两个翻页按钮，可以点击向后翻页或者向前翻页，最下方是一个显示用户当前选择关卡的提示，为了方便我们查看当前选择的是第几关（这只是为了方便我们开发者查看，真实的游戏中可不会显示）。
我们把制作这个示例一共分为三步：
-
制作 4x4 的网格布局排列的按钮；
-
设置按钮上的关卡数字（这个按钮是第几关）；
-
实现向前向后翻页的功能；
接着，我们就来一步一步的制作这个示例吧！
按网格布局排列的按钮
看到“网格布局”这四个字熟悉吗？关于它的内容我在之前的教程中讲过没有十遍也有八遍了，所以在这里我就不想再讲一次了。如果你还不知道的话，可以去看看之前写的【这篇】教程。
如果你有认真学习过之前的教程的话，我认为只要谈到“做一个几行几列布局”的方块这样的需求，你就应该在脑袋里立刻蹦出实现方式:计算起点，双重循环克隆，根据行号列号计算位置.....
这种万金油式的一通百通的如此重要的知识，如果还没有掌握的话，真的是应该反思一下了。以后是打算每次遇到都撞一次墙？还是下点儿功夫一次彻底把它打通？
原理就不再说了，我们直接来看实现吧！
先布置一个简单的场景，其中包含关卡按钮，前后翻页按钮，以及几个用于显示信息的基础文字。
接着，再来看一下这个示例中所用到的所有的变量。
其中起点位置X/Y，行/列号，行/列数是我们在实现网格布局时需要用到的。
来看一下实现关卡按钮 4x4 排列布局的积木逻辑。
如图，红框框出的积木是实现排列布局的，需要重点理解，其它的我们后续会讲。
这样，我们就做出了关卡按钮的 4x4 网格排列布局了。
按钮上的关卡数字
接着，再来看一下如何设置按钮上的关卡数字。
先来看一下这张图，这是一个 4 行 4 列的布局，在已知行号和列号的前提下，我们可以计算出当前行列号那个位置上的索引。比如说第 2 行第 3 列位置上的索引是 7。
有了这个是不是我们就能知道哪个按钮表示的是哪一关了呢？且慢，我们还需要一个已知的条件，就是当前的关卡是哪一页。
因为不同的页数显示的关卡范围是不同的，如图是第二页显示的关卡，是从第 17 关到 32 关。所以，我们在计算一个按钮上的关卡数字的时候，还需要考虑的一个因素是当前的页数。
如图，不同的关卡页数，关卡的范围是不同的，通过每页的关卡数量（示例中是 16 关），以及当前的页数，可以计算出这一页的关卡范围。
最后，我们将这些已知条件结合一下，就可以计算出当前的按钮表示的关卡数字了。
你可以举个例子带入计算一下，例如位于第3行，第4列，第3页的按钮，它的关卡数字是：(3-1)*16+(3-1)*4+4 = 44，所以这个按钮显示的关卡数字是 44。
来看一下设置关卡数字的积木逻辑。
很简单，就三块积木，这三块积木完成的就是我们上述的分析计算过程。
实现前后翻页
都做到这里了，实现关卡翻页就是水到渠成的事了。我们只需要增加两个翻页按钮，点击向后翻页的按钮，就把关卡页的索引增加 1 ，点击向前翻页的按钮，就把关卡页的索引减少 1，因为关卡页的索引改变了，所以所有按钮上的关卡数字也要重新计算一遍。
直接来看一下向后向前翻页的积木逻辑吧！
向后翻页按钮的积木逻辑：
向前翻页按钮的积木逻辑：
当关卡按钮收到刷新通知时，只需要重新计算一下自己的显示数字即可。
当玩家点击一个关卡按钮的时候，我们把当前的关卡数字记录到一个“当前选择关卡”的全局变量中。
玩家点击一个关卡后再怎么做呢？我们的游戏通常会进入另一个场景，这个场景是真正进行游戏的场景，在这个新场景启动的时候，我们就可以根据全局变量“当前选择关卡”中记录的玩家选择的关卡（是第几关），来进行关卡的设置和初始化了。
这篇教程的内容就到这里了，希望它能够帮助你实现一个可水平切换关卡的功能。