4-2 制作排行榜
修复完小BUG之后肯定就要来制作新功能啦~
有请我们本节课的第一个新功能：
没错！就是排行榜功能，排行榜的最上方会显示今日最佳的人以及分数显示，中间就是显示从1到10名的人 最后就是显示一下自己的排名。
那我们废话不多说 直接开干！
首先我们日常先来创建一个新的角色，叫做："排行榜" 并且将他放进UI文件夹中：
然后我们切换到角色造型，这里可以自己画一个 也可以图省事直接从素材包中上传即可~
就像是这样 不过在这里我们可以多新建一个空的造型 方便我们后面使用，然后我们就开始来写代码吧!
在开始写排行榜代码之前先让我们回到贪吃蛇的角色中：
我们添加一个新的额外数据项，这个项就是用来传输玩家分数用的。
然后我们将额外数据的第四项替换为分数*5然后四舍五入一下就可以了：
好，接下来让我们回归正题 来编写排行榜的代码。
我们先来实现一下获取当前游戏中所有玩家的数据然后给他进行排序，首先我们从arkos的扩展中找到排序表积木：
没错，我们就要用到这个来对数据进行排序。
然后我们回到排行榜角色中，当接收到开始游戏就先设置一下排序表的排序方式 设置为降序就可以了：
然后我们创建一个自定义积木叫做“刷新排行榜”：
然后我们来编写一下这个自定义积木的代码。
首先我们用一下arkos扩展中的临时变量佳作“刷新排行榜循环” 这样就不用创建一个变量了。
然后我们清空一下排序表 也就是初始化一下：
然后我们开始循环 循环一个当前房间玩家数量的次数，并且每次循环将循环变量增加1
然后我们将之前获取云数据自定义积木的代码也复制到排行榜中一份：
然后我们每次循环就将内容设为 第循环次数个玩家玩家的名称，排序值设为 第循环次数个玩家的会话ID的获取云数据第四项 也就是这个玩家的分数 然后将这两个都加入排序表：
这样刷新排行榜的部分就搞定了！
然后我们回到刚才这里 拖出来个循环，每等待一帧的时候就调用一次刷新排行榜：
然后我们来写一下今日最佳的代码，首先我们去扩展库添加一个新的扩展：
没错！就是大名鼎鼎的连接社区扩展，然后我们新拖出来个当接收到开始游戏 然后新建一个变量叫做“用户名”，我们刚开始就将用户名变量初始化为连接社区扩展中的获取用户名积木：
然后我们来写一下判断：
如果从作品数据库中获取到的今日最佳的时间不等于今天那么就代表这个数据该重置了！这个时候我们将data设置为我们的数据就可以了 今日最佳.long（长度）设置为我们的分数 今日最佳.time（时间）设置为今天 最后就是将用户名也设置为我的用户名。
接下来就是如果时间是今天的话 那么就判断一下我的分数是否大于今日最佳的人的分数，如果大于那么就直接跟上面一样将数据都设为自己就可以了~ 这样我们就实现了一个简易的今日最佳效果。
然后就是让我们来编写一下排行榜显示的代码！
我们再次拖出来一个新的当接收到开始游戏事件，然后我们来做一下初始化 首先我们将图层移动至最前面并且显示，然后我们这里为了方便随时修改排行榜的xy位置所以我就新建了两个变量用来存储xy位置，我们将xy位置分别设置为左上角的位置就好了 我这里是x-265 y95 然后我们将排行榜本体移动到xy变量的位置并且将大小设置为70 将造型也初始化一下切换成造型1：
然后我们来克隆一下整体UI：
分别是：显示前十名称，显示前十分数，显示自己排行，显示自己名称，显示自己分数，显示今日最佳名称，显示今日最佳分数。
我们克隆完之后肯定就要来编写克隆体的代码啦~
不过在正式开始之前让我们先来创建一些新的自定义积木方便我们使用。
- 获取排行榜前 XX 名称
首先我们创建了一个新的临时变量叫做“排行榜” 然后我们将排行榜初始化为空 随后我们就爱那个排行榜设为排行榜链接一个第XX名的玩家名，没错这里又创建了一个自定义积木 这个自定义积木等会再讲：
然后我们创建了一个新的变量叫做 i 并且这个变量是私有变量！用来当循环次数使用。
然后就是开始重复执行一个（参数x）次 - 1，然后每次循环我们都将排行榜设置为 排行榜链接\n连接排XX的玩家名，最后我们返回临时变量排行榜就可以了。
那么获取名称都有了怎么能没有获取分数呢？没错 让我们来将这个代码复制一份 并且新建一个自定义积木：
我们将原本的排行榜改为排行榜1，然后将获取玩家名换成获取值，这样就大功告成了。
接下来我们就来讲一下获取参数的自定义积木是怎么实现的，其实非常简单：
就是套了个arkos扩展中的排序表获取参数的积木~
好了，自定义积木都整完之后我们就来开始搞克隆体的代码了：
那么首先肯定是初始化，刚开始我们将造型切换成造型2 然后就是判断ID了
我们一个一个来看 首先我们来制作一下显示前十名称的克隆体代码。
首先我们将他移动到贪吃蛇的左上角位置：
大约就是这个位置，然后我们将克隆体大小设为32 将字体设置为serif 宽度设置为200以X坐标作为起点靠左对齐。
然后将文字颜色设置为白色，将文字的换行符设置为 \n 这样我们刚才设置的换行符就有用处了。
最后我们重复执行移动到最上层 然后我们将文字内容设置为获取排行榜前10的名称 最后每0.1秒刷新一次，这样我们的第一个元素就搞定了 也就是显示前十名称。
那么有了显示前十名称之后肯定得有显示前十分数了：
整体代码都一样 只是将位置从左侧改为了右侧并且设置靠右对齐，将获取排行榜名称改为了获取分数~
这样我们就搞定了分数显示了。
接下来让我们做一下显示自己当前排名的一件套：
首先我们将他们仨分别显示在左下角 左下角靠中间一点 和 右下角：
然后我们都将大小设置为38 字体也都是一样是serif，前三个都将文字宽度设置为200 前两个都设为靠左对齐 最后一个设置为靠右对齐就可以了。
然后我们将字体颜色设置为黄色 这里可以分别按照喜欢的颜色来~
然后就是分别重复执行显示 排名，名称，分数，然后同样的 每0.1秒刷新一次。
好了 最后就让我们来做一下今日最佳的显示：
首先我们分别将他俩的位置设置为左上角和右上角：
大小和字体都一样 分别是 38 和 serif，对齐方式一个是靠左对齐一个是靠右对齐，文字颜色是金色。
然后就是重复执行 显示一个从data数据库中读取今日最佳的名称和长度，然后每五秒刷新一次就可以了~
最后我们将界面信息的显示位置修改一下 让他在排行榜的右侧 这样就不会挡住我们排行榜的消息，大小同时也可以减少一些 我这里改成了50 可以按照自己的个人喜好去调整~
好了！ 这样我们就大功告成了
完美！
<iframe
width="100%"
height="800px"
scrolling="no"
src="https://www.ccw.site/embed?id=snake/mckuke/Lec4/03&type=comment"
title="贪吃蛇中级教程-第四课-第二节"
frameBorder="0"
allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
allowFullScreen
scrolling="0"
></iframe>本页索引