HTML5面向對象的游戲開發簡單實例總結

在閱讀一本HTML5游戲開發相關書籍時發現一個很好的例子，通過這個例子可以對面向對象的開發進行更深入的理解。這個對象要實現的是：將一個CSS sprite中的圖像繪製到canvas中。首先創建一個SpriteSheet對象，代碼如下：

var SpriteSheet = new function(){  
    this.map = { };  
    this.load = function(spriteData,callback){  
        this.image = new Image();  
        this.image.onload = callback;  
        this.image.src = "images/sprites.png";  
    };  
    this.draw = function(ctx,sprite,x,y,frame){  
        var s = this.map[sprite];  
        if (!frame) {  
            frame = 0;  
        };  
        ctx.drawImage(this.image, s.sx+frame*s.w, s.sy, s.w, s.h, x, y, s.w, s.h);  
    };  
}  

首先使用了new function(){}，保證了只會有一個實例被創建。

接下來對象內部，通過this為其綁定了兩個方法和一個屬性。load方法起到載入image的作用，傳遞兩個參數，第一個參數是圖像信息，即要繪製的圖像在sprite中的位置大小以及在畫布上的位置大小。註意callback的用法，這裡面的this.image.onload = callbak;當圖像載入完成後執行傳入的回調函數。

draw方法用來進行圖像的繪製，傳入canvas的上下文環境，需要繪製的圖像對象信息以及圖像位置。

這個對象的邏輯構造相對複雜，基本的思路就是自定義load方法，通過load方法完成圖像信息的載入。這裡的圖像信息指的是圖像在sprite中的位置、大小等。

使用該對象的方法代碼如下：

function startGame(){  
    SpriteSheet.load({  
        ship:{sx:0, sy:0, w:18, h:35, frames:3}  
    },function(){  
        SpriteSheet.draw(ctx,"ship",0,0);  
        SpriteSheet.draw(ctx,"ship",100,50);  
        SpriteSheet.draw(ctx,"ship",150,100,1);  
    });  
}  

這裡使用load方法，首先傳入所需切圖部分的相關數據，接下來在回調函數中調用對象的draw方法進行圖像繪製。

web前端/H5/javascript學習群：250777811

歡迎關註此公眾號→【web前端EDU】跟大佬一起學前端！歡迎大家留言討論一起轉發