Home » Tutorials

HTML5 Game Development – Navigating Your Spaceship- Lesson 3

Tutorials
Author Reading 14 min Views 1.7k. Published by Modified by

Today we continue a series of articles on game development in HTML5 using canvas. Finally, today we will start adding animation, and few more interesting features. Our demonstration will include a spaceship flying through space, and a new element – the Dialogue. The dialogue will contain two pages, and our button will toggle the dialog pages + hide the dialog on the second click.

Our previous article you can read here: Developing Your First HTML5 Game – Lesson 2. Our base script will taken from previous letter.

Here are our demo and downloadable package:

Contents
  1. Step 1. HTML
  2. index.html
  3. Step 2. CSS
  4. css/main.css
  5. Step 3. JS
  6. js/jquery-1.5.2.min.js
  7. js/script.js
  8. Step 4. Custom files
  9. fonts/Ds-digib.ttf, images/button.png, images/space_ship.png and images/stars.jpg
  10. Conclusion
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 3 | 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 type="text/javascript" src="js/jquery-1.5.2.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="800" height="600"></canvas>
18         </div>
19
20         <footer>
21             <h2>HTML5 Game Development - Lesson 3</h2>
22             <a href="http://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3" 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

01 /* general styles */
02 *{
03     margin:0;
04     padding:0;
05 }
06
07 @font-face {
08     font-family: "DS-Digital";
09     src: url("../fonts/Ds-digib.ttf");
10 }
11
12 body {
13     background-color:#bababa;
14     background-image: -webkit-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
15     background-image: -moz-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
16     background-image: -o-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
17     background-image: radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
18     color:#fff;
19     font:14px/1.3 Arial,sans-serif;
20     min-height:1000px;
21 }
22
23 .container {
24     width:100%;
25 }
26
27 .container > * {
28     display:block;
29     margin:50px auto;
30 }
31
32 footer {
33     background-color:#212121;
34     bottom:0;
35     box-shadow: 0 -1px 2px #111111;
36     display:block;
37     height:70px;
38     left:0;
39     position:fixed;
40     width:100%;
41     z-index:100;
42 }
43
44 footer h2{
45     font-size:22px;
46     font-weight:normal;
47     left:50%;
48     margin-left:-400px;
49     padding:22px 0;
50     position:absolute;
51     width:540px;
52 }
53
54 footer a.stuts,a.stuts:visited{
55     border:none;
56     text-decoration:none;
57     color:#fcfcfc;
58     font-size:14px;
59     left:50%;
60     line-height:31px;
61     margin:23px 0 0 110px;
62     position:absolute;
63     top:0;
64 }
65
66 footer .stuts span {
67     font-size:22px;
68     font-weight:bold;
69     margin-left:5px;
70 }
71
72 h3 {
73     text-align:center;
74 }
75
76 #scene {
77     position:relative;
78 }

Pay attention to ‘@font-face’. We will using this way to link custom font file (ttf) to our lesson (to draw at canvas).

Step 3. JS

js/jquery-1.5.2.min.js

We will using jQuery for our demo. This allows easy bind different events (for mouse etc). Next file most important (here are all our html5 functional):

js/script.js

