HTML5 Object-oriented game development Simple example Summary

Source: Internet
Author: User

A good example is found in reading a book about the development of a HTML5 game, which allows for a more in-depth understanding of object-oriented development. This object is implemented by drawing an image from a CSS sprite into the canvas. First create a Spritesheet object with the following code:

var spritesheet = new function () {This.map = {};this.load = function (spritedata,callback) {this.image = new image (); this.im Age.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);};}

The new function () {} is used first, guaranteeing that only one instance will be created.

Next to the object, it is bound to two methods and a property through this. The Load method loads the image, passes two parameters, and the first parameter is the image information, the position of the image to be drawn in the sprite, and the size of the position on the canvas. Note the use of callback, which is this.image.onload = Callbak; Executes the incoming callback function when the image is loaded.

The draw method is used to draw the image, the context of the canvas, the image object information to be drawn, and the location of the image.

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

The method code for using the 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);});

Here, using the Load method, first pass in the relevant data of the desired section of the graph, and then call the object's draw method in the callback function to draw the image.

HTML5 Object-oriented game development Simple example Summary

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.