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:
ok, download the example files and lets start coding !
step 1. html
here are all html of my demo.
index.html
|
04
|
<meta charset="utf-8" />
|
|
05
|
<title>html5 game development - lesson 4 | script tutorials</title>
|
|
07
|
<link href="css/main.css" rel="stylesheet" type="text/css" />
|
|
13
|
<script type="text/javascript" src="js/script.js"></script>
|
|
16
|
<div class="container">
|
|
17
|
<canvas id="scene" width="1000" height="600"></canvas>
|
|
21
|
<h2>html5 game development - lesson 4</h2>
|
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
|
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
|
|
015
|
// -------------------------------------------------------------
|
|
018
|
function dragon(x, y, w, h, image) {
|
|
026
|
// -------------------------------------------------------------
|
|
029
|
function clear() { // clear canvas function
|
|
030
|
ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height);
|
|
033
|
function drawscene() { // main drawscene function
|
|
034
|
clear(); // clear canvas
|
|
038
|
if (ibgshiftx <= 0) {
|
|
041
|
ctx.drawimage(backgroundimage, 0 + ibgshiftx, 0, 1000, 940, 0, 0, 1000, 600);
|
|
043
|
// update sprite positions
|
|
049
|
// in case of mouse down - move dragon more close to our mouse
|
|
051
|
if (ilastmousex > dragon.x) {
|
|
054
|
if (ilastmousey > dragon.y) {
|
|
057
|
if (ilastmousex < dragon.x) {
|
|
060
|
if (ilastmousey < dragon.y) {
|
|
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);
|
|
069
|
// -------------------------------------------------------------
|
|
073
|
canvas = document.getelementbyid('scene');
|
|
074
|
ctx = canvas.getcontext('2d');
|
|
076
|
var width = canvas.width;
|
|
077
|
var height = canvas.height;
|
|
079
|
// load background image
|
|
080
|
backgroundimage = new image();
|
|
081
|
backgroundimage.src="images/hell.jpg";
|
|
082
|
backgroundimage.onload = function() {
|
|
084
|
backgroundimage.onerror = function() {
|
|
085
|
console.log('error loading the background image.');
|
|
088
|
// 'dragon' music init
|
|
089
|
dragonsound = new audio('media/dragon.wav');
|
|
090
|
dragonsound.volume = 0.9;
|
|
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;
|
|
101
|
// initialization of dragon
|
|
102
|
var odragonimage = new image();
|
|
103
|
odragonimage.src="images/dragon.gif";
|
|
104
|
odragonimage.onload = function() {
|
|
106
|
dragon = new dragon(400, 300, dragonw, dragonh, odragonimage);
|
|
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;
|
|
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) {
|
|
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;
|
|
135
|
// saving last coordinates
|
|
136
|
ilastmousex = mousex;
|
|
137
|
ilastmousey = mousey;
|
|
139
|
// perform dragon dragging
|
|
145
|
// change direction of dragon (depends on mouse position)
|
|
146
|
if (mousex > dragon.x && math.abs(mousey-dragon.y) < dragon.w/2) {
|
|
148
|
} else if (mousex < dragon.x && math.abs(mousey-dragon.y) < dragon.w/2) {
|
|
150
|
} else if (mousey > dragon.y && math.abs(mousex-dragon.x) < dragon.h/2) {
|
|
152
|
} else if (mousey < dragon.y && math.abs(mousex-dragon.x) < dragon.h/2) {
|
|
154
|
} else if (mousey < dragon.y && mousex < dragon.x) {
|
|
156
|
} else if (mousey < dragon.y && mousex > dragon.x) {
|
|
158
|
} else if (mousey > dragon.y && mousex < dragon.x) {
|
|
160
|
} else if (mousey > dragon.y && mousex > dragon.x) {
|
|
165
|
$('#scene').mouseup(function(e) { // binding mouseup event
|
|
166
|
dragon.bdrag = false;
|
|
170
|
dragonsound.currenttime = 0;
|
|
174
|
setinterval(drawscene, 30); // loop drawscene
|
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
|
2
|
wingssound = new audio('media/wings.wav');
|
|
3
|
wingssound.volume = 0.9;
|
|
4
|
wingssound.addeventlistener('ended', function() { // looping wings sound
|
2. draw sprites
|
01
|
var odragonimage = new image();
|
|
02
|
odragonimage.src="images/dragon.gif";
|
|
03
|
odragonimage.onload = function() {
|
|
06
|
// update sprite positions
|
|
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
conclusion
are you like our new handy dragon?
i will be glad to see your thanks and comments. good luck!
Comments