cocos creator 微信小游戏 世界排行榜制作教程(云数据库)

目录

  • 前言
  • 一、前提准备
    • 1.开启微信开发工具中的云开发功能
    • 2.学会编写云函数
  • 二、开发步骤
    • 1.首先编写createuser云函数
    • 2.编写updatascore云函数
    • 3.在cocos creator中添加ScrollView组件
    • 4.新建Rank.Ts脚本文件
  • 总结


前言

这几个,在学习cocos creator的同时,也在自己开发小游戏。大家都知道,排行榜是小游戏的中重要组成部分,没有排行榜的小游戏少了很多乐趣。我查阅了很多资料,发现有关世界排行榜的教程很少。
下面是我在开发过程中遇到的一些问题和世界排行榜制作的教程。

首先给大家看一下我的小游戏的界面:cocos creator 微信小游戏 世界排行榜制作教程(云数据库)_第1张图片


提示:以下是本篇文章正文内容,下面案例可供参考

一、前提准备

1.开启微信开发工具中的云开发功能

cocos creator 微信小游戏 世界排行榜制作教程(云数据库)_第2张图片
点击云开发,并按照微信的流程一步一步配置开发环境。(这里我就不介绍了,CSDN里面随便搜都能搜到具体教程)

2.学会编写云函数

因为世界排行榜需要调用微信云开发数据库,而调用云开发数据库最好的方式就是通过微信云函数去调用,这样可以避免权限问题。不知道怎么配置的用户,下面我给出了链接快速前往。
前往微信云开发配置教程

二、开发步骤

1.首先编写createuser云函数

编辑云函数,并填写下面代码(首先要创建集合userinfo),createuser是用来在数据库创建用户数据的。其中score字段为我们需要排名的数据。openid为用户的唯一标识。

try{
  db.collection('userinfo').add({
    data: {
      _id: event._id,
      openid: event._id,
      nickName: event.nickName,
      avatarUrl: event.avatarUrl,
      opentimes:event.opentimes,
      score:event.score,
      challengescore:event.challengescore
    }
  })

2.编写updatascore云函数

因为openid是用户的唯一标识,我们可以用openid来定位用户,来更新用户的得分情况。
代码如下:

const wxContext = cloud.getWXContext()
  const db = cloud.database()
  db.collection('userinfo').doc(event.openid).update({
    data:{
      score:event.score
    }
  })

3.在cocos creator中添加ScrollView组件

ScrollView组件的使用可以参考官方文档或者前往这里

4.新建Rank.Ts脚本文件

Rank.ts脚本用来获取数据库中的用户
代码如下:

getData(){
        this.listData=[];
        this.content.destroyAllChildren()
        const db = wx.cloud.database()
        const MAX_LIMIT = 20
        let count=1
        db.collection('userinfo').count().then(async res =>{
            let total = res.total;
            // 计算需分几次取
            var batchTimes = Math.ceil(total / MAX_LIMIT)
            // 承载所有读操作的 promise 的数组
            for (let i = 0; i < batchTimes; i++) {
              await db.collection('userinfo').skip(i * MAX_LIMIT).limit(MAX_LIMIT).get().then(async res => {
                count=res.data.length
                for(var j=count-1; j>=0; j--){
                    var item = {
                        index:0,
                        nick:res.data[j].nickName,
                        avatar:res.data[j].avatarUrl,
                        score:res.data[j].challengescore,
                        love:0
                    }
                    this.listData.push(item);
                }
              })
            }
            this.listData.sort((a, b) => {//对score进行排序
                return b['score'] - a['score'];
            });
          })
            //this.content.height = this.RankItem.data.height * listData.length;
    }
  updatascore(){
      const db = wx.cloud.database()
      DataManager.Instance.userInfo.score=DataManager.Instance.userInfo.score+1
      wx.cloud.callFunction({
        name: 'updatascore',
        data: {
          openid:DataManager.Instance.userInfo.openid,
          score: DataManager.Instance.userInfo.score
        }
      })
    }

总结

教程就讲到这里,有啥问题可以私聊我哦!
推广一下我的游戏:cocos creator 微信小游戏 世界排行榜制作教程(云数据库)_第3张图片

你可能感兴趣的:(cocoscreator,微信,数据库,database,cocos-creator)