Home > Web Front-end > H5 Tutorial > body text

Sharing simple examples of HTML5 object-oriented game development

黄舟
Release: 2017-03-16 16:02:56
Original
1407 people have browsed it

I found a good example while reading a HTML5 related book on game development. Through this example, I can have a deeper understanding of object-oriented development. What this object wants to achieve is: drawing an image in a CSS sprite into canvas. First create a SpriteSheet object, the code is as follows:

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);
	};
}
Copy after login

First use new function(){} to ensure that only one instance will be created.

Next, inside the object, two methods and a property are bound to it through this. The load method plays the role of loading the image and passes two parameters. The first parameter is the image information, that is, the position and size of the image to be drawn in the sprite and the position and size on the canvas. Pay attention to the usage of callback. This.image.onload = callbak; when the image is loaded, the passed in callback function is executed.

The draw method is used to draw images, passing in the context of the canvas, the image object information that needs to be drawn, and the image position.

The logical structure of this object is relatively complex. The basic idea is to customize the load method and complete the loading of image information through the load method. The image information here refers to the position, size, etc. of the image in the sprite.

The method code for using this object is as follows:

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);
	});
}
Copy after login

The load method is used here. First, the relevant data of the required cutting part is passed in, and then the draw method of the object is called in the callback function. Image drawing.

The above is the detailed content of Sharing simple examples of HTML5 object-oriented game development. For more information, please follow other related articles on the PHP Chinese website!

source:php.cn
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template
About us Disclaimer Sitemap
php.cn:Public welfare online PHP training,Help PHP learners grow quickly!