I haven't written an article for a long time... I do not know whether you can remember the previous commitments-writing several articles about HTML5 game development. Today is the end of time, but I have to hurry up. For various reasons, I have to put myself into a hard job tomorrow.
Now let's talk about HTML5 game development. Some friends think that HTML5 development games are not developed using JavaScript? Can images in the game be pasted with ? Why HTML5. (Maybe not everyone thinks so, But I thought so when I was a beginner at HTML5. This is why I wrote a series of articles about Javascript development "The Legend of the Three Kingdoms". But this is not the case. HTML5 development games mainly use the <canvas> tag, the images in <canvas> cannot be dragged and copied, but can. Therefore, this reflects the key to HTML5 game development. However, in <canvas>, textures cannot be solved by using a src attribute. They must be patched with JavaScript... After all, developing games is not that simple engineering... (I have said two more things nonsense, but I once told my friends that it was just these nonsense that made the article "vivid)
Next, I will reveal the story of HTML5 game development.
How does HTML5 make Static Images Dynamic? See the following analysis.
First, we prepare several images:
| 01. PNG | 02. PNG | 03. PNG |
Old images, but not old code:
Code in Main. JS:
Window. onload = function () {setinterval (function () {main ();}, 150) ;}; var pic1 = ". /01.png"; var pic2 = ". /02.png"; var pic3 = ". /03.png"; var picarry = [pic1, pic2, pic3]; var newimgname = new image (); newimgname. src = pic1; var picarrsub = 0; function main () {var celem = document. getelementbyid ("canvas"); var cxt = celem. getcontext ("2D"); cxt. clearrect (0, 0,300,300); cxt. drawimage (newimgname, 100,100); cxt. save (); // process the image if (picarrsub> = picarry. length-1) {picarrsub = 0;} else {picarrsub + = 1;} newimgname. src = picarry [picarrsub];}
The above is the JavaScript code written by the monks, but as we all know, since it is called HTML5 rather than javascript5, HTML code is also crucial.
The following is the HTML5 code:
<!DOCTYPE html>Explanations:
<Canvas> it is a newly added HTML5 tag. It is designed specifically for game development. First, we need to add the ID attribute to the newly added tag so that you can operate it in JavaScript. For more information, see w3cschool:Http://www.w3school.com.cn/html5/html_5_canvas.asp
The HTML code is explained here. Next we will talk about the code in javascript:
var pic1 = "./01.png";var pic2 = "./02.png";var pic3 = "./03.png";var picArry = [pic1, pic2, pic3];This section is clearly written. It also puts several images into the array, so that you can play images cyclically later.
var newImgName = new Image();newImgName.src = pic1;This Code creates an image area and assigns a pic value to SRC, that is, the variable just defined, that is,./01.png.
Function main () {var celem = document. getelementbyid ("canvas"); var cxt = celem. getcontext ("2D"); cxt. clearrect (0, 0,300,300); cxt. drawimage (newimgname, 100,100); cxt. save (); // process the image if (picarrsub> = picarry. length-1) {picarrsub = 0;} else {picarrsub + = 1;} newimgname. src = picarry [picarrsub];}This piece of code is the main part of the program. Texture, switch the image, and process the image here. First, I take out the canvas ID, and then draw the image. The SRC is in ()... the else switches repeatedly in an endless loop. The setinterval () function is used to repeatedly call the main () function every time it switches. Because of the SRC switch, the main () function is re-drawn when it is repeatedly called, this leads to infinite loop switching of images.
cxt.clearRect(0, 0, 300, 300); cxt.drawImage(newImgName,100,100);cxt.save();What does this code mean? First, in order not to overlap the drawn image, the drawimage () function will not empty the previous image because it will be painted next time. Therefore, if you do not actively clear the canvas, it will appear on the top of the previous painting. Therefore, I first use the clearrect () function to clear the canvas, in this way, there will be no overlap. (Cleatrect Syntax: cleatrect (moving X coordinates, moving Y coordinates,
);)Drawimage must be known to everyone. The specific syntax is as follows: drawimage (to draw the object name, the X coordinate to be moved, and the Y coordinate to be moved );
The code will not be given. Copy the Code directly... (Do not mind ...)
Demo demo location:
Http://www.cnblogs.com/yorhom/archive/2013/04/04/3000278.html
----------------------------------------------------------------
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
