Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

HTML5 Game Development – Lesson 4 - Sprites and Sounds

DZone's Guide to

HTML5 Game Development – Lesson 4 - Sprites and Sounds

· Web Dev Zone
Free Resource

Start coding today to experience the powerful engine that drives data application’s development, brought to you in partnership with Qlik.

HTML5 Game Development - Lesson 4

Today we continue a series of articles on game development in HTML5 using canvas. Today we going to learn next elements: animation with sprites and basic work with sound. In our demonstration you will see a flying dragon. We will hear the sounds of wings all time (we will loop this sound), and another sound – dragon’s roar (on mouseup event). And finally we will teach our dragon be closer to the mouse cursor (when we hold down the mouse).

Our previous article you can read here: Developing Your First HTML5 Game – Lesson 3. Our new script is new enhanced version of previous one.

Here are our demo and downloadable package:

Live Demo
download in package

Ok, download the example files and lets start coding !



Step 1. HTML


Here are all html of my demo.

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 Game Development - Lesson 4 | Script Tutorials</title>
06  
07         <link href="css/main.css" rel="stylesheet" type="text/css" />
08  
09         <!--[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>


Step 2. CSS


Here are used CSS styles.

css/main.css

I will not publish styles today – this is just page layout styles, nothing special. Available in package.


Step 3. JS


js/script.js

001 // inner variables
002 var canvas, ctx;
003 var backgroundImage;
004 var iBgShiftX = 100;
005 var dragon;
006 var dragonW = 75; // dragon width
007 var dragonH = 70; // dragon height
008 var iSprPos = 0; // initial sprite frame
009 var iSprDir = 4; // initial dragon direction
010 var dragonSound; // dragon sound
011 var wingsSound; // wings sound
012 var bMouseDown = false; // mouse down state
013 var iLastMouseX = 0;
014 var iLastMouseY = 0;
015 // -------------------------------------------------------------
016  
017 // objects :
018 function Dragon(x, y, w, h, image) {
019     this.x = x;
020     this.y = y;
021     this.w = w;
022     this.h = h;
023     this.image = image;
024     this.bDrag = false;
025 }
026 // -------------------------------------------------------------
027  
028 // draw functions :
029 function clear() { // clear canvas function
030     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
031 }
032  
033 function drawScene() { // main drawScene function
034     clear(); // clear canvas
035  
036     // draw background
037     iBgShiftX -= 4;
038     if (iBgShiftX <= 0) {
039         iBgShiftX = 1045;
040     }
041     ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1000, 940, 0, 0, 1000, 600);
042  
043     // update sprite positions
044     iSprPos++;
045     if (iSprPos >= 9) {
046         iSprPos = 0;
047     }
048  
049     // in case of mouse down - move dragon more close to our mouse
050     if (bMouseDown) {
051         if (iLastMouseX > dragon.x) {
052             dragon.x += 5;
053         }
054         if (iLastMouseY > dragon.y) {
055             dragon.y += 5;
056         }
057         if (iLastMouseX < dragon.x) {
058             dragon.x -= 5;
059         }
060         if (iLastMouseY < dragon.y) {
061             dragon.y -= 5;
062         }
063     }
064  
065     // draw dragon
066     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);
067 }
068  
069 // -------------------------------------------------------------
070  
071 // initialization
072 $(function(){
073     canvas = document.getElementById('scene');
074     ctx = canvas.getContext('2d');
075  
076     var width = canvas.width;
077     var height = canvas.height;
078  
079     // load background image
080     backgroundImage = new Image();
081     backgroundImage.src="images/hell.jpg";
082     backgroundImage.onload = function() {
083     }
084     backgroundImage.onerror = function() {
085         console.log('Error loading the background image.');
086     }
087  
088     // 'Dragon' music init
089     dragonSound = new Audio('media/dragon.wav');
090     dragonSound.volume = 0.9;
091  
092     // 'Wings' music init
093     wingsSound = new Audio('media/wings.wav');
094     wingsSound.volume = 0.9;
095     wingsSound.addEventListener('ended', function() { // looping wings sound
096         this.currentTime = 0;
097         this.play();
098     }, false);
099     wingsSound.play();
100  
101     // initialization of dragon
102     var oDragonImage = new Image();
103     oDragonImage.src="images/dragon.gif";
104     oDragonImage.onload = function() {
105     }
106     dragon = new Dragon(400, 300, dragonW, dragonH, oDragonImage);
107  
108     $('#scene').mousedown(function(e) { // binding mousedown event (for dragging)
109         var mouseX = e.layerX || 0;
110         var mouseY = e.layerY || 0;
111         if(e.originalEvent.layerX) { // changes for jquery 1.7
112             mouseX = e.originalEvent.layerX;
113             mouseY = e.originalEvent.layerY;
114         }
115  
116         bMouseDown = true;
117  
118         if (mouseX > dragon.x- dragon.w/2 && mouseX < dragon.x- dragon.w/2 +dragon.w &&
119             mouseY > dragon.y- dragon.h/2 && mouseY < dragon.y-dragon.h/2 +dragon.h) {
120  
121             dragon.bDrag = true;
122             dragon.x = mouseX;
123             dragon.y = mouseY;
124         }
125     });
126  
127     $('#scene').mousemove(function(e) { // binding mousemove event
128         var mouseX = e.layerX || 0;
129         var mouseY = e.layerY || 0;
130         if(e.originalEvent.layerX) { // changes for jquery 1.7
131             mouseX = e.originalEvent.layerX;
132             mouseY = e.originalEvent.layerY;
133         }
134  
135         // saving last coordinates
136         iLastMouseX = mouseX;
137         iLastMouseY = mouseY;
138  
139         // perform dragon dragging
140         if (dragon.bDrag) {
141             dragon.x = mouseX;
142             dragon.y = mouseY;
143         }
144  
145         // change direction of dragon (depends on mouse position)
146         if (mouseX > dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
147             iSprDir = 0;
148         } else if (mouseX < dragon.x && Math.abs(mouseY-dragon.y) < dragon.w/2) {
149             iSprDir = 4;
150         } else if (mouseY > dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
151             iSprDir = 2;
152         } else if (mouseY < dragon.y && Math.abs(mouseX-dragon.x) < dragon.h/2) {
153             iSprDir = 6;
154         } else if (mouseY < dragon.y && mouseX < dragon.x) {
155             iSprDir = 5;
156         } else if (mouseY < dragon.y && mouseX > dragon.x) {
157             iSprDir = 7;
158         } else if (mouseY > dragon.y && mouseX < dragon.x) {
159             iSprDir = 3;
160         } else if (mouseY > dragon.y && mouseX > dragon.x) {
161             iSprDir = 1;
162         }
163     });
164  
165     $('#scene').mouseup(function(e) { // binding mouseup event
166         dragon.bDrag = false;
167         bMouseDown = false;
168  
169         // play dragon sound
170         dragonSound.currentTime = 0;
171         dragonSound.play();
172     });
173  
174     setInterval(drawScene, 30); // loop drawScene
175 });

