Ich habe ein gutes Beispiel gefunden, als ich ein Buch über die HTML5-Spieleentwicklung gelesen habe. Durch dieses Beispiel kann ich ein tieferes Verständnis der objektorientierten-Entwicklung erlangen. Das Ziel dieses Objekts besteht darin, ein Bild in einem CSS-Sprite in Leinwand zu zeichnen. Erstellen Sie zunächst ein SpriteSheet-Objekt. Der Code lautet wie folgt:
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);
};
}Verwenden Sie zuerst die neue Funktion (){}, um sicherzustellen, dass nur eine Instanz erstellt wird.
Als nächstes werden innerhalb des Objekts dadurch zwei Methoden und ein Attribut daran gebunden. Die Lademethode dient zum Laden des Bildes und übergibt zwei Parameter. Der erste Parameter sind die Bildinformationen, dh die Position und Größe des im Sprite zu zeichnenden Bildes sowie die Position und Größe auf der Leinwand. Achten Sie auf die Verwendung von Callback. Wenn das Bild geladen wird, wird die übergebene Callback-Funktion ausgeführt.
Die Zeichenmethode wird zum Zeichnen von Bildern verwendet, wobei der Kontext der Leinwand, die Bildobjektinformationen, die gezeichnet werden müssen, und die Bildposition übergeben werden. Die logische Struktur dieses Objekts ist relativ komplex. Die Grundidee besteht darin, die Lademethode anzupassen und das Laden der Bildinformationen über die Lademethode abzuschließen. Die Bildinformationen beziehen sich hier auf die Position, Größe usw. des Bildes im Sprite. Der Methodencode zur Verwendung dieses Objekts lautet wie folgt: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);
});
}Das obige ist der detaillierte Inhalt vonTeilen Sie einfache Beispiele für die objektorientierte HTML5-Spieleentwicklung. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!
