将游戏成绩传到排名页面html,用野狗开发实时游戏排行榜
創建wilddog應用
填寫應用名稱和應用ID就可以創建了。應用ID需要全網唯一
創建成功之后就可以在控制面板看到應用了.
1.引入SDK
2.創建引用
ref = Wilddog("https://.wilddogio.com/")
//將替換成申請的應用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跳轉域名白名單
當時因為這個沒有配置這個白名單折騰了一下午。不過在本地環境下用localhost 或127.0.0.1 訪問的話不會有影響。
好了，了解這3點就可以開始做排行榜了。
游戲排行榜
我們可以去網上找一個html5的小游戲，稍微研究下代碼應該就可以找到游戲成績的結算方法，在游戲結束時給我們的refset()一個值就可以啦。
這里以我寫過的一個demo為例
//創建根節點的引用
wilddog = Wilddog(https://.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('
[站外圖片上傳中……()]'+ item.name +''+ item.score +' 分');}
});
document.getElementById('rank-list').innerHTML = html.join('');
});
完成了!
有興趣的同學可以玩一下，完全實時的哦。簡單demo沒有做過多優化，打開頁面后會直接彈出微博授權頁。 游戲傳送門
這是一篇轉載的文章。原作者是:李昊。點擊進入 李昊個人博客。
想研究源碼之后移植到自己的應用上的小伙伴,plz 戳這里,李昊哥哥的github,歡迎star。
總結
以上是生活随笔為你收集整理的将游戏成绩传到排名页面html,用野狗开发实时游戏排行榜的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： javascript设计模式系列 - L
- 下一篇： 用户注意到用户计算机中千兆位网卡,为何你