How it work (shortly): Firstly we define canvas, context, then we load background image, two sounds, then we initialize our dragon and binding different mouse events. In our main loop draw function I am shifting background image (loop), then update sprite positions, and finally – draw our dragon. In our code you can find several new interesting methods:

1. Loop background sound

1 // 'Wings' music init
2 wingsSound = new Audio('media/wings.wav');
3 wingsSound.volume = 0.9;
4 wingsSound.addEventListener('ended', function() { // looping wings sound
5     this.currentTime = 0;
6     this.play();
7 }, false);
8 wingsSound.play();

2. Draw sprites

01     var oDragonImage = new Image();
02     oDragonImage.src="images/dragon.gif";
03     oDragonImage.onload = function() {
04     }
05 ....
06     // update sprite positions
07     iSprPos++;
08     if (iSprPos >= 9) {
09         iSprPos = 0;
10     }
11  
12     // draw dragon
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 loading initial image (with set of all sub-images), then – draw part of that image, then shifting its positions, and draw again (loop).


Step 4. Custom files


images/dragon.gif, images/hell.jpg, media/dragon.wav and media/wings.wav

All these files available in our package


Live Demo
download in package


Conclusion

Are you like our new handy dragon? :-) I will be glad to see your thanks and comments. Good luck!

 

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

Create data driven applications in Qlik’s free and easy to use coding environment, brought to you in partnership with Qlik.

Topics:

Opinions expressed by DZone contributors are their own.

THE DZONE NEWSLETTER

Dev Resources & Solutions Straight to Your Inbox

Thanks for subscribing!

Awesome! Check your inbox to verify your email so you can start receiving the latest in tech news and resources.

X

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}