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方法進行影像繪製。

以上是HTML5物件導向的遊戲開發簡單實例分享的詳細內容。更多資訊請關注PHP中文網其他相關文章！