用野狗開發實時遊戲排行榜

NO IMAGE
1 Star2 Stars3 Stars4 Stars5 Stars 給文章打分!
Loading...

建立wilddog應用

新增應用

填寫應用名稱和應用ID就可以建立了。應用ID需要全網唯一

建立成功之後就可以在控制面板看到應用了.

控制面板的應用

1.引入SDK

<script  = "https://cdn.wilddog.com//client/current/wilddog.js" ></script>

2.建立引用

ref =  Wilddog("https://<appId>.wilddogio.com/")
//將<appId>替換成申請的應用ID
ref =  Wilddog("https://fullstack-top-demo.wilddogio.com/")

因為wilddog是以key-value的形式儲存資料,建立引用會定位到根節點。若要定位到子節點,只需在url後追加路徑即可,例如:

user_ref =  Wilddong('https://fullstack-top-demo.wilddogio.com/user/')

野狗也提供了child()方法來獲取子節點的引用。

ref =  Wilddog("https://fullstack-top-demo.wilddogio.com/")
user_ref = ref.child('user')

這兩種方法是一樣的效果

1.寫入資料。
建立 Wilddog 引用之後,就可以通過set() 往節點中寫入任何合法的JSON資料

user_ref.set({
name : 'lixiaohao',
age  : ,
blogurl : 'ghost.fullstack.top'
})

寫入資料

2.讀取資料
讀取資料是通過繫結回撥函式來實現的。假設我們按照上面的程式碼寫入了資料,那麼就可以使用on()函式來讀取user物件的值。

user_ref.on('value', function(datasnapshot) {
console.dir(datasnapshot.val());   // 結果會在 console 中列印出剛剛set的物件
})

讀取資料

回撥函式的引數是一個DataSnapshot物件型別,呼叫它的val()函式得到資料物件。上邊這個例子中,value這個事件會在初次讀取到資料的時候被觸發一次,此後每當資料發生改變,都會被觸發。

若要只讀取一次,不在之後每次資料發生變化的時候觸發回掉函式,可以使用once()函式替代on()函式。

3.使用者認證

**絕大多數應用都需要一套終端使用者賬號體系。對終端使用者進行唯一標識之後,才能對使用者進行個性化的使用者體驗,控制使用者對資料的訪問許可權。提供終端使用者唯一標識的過程被稱為終端使用者認證。WildDog為開發者提供了多種使用者認證方式。
野狗提供了多種使用者登入方式,具體可檢視 官方文件**

這裡要注意的一點就是,第三方登入一定要設定OAuth跳轉域名白名單

白名單

當時因為這個沒有配置這個白名單折騰了一下午。不過在本地環境下用localhost127.0.0.1 訪問的話不會有影響。

好了,瞭解這3點就可以開始做排行榜了。

遊戲排行榜

我們可以去網上找一個html5的小遊戲,稍微研究下程式碼應該就可以找到遊戲成績的結算方法,在遊戲結束時給我們的refset()一個值就可以啦。

這裡以我寫過的一個demo為例

 //建立根節點的引用
wilddog =  Wilddog(https://<appId>.wilddogio.com/");
var wilddogAuthData; //野狗使用者登入資訊
//監聽登入狀態變化
wilddog.onAuth(function() {
//如果已登入則將使用者資料儲存到全域性變數方便呼叫
wilddogAuthData = data;
(wilddogAuthData) {
console.log(wilddogAuthData);
}  {
//未登入則呼叫野狗登入方法,這裡只是簡單的使用微博授權登入,其他登入方法檢視官方文件。
// 彈出新浪微博OAuth認證
wilddog.authWithOAuthRedirect("weibo", authHandler);
}
});
// 建立一個回撥來處理終端使用者認證的結果,微博登入成功後的回撥方法
function authHandler(error, data) {
(error) {
console.log("Login Failed!", error);
}  {
console.log("Authenticated successfully with payload:", data);
}
}

授權登入成功後可獲得使用者資訊

登入成功後的獲得的使用者資訊

獲取遊戲結果

在遊戲結束方法里加入

//打破自己的記錄才上傳,一般html5遊戲會將最佳成績存在localstorage中,根據實際情況做修改即可
(score > bestScore){
(!wilddogAuthData){alert('你沒有使用微博賬號登陸,無法計入成績!');return false;}
ts =  Date().getTime();
wilddogRef.child('rank').child(wilddogAuthData.auth.uid).({
//這裡的欄位根據自己需求定義
uid:    wilddogAuthData.auth.uid
//為了儘量避免偽造資料這裡將score做加密處理並放在偽造的token欄位裡混淆視聽,取出成績時再解密比較token與score欄位即可,並不能從根本上防止作弊。
token:  sjcl.encrypt(ts ,score ),
score:  score,
ts:     ts,
rank:   t  (3000000000000-ts),
UA:     navigator.userAgent
});
}

rank欄位用於orderByChild()方法,該方法對字串按照字典順序來排的。這裡的t是在score前面補0到6位數方便排序 ,score=100 則 t=000100,這樣組合之後可以確定高分在前,分數相同則先達到該分數的使用者在前
獲取排行榜

//獲取資料,並按照物件中的 rank 欄位排序返回結果集中的後10位
wilddogRef.child(k').orderByChild(k').limitToLast().on("value", function(users) {
html = [];
users.forEach(function (user) {
item = user.();
//比較score與加密的'score',不匹配則忽略
(sjcl.decrypt(item.ts ,item.token) == item.score) {
// .orderByChild()方法是升序,所以這裡使用的是'unshift'方法
html.unshift('<li><span class="ranknum"></span><i class="ran-1"></i>[站外圖片上傳中……()]<div class="info"><span class="name">'  item.name  '</span></div><span class="score">'  item.score  ' 分</span></li>');
}
});
document.getElementById('rank-list').innerHTML = html.join('');
});
完成了!

實時遊戲排行榜

有興趣的同學可以玩一下,完全實時的哦。簡單demo沒有做過多優化,開啟頁面後會直接彈出微博授權頁。 遊戲傳送門
這是一篇轉載的文章。原作者是:李昊。點選進入 李昊個人部落格

想研究原始碼之後移植到自己的應用上的小夥伴,plz 戳這裡,李昊哥哥的github,歡迎star。

相關文章

軟體開發工具 最新文章