Partager des exemples simples de développement de jeux orientés objet HTML5

J'ai trouvé un bon exemple en lisant un livre sur le développement de jeux HTML5 Grâce à cet exemple, je peux avoir une compréhension plus approfondie du développement orienté objet. Ce que cet objet veut réaliser, c'est : dessiner une image dans un sprite CSS dans canvas. Créez d'abord un objet SpriteSheet, le code est le suivant :

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);
	};
}

Utilisez d'abord new function(){} pour vous assurer qu'une seule instance sera créée.

Ensuite, à l'intérieur de l'objet, deux méthodes et un attribut lui sont liés par ce biais. La méthode de chargement joue le rôle de chargement de l'image et transmet deux paramètres. Le premier paramètre est les informations sur l'image, c'est-à-dire la position et la taille de l'image à dessiner dans le sprite et la position et la taille sur le canevas. Faites attention à l'utilisation du rappel. This.image.onload = callbak; lorsque l'image est chargée, la fonction de rappel transmise est exécutée.

La méthode draw est utilisée pour dessiner des images, en passant dans le contexte du canevas, les informations sur l'objet image qui doivent être dessinées et l'emplacement de l'image.

La structure logique de cet objet est relativement complexe. L'idée de base est de personnaliser la méthode de chargement et de terminer le chargement des informations sur l'image via la méthode de chargement. Les informations sur l'image font ici référence à la position, à la taille, etc. de l'image dans le sprite.

Le code de la méthode pour utiliser cet objet est le suivant :

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);
	});
}

La méthode de chargement est utilisée ici. Tout d'abord, les données pertinentes de la pièce coupante requise sont transmises, puis les données pertinentes de la pièce coupante requise sont transmises. draw de l'objet est appelé dans la méthode de rappel pour le dessin d'image.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!