ranking.js

var Ranking = pc.createScript('ranking');
var ncmb = new NCMB("<Enter your Application Key>", "<Enter your Client Key>");//ncmbオブジェクト作成
var username;//ユーザーネームを格納
var isreward = false;//自身がランキングに載ったかどうか
var self;//自分自身

// initialize code called once per entity
Ranking.prototype.initialize = function() {
    self = this;//自分自身を格納
        if(!localStorage.getItem("name")){//Webストレージ上に自身の名前が登録されていなかったら
        while(!username){//usernameが格納されるまで回す
            username = window.prompt("Input your name");//window.promptで名前を取得
        }
        localStorage.setItem("name",username);//Webストレージに格納
    }else{
        username = localStorage.getItem("name");//Webストレージ上にあればそのまま利用する
    }
    
    this.app.on("game:gameover", function () {//game:gameover時のイベントハンドラ
        //ランキングメソッドを呼ぶ　スコープが変化しthisが変わるのでselfを使用
        //ui-Gameoverスクリプトがスコアを保持しているので参照して取得
        self.ranking(self.entity.children[2].script.uiGameover._score,6);
    });
    
    this.app.on("game:start", function(){//game:startのイベントハンドラ
        if(document.getElementById("result")){//もしresultエレメントが存在したら
            document.getElementById("result").remove();//resultエレメント削除
        }
    });
};

Ranking.prototype.ranking = function(score,numofresult){//ランキング登録と取得用メソッド　第一引数はスコア,第二引数はランキングの取得数
    isreward = false;//実行されるたび最初に初期化する
    
    var TestClass = ncmb.DataStore("TestClass");//ncmbのTestClass作成

        // データストアへ名前とスコアを登録
        var testClass = new TestClass();
        testClass.set("score", score);
        testClass.set("name",username);
        testClass.save()
         .then(function(){
            // 保存に成功した場合の処理
          })
         .catch(function(err){
            // 保存に失敗した場合の処理
          });
    
    //HTMLリソースのロード及び初期化
     var htmlAsset = this.app.assets.find('index');
     var div = document.createElement('div');
     div.innerHTML = htmlAsset.resource;
     div.id = "result";//idをresultに指定
     document.body.appendChild(div);
    htmlAsset.on('load', function () {
     div.innerHTML = htmlAsset.resource;
     });

     // CSSリソースのロード及び初期化
     var cssAsset = this.app.assets.find('style');
    var style = document.createElement('style');
     document.head.appendChild(style);
     style.innerHTML = cssAsset.resource;
     cssAsset.on('load', function() {
     style.innerHTML = cssAsset.resource;
     });
    
    //ランキングをDBから降順で取得
    TestClass.order("score", true)
         .limit(numofresult)
         .fetchAll()
         .then(function(results){
        
            //ランキング取得後の処理
            var tmp = 1;//ランキング用の雑用変数
            for(var i = 0;i < numofresult;i++){//取得ぶん回す
                if(results[i].score <= score){//もし取得したスコアより自分のスコアのほうが高かったら
                    if(!isreward){//これがはじめての掲載なら
                        var myscoreelement = document.createElement("p");//自身のスコアエレメント作成
                        myscoreelement.classList.add("myscore");
                        document.getElementById("ranking").appendChild(myscoreelement);//rankingに追加
                        myscoreelement.innerHTML = i+tmp +" : "+username+" | "+score;
                        isreward = true;
                        tmp++;
                    }
                }
                var rankingelement = document.createElement("p");//ランキング用のエレメント作成
                document.getElementById("ranking").appendChild(rankingelement);
                rankingelement.innerHTML = i+tmp +" : "+results[i].name+" | "+results[i].score;

            }
          })
         .catch(function(err){
            //エラー時の処理
          });
    
    
};


// swap method called for script hot-reloading
// inherit your script state here
// Ranking.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/