今天繼續學習phaser.js。上周寫的學習教程主要內容是創建遊戲場景，遊戲中的顯示對象，按鈕對象的使用以及如何在不同屏幕大小中完美適配。這篇博客以介紹遊戲榜單的渲染更新為主。

　　　　代碼地址：https://github.com/dreamITGirl/phaser，具體文件為Billboard.js。

　　　　這個學習過程是以一個類似於頭腦風暴的遊戲為實例，來學習phaser的框架，會有很多API講不到，可自己去查，去學習。

　　　　由於考慮到後面的需求，所以現在將文件的文件名改了，demo01.js改為了load.js（用於加載圖片和精靈圖），增加了game.js（公共的函數以及遊戲場景的創建）

　　　　創建文本文字

　　　　這裏可以看一下創建文本對象的時候需要的參數，有五個參數，第一個一般是遊戲對象，一般指的是game對象。x代表文字在x方向上的位置，y代表文字在y方向的位置。text--想要渲染的文字內容，style-文字樣式

　　　　更改文本內容

　　　　在phaser.js中有一個setText的方法，但是，也可以直接給這個文本對象的text屬性賦值。建議輸出一下創建的文本對象的屬性。這樣，能更熟悉的運用這個文本對象。

　　　　具體使用可以看一下代碼；這裏我把Billboard的代碼貼出來，具體的調用可以在gitHub中看.

/*如何將渲染遊戲中的文字
 
*/
//需求:榜單排名需要每隔一段事件就要更新，這裏我們就在update或者render函數中改變排名內容;
//update和render函數是每秒就會調一次，但它並不會影響整個遊戲的內存
function Billboard(){
    var self = this;//在ajax中的this並不會指向我們想要的對象
    this.init = function(){
        
        this.listArr = []
//        this.load.image(‘score-list‘,‘./images/score-list.png‘);//加載圖片，需要放在demo01.js中的load函數裏統一加載，否則加載不出來
 

    }
    this.preload = function(){
        loadbg()//加載背景
        /*增加遊戲所需要的圖片,使用的demo01.js封裝的函數*/
        addImage(24,120,‘score-list‘,594,879)
        addSprite(24,37,‘back‘,50,50,function(){
            game.state.start(‘Load‘)//點擊榜單可進入榜單頁面
        })
        /*var listbg = game.add.image(24*bl,120*bl,‘score-list‘);
        listbg.width = 594 *bl;
        listbg.height = 879 *bl;*///這個函數是addImage未封裝的內容。
        this.loadText()
        
    }
    this.update = function(){
        setTimeout(function(){
            $.ajax({
                type:"get",
                url:"./json/billboard.json",
                async:true,
                success:function(data){
                    for(var i=0;i<data.length;i++){
                        if(i<self.listArr.length){
                            self.listArr[i][0].text= data[i].ranking;
                            self.listArr[i][1].text= data[i].name;
                            self.listArr[i][2].text= data[i].score;
                            self.listArr[i][3].text= data[i].questionNum+‘ / ‘+data[i].useTime+‘ / ‘+data[i].rightRadio;
                        }else{
                            self.listArr[i] = [
                                self.addText(62,i,data[i].ranking,30,‘#6CDDFA‘),
                                self.addText(122,i,data[i].name,30,‘#666‘),
                                self.addText(250,i,data[i].score,30,‘#666‘),
                                self.addText(383,i,data[i].questionNum+‘ / ‘+data[i].useTime+‘ / ‘+data[i].rightRadio,24,‘#666‘)
                            ]
                        }
                    }
                }
            });
        },2000)
        
    }
    this.addText = function(x,i,text,fontSize,color){
        var top =( 200+81*i+(80-fontSize)/2)*bl;
        var text = this.add.text(x*bl,top,text,{
            fill:color,
            fontSize:(fontSize *bl),
            fontWeight:‘normal‘,
        })//有四個參數，this.add.text(x,y,text,style)//這四個參數分別代表了文本的x方向的位置，y方向的位置，當前的文本內容,樣式對象;渲染的字體基本都是默認加粗的字體。
        return text
    }
    this.loadText = function(){
        /*用ajax請求榜單數據*/
        $.ajax({
            type:"get",
            url:"./json/version.json",
            async:true,
            success:function(res){
                for (var i=0;i<res.length;i++) {
                    self.listArr[i] = [
                        self.addText(62,i,res[i].ranking,30,‘#6CDDFA‘),
                        self.addText(122,i,res[i].name,30,‘#666‘),
                        self.addText(250,i,res[i].score,30,‘#666‘),
                        self.addText(383,i,res[i].questionNum+‘ / ‘+res[i].useTime+‘ / ‘+res[i].rightRadio,24,‘#666‘)
                    ]
                }
            },
            error:function(err){
                console.log(JSON.stringify(err))
            }
        });
    }
    
}

phaser小遊戲框架學習（二）