HTML5 オブジェクト指向ゲーム開発の簡単な例を共有する

HTML5ゲーム開発関連の本を読んでいるときに、オブジェクト指向開発をより深く理解できる良い例を見つけました。このオブジェクトが達成したいことは、CSS スプライト内の画像を 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(){} を使用して、インスタンスが 1 つだけ作成されるようにします。

次に、オブジェクト内で、2 つのメソッドと

プロパティ が this を通じてバインドされます。 load メソッドは画像を読み込む役割を果たし、最初のパラメータは画像情報、つまりスプライトに描画する画像の位置とサイズ、およびキャンバス上の位置とサイズを渡します。コールバックの使用法に注意してください。ここでは、画像がロードされるときに、渡された callback 関数 が実行されます。

draw メソッドは、キャンバスのコンテキスト、描画する必要がある画像オブジェクト情報、および画像の場所を渡して画像を描画するために使用されます。

このオブジェクトの論理構造は比較的複雑です。基本的な考え方は、load メソッドをカスタマイズし、load メソッドを通じて画像情報の読み込みを完了することです。ここでの画像情報とは、スプライト内の画像の位置や大きさなどを指します。

このオブジェクトを使用するためのメソッドコードは次のとおりです:

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 中国語 Web サイトの他の関連記事を参照してください。