HTML5 Game Development Series tutorial 4)

Address: http://www.script-tutorials.com/html5-game-development-lesson-4/

This article is an article that continues to use canvas for HTML5 game development series. We need to learn the next element: genie animation and basic sound processing. In our example, you will see the flying dragon, and we will hear the sound of its wings and the roar of the Dragon when the mouse is released. Finally, we move the church dragon to the mouse.

The previous article was introduced in the HTML5 Game Development Series tutorial 3 ).

Step 1: HTML

Index.html

                           HTML5 Game Development - Lesson 4 | Script Tutorials                                                                                                         HTML5 Game Development - Lesson 4             Back to original tutorial on Script Tutorials               

Step 2: CSS

Css/main.css

This time I will not write the css code-it is just a page layout design style, nothing special, can be obtained from the source code package.

Step 3: JS

Js/script. js

IBgShiftX = 100 dragonW = 75; dragonH = 70; iSprPos = 0; iSprDir = 4; dragonSound; wingsSound; bMouseDown =; iLastMouseX = 0; iLastMouseY = 0 ;. x =. y =. w =. h =. image =. bDrag = ctx. clearRect (0, 0 clear (); iBgShiftX-= 4 (iBgShiftX <= 0 iBgShiftX = 1045 ctx. drawImage (backgroundImage, 0 + iBgShiftX, 0, 1000,940, 0, 0, 1000,600 iSprPos ++ (iSprPos> = 9 iSprPos = 0 (iLastMouseX> dragon. x + = 5 (iLastMouseY> dragon. y + = 5 (iLastMouseX <dragon. x-= 5 (iLastMouseY <dragon. y-= 5 ctx. drawImage (dragon. image, iSprPos * dragon. w, iSprDir * dragon. h, dragon. w, dragon. h, dragon. x-dragon. w/2, dragon. y-dragon. h/2 $ (canvas = document. getElementById ('Scene 'ctx = canvas. getContext ('2d 'width = height = backgroundImage. src = 'images/hell.jpg 'backgroundImage. onload = backgroundImage. onerror = console. log ('error loading the background image. 'dragonsound = Audio ('Media/dragon.wav 'dragonSound. volume = 0.9 wingsSound = Audio ('Media/wings.wav 'wingsSound. volume = 0.9 wingsSound. addEventListener ('enabled ',(){. currentTime = 0}, oDragonImage = oDragonImage. src = 'images/dragon.gif 'oDragonImage. onload = dragon = Dragon (400,300 $ ('# scene '). mousedown (e) {mouseX = e. layerX | 0 mouseY = e. layerY | 0 (e. originalEvent. layerX) {mouseX = mouseY = bMouseDown = (mouseX> dragon. x-dragon. w/2 & mouseX <dragon. x-dragon. w/2 + dragon. w & mouseY> dragon. y-dragon. h/2 & mouseY <dragon. y-dragon.h/2 + dragon. bDrag = dragon. x = dragon. y = $ ('# scene '). mousemove (e) {mouseX = e. layerX | 0 mouseY = e. layerY | 0 (e. originalEvent. layerX) {mouseX = mouseY = iLastMouseX = iLastMouseY = dragon. x = dragon. y = (mouseX> dragon. x & Math. abs (mouseY-dragon.y) <dragon. w/2) {// right iSprDir = 0} (mouseX <dragon. x & Math. abs (mouseY-dragon.y) <dragon. w/2) {// left iSprDir = 4} (mouseY> dragon. y & Math. abs (mouseX-dragon.x) <dragon. h/2) {// iSprDir = 2} (mouseY <dragon. y & Math. abs (mouseX-dragon.x) <dragon. h/2) {// iSprDir = 6} (mouseY <dragon. y & mouseX <iSprDir = 5} (mouseY <dragon. y & mouseX> iSprDir = 7} (mouseY> dragon. y & mouseX <iSprDir = 3} (mouseY> dragon. y & mouseX> iSprDir = 1 $ ('# scene '). mouseup (e) {dragon. bDrag = bMouseDown = dragonSound. currentTime = 0 setInterval (drawScene, 30 );});

How the program is implemented: First we define the canvas and context, then load the background image and two sounds, and then initialize our dragon and bind different mouse events. In our main circular painting method, I moved the background image, updated the frame position, and finally painted the dragon. In our code, you can find several interesting methods:

Therefore, we load the original image (with many sub-images), cut part of the image content for display, move its position, and then draw it cyclically.

Source code: http://www.script-tutorials.com/demos/186/source.zip

 

The following describes:Context. DrawImage (Img,Sx,Sy,Swidth,Sheight,X,Y,Width,Height); Reference: http://www.w3school.com.cn/html5/canvas_drawimage.asp

This method mainly cut the image and located the cut part on the canvas.

Parameter description:

Parameters	Description
Img	Specifies the image, canvas, or video to be used.
Sx	Optional. The x coordinate position of the Start cut.
Sy	Optional. Y coordinate position of the Start cut.
Swidth	Optional. Width of the cut image.
Sheight	Optional. The height of the cut image.
X	Place the x coordinate position of the image on the canvas.
Y	Place the y coordinate position of the image on the canvas.
Width	Optional. The width of the image to be used. (Stretch or zoom out an image)
Height	Optional. The height of the image to be used. (Stretch or zoom out an image)