001 // inner variables
002 var canvas, ctx;
003 var button;
004 var backgroundImage;
005 var spaceShip;
006 var iBgShiftX = 1024;
007 var bDrawDialog = true;
008 var iDialogPage = 1;
009 // -------------------------------------------------------------
010
011 // objects :
012 function Button(x, y, w, h, state, image) {
013     this.x = x;
014     this.y = y;
015     this.w = w;
016     this.h = h;
017     this.state = state;
018     this.imageShift = 0;
019     this.image = image;
020 }
021 function SpaceShip(x, y, w, h, image) {
022     this.x = x;
023     this.y = y;
024     this.w = w;
025     this.h = h;
026     this.image = image;
027     this.bDrag = false;
028 }
029 // -------------------------------------------------------------
030
031 // draw functions :
032
033 function clear() { // clear canvas function
034     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
035 }
036
037 function drawDialog() { // draw dialog function
038     if (bDrawDialog) {
039         var bg_gradient = ctx.createLinearGradient(0, 200, 0, 400);
040         bg_gradient.addColorStop(0.0, 'rgba(160, 160, 160, 0.8)');
041         bg_gradient.addColorStop(1.0, 'rgba(250, 250, 250, 0.8)');
042
043         ctx.beginPath(); // custom shape begin
044         ctx.fillStyle = bg_gradient;
045         ctx.moveTo(100, 100);
046         ctx.lineTo(700, 100);
047         ctx.lineTo(700, 500);
048         ctx.lineTo(100, 500);
049         ctx.lineTo(100, 100);
050         ctx.closePath(); // custom shape end
051         ctx.fill(); // fill custom shape
052
053         ctx.lineWidth = 2;
054         ctx.strokeStyle = 'rgba(128, 128, 128, 0.5)';
055         ctx.stroke(); // draw border
056
057         // draw the title text
058         ctx.font = '42px DS-Digital';
059         ctx.textAlign = 'center';
060         ctx.textBaseline = 'top';
061         ctx.shadowColor = '#000';
062         ctx.shadowOffsetX = 2;
063         ctx.shadowOffsetY = 2;
064         ctx.shadowBlur = 2;
065         ctx.fillStyle = '#fff';
066         if (iDialogPage == 1) {
067             ctx.fillText('Welcome to lesson #3', ctx.canvas.width/2, 150);
068             ctx.font = '24px DS-Digital';
069             ctx.fillText('After closing dialog you will able', ctx.canvas.width/2, 250);
070             ctx.fillText('to handle with spaceship with your mouse', ctx.canvas.width/2, 280);
071         } else if (iDialogPage == 2) {
072             ctx.fillText('Second page of dialog', ctx.canvas.width/2, 150);
073             ctx.font = '24px DS-Digital';
074             ctx.fillText('Any another text', ctx.canvas.width/2, 250);
075         }
076     }
077 }
078
079 function drawScene() { // main drawScene function
080     clear(); // clear canvas
081
082     // draw background
083     iBgShiftX -= 10;
084     if (iBgShiftX <= 0) {
085         iBgShiftX = 1024;
086     }
087     ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600);
088
089     // draw space ship
090     ctx.drawImage(spaceShip.image, 0, 0, spaceShip.w, spaceShip.h, spaceShip.x-128, spaceShip.y-128, spaceShip.w, spaceShip.h);
091
092     // draw dialog
093     drawDialog();
094
095     // draw button
096     ctx.drawImage(button.image, 0, button.imageShift, button.w, button.h, button.x, button.y, button.w, button.h);
097
098     // draw button's text
099     ctx.font = '22px DS-Digital';
100     ctx.fillStyle = '#ffffff';
101     ctx.fillText('next/hide/show', 400, 465);
102     ctx.fillText('dialog', 400, 500);
103 }
104
105 // -------------------------------------------------------------
106
107 // initialization
108 $(function(){
109     canvas = document.getElementById('scene');
110     ctx = canvas.getContext('2d');
111
112     var width = canvas.width;
113     var height = canvas.height;
114
115     // load background image
116     backgroundImage = new Image();
117     backgroundImage.src = 'images/stars.jpg';
118     backgroundImage.onload = function() {
119     }
120     backgroundImage.onerror = function() {
121         console.log('Error loading the background image.');
122     }
123
124     // initialization of space ship
125     var oSpShipImage = new Image();
126     oSpShipImage.src = 'images/space_ship.png';
127     oSpShipImage.onload = function() {
128     }
129     spaceShip = new SpaceShip(400, 300, 256, 256, oSpShipImage);
130
131     // load the button sprite image
132     var buttonImage = new Image();
133     buttonImage.src = 'images/button.png';
134     buttonImage.onload = function() {
135     }
136     button = new Button(310, 450, 180, 120, 'normal', buttonImage);
137
138     $('#scene').mousedown(function(e) { // binding mousedown event (for dragging)
139
140         var mouseX = e.layerX || 0;
141         var mouseY = e.layerY || 0;
142
143         if (!bDrawDialog &&
144             mouseX > spaceShip.x-128 && mouseX < spaceShip.x-128+spaceShip.w &&
145             mouseY > spaceShip.y-128 && mouseY < spaceShip.y-128+spaceShip.h) {
146
147             spaceShip.bDrag = true;
148             spaceShip.x = mouseX;
149             spaceShip.y = mouseY;
150         }
151
152         // button behavior
153         if (mouseX > button.x && mouseX < button.x+button.w && mouseY > button.y && mouseY < button.y+button.h) {
154             button.state = 'pressed';
155             button.imageShift = 262;
156         }
157     });
158
159     $('#scene').mousemove(function(e) { // binding mousemove event
160         var mouseX = e.layerX || 0;
161         var mouseY = e.layerY || 0;
162
163         if (!bDrawDialog && spaceShip.bDrag) {
164             spaceShip.x = mouseX;
165             spaceShip.y = mouseY;
166         }
167
168         // button behavior
169         if (button.state != 'pressed') {
170             button.state = 'normal';
171             button.imageShift = 0;
172             if (mouseX > button.x && mouseX < button.x+button.w && mouseY > button.y && mouseY < button.y+button.h) {
173                 button.state = 'hover';
174                 button.imageShift = 131;
175             }
176         }
177     });
178
179     $('#scene').mouseup(function(e) { // binding mouseup event
180         spaceShip.bDrag = false;
181
182         // button behavior
183         if (button.state == 'pressed') {
184             if (iDialogPage == 0) {
185                 iDialogPage++;
186                 bDrawDialog = !bDrawDialog;
187             } else if (iDialogPage == 2) {
188                 iDialogPage = 0;
189                 bDrawDialog = !bDrawDialog;
190             } else {
191                 iDialogPage++;
192             }
193         }
194         button.state = 'normal';
195         button.imageShift = 0;
196     });
197
198     setInterval(drawScene, 30); // loop drawScene
199 });

Here are several explanations about new features. 1. Drawing animated space with stars (pretty easy – we will shift image coordinates):

1 iBgShiftX -= 10;
2 if (iBgShiftX <= 0) {
3     iBgShiftX = 1024;
4 }
5 ctx.drawImage(backgroundImage, 0 + iBgShiftX, 0, 1024, 768, 0, 0, 800, 600);

Hope that all rest code pretty understandable. I added comments quite anywhere.

Step 4. Custom files

fonts/Ds-digib.ttf, images/button.png, images/space_ship.png and images/stars.jpg

All these files will available in our package

Live Demo
download in package

Separate big thanks to this book. This tell us about development of games in HTML5. Now it’s one of my favorite books )

Conclusion

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

Rate article
© 2025 Script Tutorials