Home » Tutorials

HTML5 Game Development – Navigating Your Spaceship – Lesson 3

Tutorials
Author Reading 14 min Views 1.2k. 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

[sociallocker]

download in package

[/sociallocker]

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         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <!--[if lt IE 9]>
08           <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
09         <![endif]-->
10         <script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
11         <script type="text/javascript" src="js/script.js"></script>
12     </head>
13     <body>
14         <div class="container">
15             <canvas id="scene" width="800" height="600"></canvas>
16         </div>
17         <footer>
18             <h2>HTML5 Game Development - Lesson 3</h2>
19             <a href="https://www.script-tutorials.com/html5-game-development-navigating-your-spaceship-lesson-3" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
20         </footer>
21     </body>
22 </html>

Step 2. CSS

Here are used CSS styles.

css/main.css

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

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

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

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
© 2026 Script Tutorials