HTML5 game development tutorial series 4 (translation)

Recommended for you: Get network issues from WhatsUp Gold. Not end users.

The original address:

This article is that we continue to use canvas to HTML5 game development series of articles, we have to learn the next element: Sprite animation and sound processing. In this example, you will see has been flying dragon, we can always hear the sound of wings, when the mouse button is released when the event occurs and the dragon roaring sound. Finally, we will teach the Dragon moved to click on the next.

The former one in HTML5 game development tutorial series 3 (translation).

The first step: HTML

index.html

 1 <!DOCTYPE html>
 2 <html lang="en" >
 3     <head>
 4         <meta charset="utf-8" />
 5         <title>HTML5 Game Development - Lesson 4 | Script Tutorials</title>
 6 
 7         <link href="css/main.css" rel="stylesheet" type="text/css" />
 8 
 9         <!--[if lt IE 9]>
10           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
11         <![endif]-->
12         <script src="http://code.jquery.com/jquery-latest.min.js"></script>
13         <script type="text/javascript" src="js/script.js"></script>
14     </head>
15     <body>
16         <div class="container">
17             <canvas id="scene" width="1000" height="600"></canvas>
18         </div>
19 
20         <footer>
21             <h2>HTML5 Game Development - Lesson 4</h2>
22             <a href="http://www.script-tutorials.com/html5-game-development-lesson-4/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
23         </footer>
24     </body>
25 </html>

The second step: CSS

css/main.css

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

The third step: JS

js/script.js

  1 // Internal variables
  2 var canvas, ctx;
  3 var backgroundImage;
  4 var iBgShiftX = 100;
  5 var dragon;
  6 var dragonW = 75; // The width of the Dragon
  7 var dragonH = 70; // The height of the Dragon
  8 var iSprPos = 0; // The initial frame of animation Dragon
  9 var iSprDir = 4; // The initial direction of the Dragon (left)
 10 var dragonSound; // The voice of the Dragon
 11 var wingsSound; // Wing sound
 12 var bMouseDown = false; //The mouse is pressed 
 13 var iLastMouseX = 0;   //The X coordinates of a location of the mobile mouse before
 14 var iLastMouseY = 0;   //The Y coordinates of a location of the mobile mouse before
 15 // -------------------------------------------------------------
 16 
 17 // objects :
 18 function Dragon(x, y, w, h, image) {
 19     this.x = x;
 20     this.y = y;
 21     this.w = w;
 22     this.h = h;
 23     this.image = image;
 24     this.bDrag = false;
 25 }
 26 // -------------------------------------------------------------
 27 
 28 // Clear the entire canvas
 29 function clear() { 
 30     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
 31 }
 32 
 33 //Painting the entire screen
 34 function drawScene() { 
 35     clear(); // Clearly the canvas
 36 
 37     // Painting a background picture
 38     iBgShiftX -= 4;
 39     if (iBgShiftX <= 0) {
 40         iBgShiftX = 1045;
 41     }
 42     ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600);
 43 
 44     // update sprite positions
 45     iSprPos++;
 46     if (iSprPos >= 9) {
 47         iSprPos = 0;
 48     }
 49 
 50     // Once the mouse down, the dragon is moving in that direction
 51     if (bMouseDown) {
 52         if (iLastMouseX > dragon.x) {
 53             dragon.x += 5;
 54         }
 55         if (iLastMouseY > dragon.y) {
 56             dragon.y += 5;
 57         }
 58         if (iLastMouseX < dragon.x) {
 59             dragon.x -= 5;
 60         }
 61         if (iLastMouseY < dragon.y) {
 62             dragon.y -= 5;
 63         }
 64     }
 65 
 66     // draw dragon
 67     ctx.drawImage(dragon.image, iSprPos*dragon.w, iSprDir*dragon.h, dragon.w, dragon.h, dragon.x - dragon.w/2, dragon.y - dragon.h/2, dragon.w, dragon.h);
 68 }
 69 
 70 // -------------------------------------------------------------
 71 
 72 // initialization
 73 $(function(){
 74     canvas = document.getElementById('scene');
 75     ctx = canvas.getContext('2d');
 76 
 77     var width = canvas.width;
 78     var height = canvas.height;
 79 
 80     // Load the background image
 81     backgroundImage = new Image();
 82     backgroundImage.src = 'images/hell.jpg';
 83     backgroundImage.onload = function() {
 84     }
 85     backgroundImage.onerror = function() {
 86         console.log('Error loading the background image.');
 87     }
 88 
 89     // Dragon sound initialization
 90     dragonSound = new Audio('media/dragon.wav');
 91     dragonSound.volume = 0.9;
 92 
 93     // Wing sound initialization
 94     wingsSound = new Audio('media/wings.wav');
 95     wingsSound.volume = 0.9;
 96     wingsSound.addEventListener('ended', function() { // Looping sound of wings
 97         this.currentTime = 0;
 98         this.play();
 99     }, false);
100     wingsSound.play();
101 
102     //Dragon initialization
103     var oDragonImage = new Image();
104     oDragonImage.src = 'images/dragon.gif';
105     oDragonImage.onload = function() {
106     }
107     dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);
108 
109     $('#scene').mousedown(function(e) { // binding mousedown event (for dragging)
110         var mouseX = e.layerX || 0;
111         var mouseY = e.layerY || 0;
112         if(e.originalEvent.layerX) { // changes for jquery 1.7
113             mouseX = e.originalEvent.layerX;
114             mouseY = e.originalEvent.layerY;
115         }
116 
117         bMouseDown = true;
118 
119         if (mouseX > dragon.x- dragon.w/2 && mouseX <dragon.x- dragon.w/2 +dragon.w &&
120             mouseY > dragon.y- dragon.h/2 && mouseY <dragon.y-dragon.h/2 +dragon.h) {
121 
122             dragon.bDrag = true;
123             dragon.x = mouseX;
124             dragon.y = mouseY;
125         }
126     });
127 
128     $('#scene').mousemove(function(e) { // binding mousemove event
129         var mouseX = e.layerX || 0;
130         var mouseY = e.layerY || 0;
131         if(e.originalEvent.layerX) { // changes for jquery 1.7
132             mouseX = e.originalEvent.layerX;
133             mouseY = e.originalEvent.layerY;
134         }
135 
136         // Save the moving coordinate
137         iLastMouseX = mouseX;
138         iLastMouseY = mouseY;
139 
140         // Drag the Dragon
141         if (dragon.bDrag) {
142             dragon.x = mouseX;
143             dragon.y = mouseY;
144         }
145 
146         // According to the location of the mouse to change the direction of the Dragon
147         if (mouseX > dragon.x && Math.abs(mouseY-dragon.y) <dragon.w/2) {  //Right
148             iSprDir = 0;
149         } else if (mouseX <dragon.x && Math.abs(mouseY-dragon.y) <dragon.w/2) {  //The left
150             iSprDir = 4;
151         } else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) <dragon.h/2) {  //Under the
152             iSprDir = 2;
153         } else if (mouseY <dragon.y && Math.abs(mouseX-dragon.x) <dragon.h/2) {  //On the
154             iSprDir = 6;
155         } else if (mouseY <dragon.y && mouseX < dragon.x) {  //The upper left
156             iSprDir = 5;
157         } else if (mouseY <dragon.y && mouseX > dragon.x) {  //The upper right
158             iSprDir = 7;
159         } else if (mouseY > dragon.y && mouseX < dragon.x) {  //The lower left
160             iSprDir = 3;
161         } else if (mouseY > dragon.y && mouseX > dragon.x) {  //The lower right
162             iSprDir = 1;
163         }
164     });
165 
166     $('#scene').mouseup(function(e) { // binding mouseup event
167         dragon.bDrag = false;
168         bMouseDown = false;
169 
170         // Playing Dragon sound
171         dragonSound.currentTime = 0;
172         dragonSound.play();
173     });
174 
175     setInterval(drawScene, 30); // loop drawScene
176 });

