Basic HTML5 Game Development Technology

Basic HTML5 Game Development Technology

With the final finalization of the HTML5 standard, HTML5 is expected to become a popular platform in the game development field. HTML5 games can run on computers, smartphones, and tablets including the iPhone and iPad series, and are currently the best implementation solution for cross-platform application development. This article is based on the content in the book [HML5 Canvas game development practices]. It is the basic content for understanding and learning HTML5 game development, hope to help those who are devoted to game development like bloggers!

Object-Oriented Programming in JavaScript

For game development, Object-Oriented Programming (OOP) is an important and necessary method. Therefore, before learning about HTML5 game development, you should first understand Object-Oriented Programming in JavaScript. JavaScript is an object-based language, but it is not a real object-oriented programming language, because the Class concept does not exist in JavaScript syntax. Next we will analyze and solve the problem of object-oriented implementation in JavaScript, such as encapsulation and inheritance.

In JavaScript, a function is a class)

// Declare a function MyClass () {}// instantiate an object var cls1 = new MyClass ();

You can use the this keyword to add attributes to the class.

// Declare a class and define its constructor function MyClass (name, age) {this. name = name; this. age = age ;}; // instantiate an object var cls1 = new MyClass ("Zhang San", 20) // output the two cls1 attribute values alert ("name =" + cls1.name + "&" + cls1.age)

You can use the prototype attribute to add methods for classes.

// Declare a class and define its constructor function MyClass (name, age) {this. name = name; this. age = age ;}; // Add the MyClass method to MyClass. prototype = {toString: function () {alert ("name =" + this. name + "&" + this. age)}, getName: function () {alert ("name =" + this. name)}, getAge: function () {alert ("age =" + this. age )}};

Use the apply method to inherit attributes and Methods

// Define a parent lelefunction People () {this. type = "person"}; // defines a method People for the parent class. prototype = {getType: function () {alert ("type =" + this. type) }}; // defines a subclass of Studentfunction Student (name, age, sex) {// inherits the property type People. apply (this, arguments); this. name = name; this. age = age; this. sex = sex ;}; // declare a Student instance var stu = new Student ("James", 20, "male"); // output typealert (stu. type) // next let's take a look at how to inherit the parent class method. The inherited parent class method is mainly achieved by repeating the prototype of the parent object, such/ /Redefine the subclass Studentfunction Student (name, age, sex) {// inherit the property type People of the parent class. apply (this, arguments); // method that inherits the parent class, slightly abstracted var prop; for (prop in People. prototype) {var proto = this. constructor. prototype; if (! Proto [prop]) {proto [prop] = People. prototype [prop];} proto [prop] ["super"] = People. prototype;} // attribute definition this. name = name; this. age = age; this. sex = sex ;}; // instantiate the Student object var stu = new Student ("James", 20, "male"); stu. getType ();

Static class implementation

Function staticClass () {staticClass. name = "James"; staticClass. toString = function {alert ("name =" + staticClass. name) };}; alert (staticClass. name); staticClass. toString ();

Canvas Basics

HTML5 provides new features such as images, videos, audios, forms, locations, local databases, offline storage, and websocket. For HTML game development, we focus on images, audios, local databases, and websockets. First, let's take a look at the basic content of Canavs plotting.

Canvas is a Canvas provided by HTML5. It allows us to draw images directly on HTML. Therefore, Canvas can be used as a basic element for HTML5 game development, that is, the underlying layer of the HTML5 game engine is driven by the Canvas Element. Canvas itself does not have the ability to draw, and JavaScript is required to implement the drawing function. To use the Canvas Element, you only need to add the canvas tag to the webpage, as shown in figure

Next, we use JavaScript to obtain the Canvas and use relevant APIs to initialize the drawing environment.

// Obtain the Canvas Element var canvas = document. getElementById ('mycanvas '); // check the validity of the canvas if (canvas & canvas. getContext) {// obtain the current context var ctx = canvas. getContext ('2d ')}

