This tutorial will show you how to use HTML5 to build a map, and how to develop a game using the lufylegend. JS, an existing advanced HTML5 game development library.
First, let's get to know how to use HTML5 to implement animation. After all, "Dynamic and Static combination" means first moving and then static. After reading the content of the previous chapter, you may have a preliminary understanding of HTML5 animation implementation:
HTML5 game development-combination of "Dynamic and Static" (1 ):
Http://blog.csdn.net/yorhomwang/article/details/8301451
As early as in the previous chapter, I have introduced that many game maps are made of small map blocks. Since those games can be implemented through as or other programming languages, our HTML5 is no inferior to them. Next is the image that I want to prepare for you today:
| Map.png |
Token is OK;
The image is not working, so you can get some code.
Several lines of code in map. JS:
VaR I; var J; window. onload = function () {gamemap ();} var mapimg = new image (); var map = [[, 3, 2], [, 0], [, 0, 2], [, 0, 0, 0, 0,, 2], [, 2, 2], [, 3], [, 3,, 0], [, 0, 0, 1], [, 1], [,],]; // create a two-dimensional array 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 with a length of 416 and a width of 416 for (I = 0; I <13; I ++) {for (j = 0; j <13; j ++) {drawtile (I * 32, J * 32, map [J] [I]) ;}// call the map function cyclically, until the painting is complete} function drawtile (X, Y, type) {var canvas = document. getelementbyid ("map"); var context = canvas. getcontext ("2D"); context. drawimage (mapimg, type * 32, 0, 32, 32, X, Y, 32, 32);} // map function
Few lines of code in HTML:
<!DOCTYPE html>The current form is equivalent to an inexplicable English sentence, and I will start to self-translate. First, the code in the HTML is equivalent to the "hello" that I say even rural people understand, so I will not explain it. Of course, it is not ruled out that some friends are forced to come here by accident. If such friends are interested but cannot understand this, they may wish to provide you with some services:
1. for Chinese users, see:Http://www.w3school.com.cn/, Detailed programming Introduction
2. Foreign Friends:Http://www.w3schools.com/, The above detailed introduction of the Programming
P.s. It is not intended to advertise, but to help everyone.
When I started my study, I thought that some students who had been studying hard would still miss those codes. So without consuming everyone's interest, let me use the "Nine" inch tongue to express the meaning of these codes to everyone.
Frist: I have defined two variables J and I used to determine the map block in the map array. This sentence is very vague and you will understand it at the end. As follows:
var i;var j;Then, I use window. onload to call the map function. This is not the most important reason. As follows:
window.onload = function (){gamemap();}Next is the created mapimg and map array for image installation. Sorry, in the subsequent explanation, you will understand how this is done. The following code:
VaR mapimg = new image (); var map = [[, 2, 0, 0, 0], [, 0, 0, 0, 0, 0, 0, 0, 0, 2], [, 0, 0, 0, 0, 0, 0, 0, 3, 0, 2, 0, 0, 0, 0, 0, 0, 2], [, 0, 0, 3, 2], [, 0, 0, 0, 0,, 3], [, 3], [, 0], [, 0, 0, 0, 0, 0, 0, 0, 0, 0], [, 0, 1], [, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1], [, 3,],]; // create a two-dimensional array that forms a mapNow it seems to be ready, but the core part is missing, so I used the gamemap () method together with the drawtile () method. Repeat 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 with a length of 416 and a width of 416 for (I = 0; I <13; I ++) {for (j = 0; j <13; j ++) {drawtile (I * 32, J * 32, map [J] [I]) ;}// call the map function cyclically, until the painting is complete} function drawtile (X, Y, type) {var canvas = document. getelementbyid ("map"); var context = canvas. getcontext ("2D"); context. drawimage (mapimg, type * 32, 0, 32, 32, X, Y, 32, 32);} // map functionFirst, the <canvas> ID in <body> is retrieved under gamemap (), and then mapimg is used. src = ""; defines the image to be displayed. You can use canvas to display the image on w3cschool, or go to my previous article to see it. Then draw. First, I drew a rectangle and read the comments. Then enter my favorite loop. Because we need to draw a 13*13 map, we need to cycle 13 times and then loop in the loop so that I and j can traverse the array map. When the I value is 0, the J value is as follows:
| Number of cycles | I value | J 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 | 0 | 9 |
| 10 | 0 | 10 |
| 11 | 0 | 11 |
| 12 | 0 | 12 |
| 13 | 0 | 13 |
It can be seen that when I is 0, that is to say, traversing the first row of the Two-dimensional array map, and then entering the J loop, so that the first row traverses all the data. When I is set to 2, it means to traverse the second row of the Two-dimensional array map, and then enter the J loop, so that the second row can traverse all the data. And so on, the whole two-dimensional array map is read. Then, whenever J changes, it calls drawtile () and assigns a value to its parameter, and then draws it in drawtile () to draw the map.
So what do we do in drawtile? First, we also extract the ID to facilitate the painting, and then use the drawimage () method in html5. So how to use drawimage?
Let's take a look at the introduction on w3cschool. Below are some
(From http://www.w3school.com.cn/htmldom/met_canvasrenderingcontext2d_drawimage.asp)
Syntax
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 to be drawn. This must be an image object that indicates the flag or image outside the screen, or a canvas element. |
| X, Y | The position in the upper left corner of the image to be drawn. |
| Width, height | The size of the image to be drawn. Specify these parameters so that the image can be scaled. |
| Sourcex, sourcey | The upper left corner of the area to be drawn. These integer parameters are measured in image pixels. |
| Sourcewidth, sourceheight | The size of the area to be drawn in pixels. |
| Destx, desty | Canvas coordinates in the upper left corner of the image area to be drawn. |
| Destwidth, destheight | The size of the canvas to be drawn in the image area. |
After reading the introduction, I believe you have an understanding of it, so I will not explain it. When the drawtile () parameter is assigned, a map is drawn as required. Since no map block is 32 in size, you can see a lot of 32, haha. I'm afraid you have long been tired of reading this because it is very simple for everyone and I haven't talked about it yet. I believe you have understood it for a long time. As for code downloading, I don't have it this time. Recently, I 've become increasingly lazy... There are not many codes. Please copy and paste them carefully...
Running effect:
Then we will study the program masters.Zhang LubinHTML5 Open Source engine-lufylegend. js.
Iii. Use of lufylegend. jsFirst, I will reference the official introduction as the beginning:Lufylegend is an open-source HTML5 engine that enables HTML5 development using the syntax similar to actionscript3.0, including lsprite, lbitmapdata, lbitmap, lloader, lurlloader, and ltextfield, levent and other classes familiar to as developers. It supports Google Chrome, Firefox, opera, ie9, IOS, Android, and other popular environments. With lufylegend, you can easily use object-oriented programming and use box2dweb to create physical games,
In addition, it also has built-in ltweenlite easing and other very practical functions. Now, let's start using it. It allows you to enter the HTML5 world faster!
A friend who pays attention to csdn does not have to find that there is a cool man who is around us. He is Zhang Lubin. I saw his article for the first time last year. When I saw him developing Angry Birds with his engine, I did not mention how much I admire him. Later, I learned more about his HTML5 engine lufylegend. So I don't want to post the author here and start to get into the correct position.
Here are several examples of lufylegend:
<! Doctype HTML>2) lufylegend for animation playback
<!DOCTYPE html> 3) lufylegend for painting<!DOCTYPE html>This is the first exploration of lufylegend today. Next time, I will introduce the specific use of lufylegend. Thank you for your support! I will return to you with a better article.
----------------------------------------------------------------
You are welcome to repost my article.
Reprinted Please note: transferred from yorhom's game box
Continue to follow my blog
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
