HTML5 game development--"static and dynamic" combination (ii)-using map blocks to make large maps & preliminary study Lufylegend

First, the preface

This tutorial will show you how to use the HTML5 to make a large map of the small map, and how to use the existing advanced HTML5 game development Library Lufylegend.js game development.

First let us understand how to use HTML5 to achieve animation, after all, "static and dynamic Combination" is the first move and then static. Looking at the contents of the previous chapter, perhaps you have a preliminary understanding of HTML5 implementation Animation:

HTML5 game Development--"dynamic" combination (i):

http://blog.csdn.net/yorhomwang/article/details/8301451

Second, the realization of HTML5 with small map block into a large map

As early as the previous chapter I have introduced to you, many game maps are made of small map pieces. So since those games can be achieved through as or other programming languages, our HTML5 are no less inferior to them. And here's the picture I'm going to be preparing for you today:

Map.png

This picture specifically from where I do not know, but it is for us to serve, do good things do not name, so for the moment to put his source aside, we only know it is called map.png on OK;

The light is not good, get point code.

A few lines of code in Map.js:

var i;

var J;

Window.onload = function () {Gamemap ();}
var mapimg = new Image (); var map = [[2,2,3,3,0,0,2,2,2,3,3,3,2], [2,0,3,3,0,0,0,0,0,0,0,0,0], [2,0,0,0,0,0,0,0,0,0,0,0,2], [2,0,0,0,0,0,0,0,0 , 0,3,0,2], [1,3,0,0,0,0,0,0,0,0,2,0,2], [1,3,0,0,0,0,2,2,3,3,2,0,2], [2,1,1,1,0,0,0,0,0,0,0,0,3], [ 2,1,1,1,0,0,0,0,0,0,0,0,3], [0,0,0,1,0,0,1,1,2,2,3,0,0], [2,0,0,1,0,0,0,0,0,0,0,0,0], [3,0,0,1,1,1,0,0,1,1,1,0,1]
, [3,0,0,0,0,0,0,0,0,0,0,0,1], [2,2,2,2,2,3,3,3,0,0,1,1,1],];
	Creates a two-dimensional array function gamemap () {var canvas = document.getElementById ("map") that makes up a map;
	
	var context = Canvas.getcontext ("2d");	

	MAPIMG.SRC = "./image/map.png";
		Mapimg.onload = function () {context.fillrect (0, 0, 416, 416);
			Draw a rectangle of length 416, Width 416 for (i = 0; i < i++) {for (j = 0; J < + j) {Drawtile (i*32, j*32, Map[j][i]);
	}//Loop call function to draw map until end of Painting}} function Drawtile (x, y, type) {var canvas = document.getElementById ("map");
	var context = Canvas.getcontext ("2d"); Context.draWimage (mapimg, type*32, 0, X, y, 32, 32); }//function to draw a map

A few lines of code in HTML:

<! DOCTYPE html>
 



Now the form is equivalent to I said an inexplicable English, and I will be the next to speak from the translation. First, the code in HTML is equal to what I said, "Hello", which is understood by the rural people, so it is not explained. Of course not to rule out that some friends are inadvertently forced to come here, if this kind of friends interested in this but there is not understand, in the next may also be able to provide you with some services:

1. Chinese friends see:http://www.w3school.com.cn/, the above has detailed programming introduction

2.Foreign friends: http://www.w3schools.com/ , the above detailed introduction of the programming

P.S. In the next is not to advertise, purely sincere want to help everyone. 



Come to the point, although the words are pulled aside, but I think some students who are struggling to study still linger in those code. So do not consume everyone's interest, next to let me use my "nine" inch not rotten tongue to all the meaning of this code.

Frist, I've defined two variables J and I for determining the map block in the map array, which is very vague, and you will know it at the end. As follows:


var i;
var J;
Then, I use the window.onload to make a call to the drawing map function. There's not much to say here, because the main thing is not this. As follows:


Window.onload = function () {
	gamemap ();
}
Next is the mapimg and map array we built to hold the pictures. In an array of maps, 0,1,2,3 represent different picture styles, but in fact, the only use of a picture, this picture is that we do a good job of map.png, in the following explanation, we will understand how this is done. The following code:


var mapimg = new Image ();
var map = [
	[2,2,3,3,0,0,2,2,2,3,3,3,2],
	[2,0,3,3,0,0,0,0,0,0,0,0,0],
	[2,0,0,0,0,0,0,0,0,0,0,0,2],
	[2,0,0,0,0,0,0,0,0,0,3,0,2],	
	[1,3,0,0,0,0,0,0,0,0,2,0,2],
	[1,3,0,0,0,0,2,2,3,3,2,0,2], [
	2,1,1,1,0,0,0,0,0,0,0,0,3],
	[ 2,1,1,1,0,0,0,0,0,0,0,0,3],
	[0,0,0,1,0,0,1,1,2,2,3,0,0],
	[2,0,0,1,0,0,0,0,0,0,0,0,0],
	[ 3,0,0,1,1,1,0,0,1,1,1,0,1],
	[3,0,0,0,0,0,0,0,0,0,0,0,1],
	[2,2,2,2,2,3,3,3,0,0,1,1,1],
];
To create a two-dimensional array that makes up a map
 

 
It seems to be ready now, but the core is missing, so I used the Gamemap () method with the Drawtile () method. So recreate the core content:

function Gamemap () {
	var canvas = document.getElementById ("map");
	var context = Canvas.getcontext ("2d");
	
	MAPIMG.SRC = "./image/map.png";	

	Mapimg.onload = function () {
		context.fillrect (0, 0, 416, 416);
		Draw a rectangle of length 416, Width 416 for

		(i = 0; i < i++) {for
			(j = 0; J < + j) {
				drawtile (i*32, j*32, Map[j][i]); 
  
   }
		//Loop call function to draw map until end of painting
	}
}

function Drawtile (x, y, type) {
	var canvas = document.getElementById ("map");
	var context = Canvas.getcontext ("2d");
	Context.drawimage (mapimg, type*32, 0, N, x, y, triple);
}
The function of drawing a map

  
 
First in Gamemap () in the next take out <body> <canvas> ID, and then use mapimg.src= "", define the picture to be displayed, specific canvas display picture can go to W3cschool to see, Or go to my last article to see, here is not much to say. and then paint. First I drew a rectangle and I knew it by looking at the annotation. And then into my favorite loop for. Because you want to draw a 13*13 map, loop It 13 times, and then loop through the loop so I and J traverse the array map, and when I is 0 o'clock, the value of J corresponds to the following:




  Td>0 
     ]

 
 
 
  
 
   
 
    
 loop count 
 
    
 I value 
 
    
 J's value 
 
   
 
   
 
    
 1 
 
    
 0
 
    
 0 
 
   
 
   
 
    
 2 
 
    
 0 
 
    
 1 
 
   
 
   
 
    
 3 
 
    
 0  
 
    
 2 
 
   
 
   
 
    
 4 
 
    
 0 
 
    
 4 
 
   
 
   
 
    
 5 
 
    
 0 
 
    
 5 
 
   
 
   
 
    
 6 
 
    
 0 
 
    
 6 
 
   
 
   
 
    
 7 
 
    
0 
 
    
 7 
 
   
 
   
 
    
 8 
 
    
 0 
 
    
 8 
 
   
 
   
 
    
 9 
 9 
 
   
 
   
 
    
 ten 
 
    
 0 
 
    
 ten 
 
   
 
   
 
    
 all 
 
    
 0 
 
    
 one 
 
   
 
   
 
    
 
 
    
 0 
 
    
 
 
   
 
   
 
    
 13 
 
    
 0 
 
    
 [
 
   
 
  
Thus, when I is 0 o'clock, that is, traversing the first row of the two-dimensional array map, and then entering the loop of J, which reads the first line through all the data. When I is 2, that means traversing the second row of the two-dimensional array map and then into the loop of J, which reads the second row through all the data. By analogy, the entire two-dimensional array map is read. Then whenever J changes, call Drawtile () and assign a value to his parameters, then draw in Drawtile () to achieve the effect of drawing the map.

So what do we do with the drawtile? First we also take out IDs, so that we can easily draw, and then use the HTML5 DrawImage () method, to draw. So DrawImage () how to use it.

Look at the introduction on the W3cschool, the bottom is a few screenshots

(from http://www.w3school.com.cn/htmldom/met_canvasrenderingcontext2d_drawimage.asp)


Grammar

DrawImage (image, X, y) drawImage (image, X, y
, width, height)
drawImage (image, Sourcex, Sourcey, Sourcewidth, Sourceheight,
          destx, Desty, Destwidth, Destheight)
 

 



 
 
 
  
 
   
 
    
Parameters
 
    
Description
 
   
 
   
 
    
Image
 
    
The image that you want to draw.
This must be an image object representing markup or an off-screen image, or a Canvas element.
 
   
 
   
 
    
X, y
 
    
The position of the upper-left corner of the image to draw.
 
   
 
   
 
    
width, height
 
    
The dimensions that the image should draw. Specify these parameters so that the image can be scaled.
 
   
 
   
 
    
Sourcex, Sourcey
 
    
The upper-left corner of the area where the image will be drawn. These integer parameters are measured in image pixels.
 
   
 
   
 
    
Sourcewidth, Sourceheight
 
    
The size of the area to be drawn by the image, expressed in image pixels.
 
   
 
   
 
    
DESTX, Desty
 
    
The canvas coordinates of the upper-left corner of the image area that you want to draw.
 
   
 
   
 
    
Destwidth, Destheight
 
    
The size of the canvas to draw for the image area.
 
   
 
  
 

 
Read the introduction, I believe that we have an understanding of it, then I do not explain. When the Drawtile () parameter is assigned to completion, the map is drawn as required. Since there is no map block size of 32, so you can see a lot of 32, haha. I'm afraid everyone has been very annoying, because these are very simple for everyone, I have not said, I believe that we have already understood. As for the code download, this time no, I am getting lazy recently ... Code is not much, we carefully copy and paste it ...

Operation effect:



Then we'll go on to research program Master Zhang Lubin 's HTML5 open Source Engine--lufylegend.js.


third, the use of Lufylegend.js

First I quote the official introduction:Lufylegend is a HTML5 open Source engine, It realizes the development of HTML5 by using imitation ActionScript3.0 syntax, including Lsprite,lbitmapdata,lbitmap,lloader,lurlloader,ltextfield,levent, which is familiar to many as developers. Support a variety of popular environments such as Google Chrome,firefox,opera,ie9,ios,android. Using Lufylegend can be easy to use object-oriented programming, and can cooperate with box2dweb to make physical games, in addition it also has built-in ltweenlite easing class and so on very practical function, now start to use it, it can let you enter the HTML5 world faster. 



Attention to CSDN Friend is not difficult to find, there is a cow in our side, he is Zhang Lubin. The first time I saw his article was last year, when I saw him using his engine to develop Angry Birds, I didn't mention how much I admired him. Later I learned more and began to learn his HTML5 engine lufylegend. So I'll just stop touting the author here and start getting into the business.

Lufylegend download address and API introduction:http://lufylegend.com/lufylegend Official blog: http://blog.csdn.net/lufy_legend Contact official : lufy.legend@gmail.com


Here are a few examples of lufylegend:


 1). Lufylegend to realize the game progress bar


<! DOCTYPE html>  

 2) lufylegend to achieve animation playback


<! DOCTYPE html>  

3) lufylegend realize painting

<! DOCTYPE html>
 

Today, the first exploration of Lufylegend to stop, the next time I will lufylegend the specific use of the introduction, I hope we support more, thank you. I will repay you with a better article. 


----------------------------------------------------------------

You are welcome to reprint my article.

Reprint Please specify: Transferred from Yorhom ' s Game Box

Welcome to keep an eye on my blog