Currently, Canvas only supports 2D plotting. Therefore, the parameter can only be 2d. Because the APIs for Cnavas plotting are encapsulated in the ctx instance, all the following operations are implemented based on ctx:

Draw a line using Canvas

// Set the ctx line width. lineWidth = 10; // set the paint brush color ctx. strokeStyle = "red"; // create a path ctx. beginPath (); // path start point ctx. moveTo (10, 10); // path end ctx. lineTo (); // draw the path ctx. stroke ();

Use Cnavas to draw a rectangle

// Set the ctx line width. lineWidth = 5; // set the paint brush color ctx. strokeStyle-"red" // create the path ctx. beginPath (); // draw a rectangle ctx. strokeRect (10, 10, 70, 40 );

Or

// Define the rectangle ctx. rect (10, 10, 70, 40); // draw the rectangle ctx. stroke ();

To fill the rectangle

// Create the path ctx. beginPath () // draw the rectangle ctx. fillRect)

Draw circles using Canvas

// Create the ctx path. beginPath (); // defines the circle ctx. arc (100,100, 50, 0, 360 * Math. PI/180, true); // draw the circle ctx. stroke ();

Similarly, you can use fill to fill the painting.

// Create the ctx path. beginPath (); // defines the circle ctx. arc (100,100, 50, 0, 360 * Math. PI/180, true); // draw the circle ctx. fill ();

Use Canvas to draw a rounded rectangle

The arcTo function and lineTo are required to draw the rounded rectangle.

// Create the ctx path. beginPath (); ctx. moveTo (40, 20); ctx. lineTo (100,20); ctx. arcTo (100,20, 120,40, 20); ctx. lineTo (120,70); ctx. arcTo (, 90, 20); ctx. lineTo (40, 90); ctx. arcTo (20,90, 100,70, 20); ctx. lineTo (20, 40); ctx. arcTo (20, 20, 40, 20); // draw the rounded rectangle ctx. stroke ();

Use Canvas to draw Complex Images

In HTML5, you can use the quadraticCurveTo function to draw a secondary besell curve and the bezierCurveTo function to draw a cubic besell curve. For more information about the code, see the API documentation.

Draw text using Canvas

// Set the font ctx. font = "30px Arial"; // draw the text ctx. strokeText ("Hello HTML5 );

Use Canvas to draw images

Use the drawImage function to draw images. Its prototype is as follows:

drawImage(image,dx,dy);

Here, image can be a tag in HTML or an Image object in JavaScript. For example

// Define an img tag

Next, use getElementById to obtain the image data and draw it out.

var img=document.getElementById("img_source");ctx.draw(img,200,200);

If JavaScript code is used directly

var img=new Image();img.src="http://www.bkjia.com/uploads/allimg/150324/0434403V1-0.jpg";ctx.draw(img,200,200)

Image Translation

Use the translate function to implement horizontal and vertical translation.

Image Rotation

Use the rotate function for rotation. Note that the input parameter is a radian.

Scaling of images

Scale function is used to implement scaling. If the parameter is negative, it indicates turning in this direction.

Advanced graphics Effects

This section describes linear gradient, radial gradient, color inversion, and gray scale.

Linear Gradient

// Create a linear gradient container var grd = ctx. createLinearGradient (,); // Add the grd color. addColorStop (0.2, "#00ff00"); grd. addColorStop (0.8, "# ff0000"); // apply the gradient ctx. fillStyle = grd;

Radial Gradient

// Create a radial gradient container var grd = ctx. createRadialGradient (100,100, 10,100,100, 50); // Add the grd color. addColorStop (0, "#00ff00"); grd. addColorStop (, "# ff0000"); // apply the gradient ctx. fillStyle = grd;

Color Inversion

Traverse each pixel and reverse the RGB Value

Grayscale

Grayscale formula: gary = red * 0.3 + green * 0.59 + blue * 0.11

This is the basic content. If you need html5.