HTML5 オブジェクト指向ゲーム開発の簡単な例を共有する-H5 チュートリアル-php.cn

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

黄舟

リリース： 2017-03-16 16:02:56

オリジナル

1454 人が閲覧しました

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