What is the procedure to achieve: first of all, we define the canvas, context, and then load the background picture, two voices, we and binding to initialize different mouse events. In our main circulating redraw method, I moved the background image, and update the frame position, finally finishing. In our code, you can find some interesting:

  1. Circulation background music:
    1 // Wing sound initialization
    2 wingsSound = new Audio('media/wings.wav');
    3 wingsSound.volume = 0.9;
    4 wingsSound.addEventListener('ended', function() { // Looping sound of wings
    5     this.currentTime = 0;
    6     this.play();
    7 }, false);
    8 wingsSound.play();

  2. Draw sprites
     1     var oDragonImage = new Image();
     2     oDragonImage.src = 'images/dragon.gif';
     3     oDragonImage.onload = function() {
     4     }
     5 ....
     6     // update sprite positions
     7     iSprPos++;
     8     if (iSprPos >= 9) {
     9         iSprPos = 0;
    10     }
    11 
    12     // Draw Dragon (shear image)
    13     ctx.drawImage(dragon.image, iSprPos*dragon.w, iSprDir*dragon.h, dragon.w, dragon.h, dragon.x - dragon.w/2, dragon.y - dragon.h/2, dragon.w, dragon.h);

So, we load the original image (there are many sub image picture), then a part of picture to display the shearing, then moves to its position, then the cycle that painting.

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


 Below: context.drawImage (IMG, SX, sy, swidth, sheight, x, y, width, height);   reference:

 The method mainly shear image, and positioning in the canvas cut part

 Explanation of parameters:

Parameters describing the IMG image to use, canvas or video. The optional SX. Start the X coordinates of the location of shear. The optional sy. Start the Y coordinates of the location of shear. The optional swidth. Cut the width of the image. The optional sheight. Cut the image height. X position x images placed on the canvas. Y position Y images placed on the canvas. The optional width. To use the image width. (stretch or shrink the image) height optional. To use the image height. (stretch or shrink the image)

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download

Posted by Craig at December 09, 2013 - 10:37 PM