微信小遊戲排行榜設計技術梳理

要製作排行榜，我們需要使用一個陣列totalGroup來儲存同玩好友的資料，totalGroup中同玩好友資料格式如下:

const totalGroup = [
{
    key: 1,//使用者排名
    name: "xiaoming",//使用者暱稱
    url: avatarUrl,//使用者頭像地址
    img:image,//使用者頭像，根據頭像地址生成image
    scroes: 95//使用者得分
},

{
    key: 2,
    name: "xiaohua",
    url: avatarUrl,
    img:image,
    scroes: 90
},
//...
]

 當遊戲完成時，玩家得分會上傳至使用者託管資料，totalGroup根據使用者同玩好友託管資料進行更新，排行榜根據totalGroup中的資料進行渲染。

遊戲各階段實現的功能總結如下：

1.遊戲初始化時

根據同玩好友資料更新totalGroup；

2.遊戲完成時

將玩家得分上傳至使用者託管資料

3.玩家開啟排行榜時

根據同玩好友資料更新totalGroup，然後根據totalGroup渲染排行榜；

本文不會詳解排行榜的渲染，主要分析下面兩個問題：

1.上傳玩家得分至使用者託管資料

2.根據同玩好友資料更新totalGroup

一、上傳玩家得分至使用者託管資料

由於遊戲邏輯是在主域中編寫的，所以需要在主域中把得分等資料傳入開方資料域（關於主域和開放資料域的概念請參考官方文件，這裡不詳述），介面如下：

//主域中編寫
function setScore(score){
    var openDataContext = new WxgameOpenDataContext();

    var info={
        command:"setScore",
        score:score,
        timeStamp:new Date().getTime()
    };

    openDataContext.postMessage(info);
}

這裡的timeStamp屬性是得分時的時間戳，為了實現只對本週同玩好友進行排行的功能。然後在開方資料域中接受並處理資訊：

//在開方資料域中編寫
wx.onMessage((data) => {
    if (data.command == 'setScore'){
        setScore(data);//處理得分
    }else if(data.command == 'preload'){
        //遊戲初始化時預載入資源和根據同玩好友資料更新totalGroup；
    }else if(data.command == 'open'){
        //根據同玩好友資料更新totalGroup及渲染排行榜；
    }
});    

在setStore中先判斷分數是否是本週最高分，若是則將分數上傳至使用者託管資料：

//在開方資料域中編寫
function setScore(data){
    var score=data.score;
    var timestamp=data.timeStamp;

    /*
    判斷totalGroup是否存在當前使用者，若不存在則更新分數，若存在則判    斷其中的分數是否大於score，若大於則退出，否則更新分數。
    */
    for(var i=0;i<totalGroup.length;i++){
        var name=totalGroup[i].name;
        var lastScore=totalGroup[i].scroes;
        var username=userData[0].nickname;//userData中儲存使用者資料資訊，在遊戲載入時初始化，程式碼附在後面
        if (username == name && lastScore >= score){
            return;
        }
    }

    //更新使用者託管資料
    return new Promise((resolve, reject) => {
        wx.setUserCloudStorage({
            KVDataList: [{
                key: "score",
                value: JSON.stringify(score),
            }, {
                key: "timestamp",
                value: JSON.stringify(timestamp),
            }, ],

            success: function (res) {
                resolve();
            },
        })
    })
}            

獲取使用者資料userData,遊戲初始化時執行

//在開方資料域中編寫
wx.getUserInfo({
    openIdList: ['selfOpenId'],
    lang: '',
    success: function(res) {
        userData=res.data;
    },
})

二、根據同玩好友資料更新totalGroup

為了實現只對本週玩家分數進行排行的功能，totalGroup中只儲存本週玩家的資料；

function updateTotalGroup (){
    
    //按分數大小進行排序的排序函式
    function compare(obj1, obj2) {
        var score1 = parseInt(obj1.scroes);
        var score2 = parseInt(obj2.scroes);
        if (score1 > score2) {
            return -1;
        } else {
            return 1;
        }
    }

    wx.getFriendCloudStorage({
        keyList: ["score","timestamp"],
        success: function (res) {
        //先清空totolGroup
        totalGroup.splice(0,totalGroup.length);
        var data = res.data;

        for (let i = 0; i < data.length; i++) {
            if (data[i].KVDataList.length<2){
                continue;
            }
            //獲取得分的時間戳並判斷是否是本週，如果是則將資料存入totalGroup
            var timestamp=data[i].KVDataList[1].value;
            if (isCurrentWeek(timestamp)){
                var obj = {
                    key: i,
                    openid:data[i].openid,
                    name: data[i].nickname,
                    url: data[i].avatarUrl,
                    img: null,
                    scroes: data[i].KVDataList[0].value
                }
                totalGroup.push(obj);
            }
        }
        //排序及設定頭像
        totalGroup.sort(compare);
        for (let i = 0; i < totalGroup.length; i++) {
            const img = wx.createImage();
            img.src = totalGroup[i].url;
            totalGroup[i].img = img;
            totalGroup[i].key = i + 1;
        } 
        //渲染排行榜
        renderRank(totalGroup)//實現過程省略

    })
}

通過時間戳判斷分數是否是本週更新：

function isCurrentWeek(timestamp){
    if(timestamp==undefined){
        return false;
    }
    var date=new Date()，
    day=date.getDay()==0?7:date.getDate()，
    hours=date.getHours()，
    minutes=date.getMinutes()，
    seconds = date.getSeconds()，
    timefromSunday=(day*24*3600+hours*3600+minutes*60+seconds)*1000，//星期日凌晨0點到此時的毫秒數
    time=date.getTime()-timefromSunday;//1970年1月1人至上週日凌晨的毫秒數；

    return parseInt(timestamp)>time//若時間戳大於週日，則時間戳標誌的事件發生在本週；
}

三、顯示排行榜

在開方資料中渲染完排行榜後，在主域中可通過下面介面獲取在開方資料域中建立的canvas;

const openDataContext = wx.getOpenDataContext();
const sharedCanvas = openDataContext.canvas;