HTML5 Game Development – Lesson 3 - Navigating Your Spaceship
Join the DZone community and get the full member experience.
Join For Freetoday 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:
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
<!doctype html>
<html lang="en" >
<head>
<meta charset="utf-8" />
<title>html5 game development - lesson 3 | script tutorials</title>
<link href="css/main.css" rel="stylesheet" type="text/css" />
<!--[if lt ie 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<script type="text/javascript" src="js/jquery-1.5.2.min.js"></script>
<script type="text/javascript" src="js/script.js"></script>
</head>
<body>
<div class="container">
<canvas id="scene" width="800" height="600"></canvas>
</div>
<footer>
<h2>html5 game development - lesson 3</h2>
<a href="http://www.script-tutorials.com/html5-game-development-lesson-3 class="stuts">back to original tutorial on <span>script tutorials</span></a>
</footer>
</body>
</html>
step 2. css
here are used css styles.
css/main.css
/* general styles */
*{
margin:0;
padding:0;
}
@font-face {
font-family: "ds-digital";
src: url("../fonts/ds-digib.ttf");
}
body {
background-color:#bababa;
background-image: -webkit-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: -moz-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: -o-radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
background-image: radial-gradient(600px 300px, circle, #ffffff, #bababa 60%);
color:#fff;
font:14px/1.3 arial,sans-serif;
min-height:1000px;
}
.container {
width:100%;
}
.container > * {
display:block;
margin:50px auto;
}
footer {
background-color:#212121;
bottom:0;
box-shadow: 0 -1px 2px #111111;
display:block;
height:70px;
left:0;
position:fixed;
width:100%;
z-index:100;
}
footer h2{
font-size:22px;
font-weight:normal;
left:50%;
margin-left:-400px;
padding:22px 0;
position:absolute;
width:540px;
}
footer a.stuts,a.stuts:visited{
border:none;
text-decoration:none;
color:#fcfcfc;
font-size:14px;
left:50%;
line-height:31px;
margin:23px 0 0 110px;
position:absolute;
top:0;
}
footer .stuts span {
font-size:22px;
font-weight:bold;
margin-left:5px;
}
h3 {
text-align:center;
}
#scene {
position:relative;
}
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
// inner variables
var canvas, ctx;
var button;
var backgroundimage;
var spaceship;
var ibgshiftx = 1024;
var bdrawdialog = true;
var idialogpage = 1;
// -------------------------------------------------------------
// objects :
function button(x, y, w, h, state, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.state = state;
this.imageshift = 0;
this.image = image;
}
function spaceship(x, y, w, h, image) {
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.image = image;
this.bdrag = false;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearrect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawdialog() { // draw dialog function
if (bdrawdialog) {
var bg_gradient = ctx.createlineargradient(0, 200, 0, 400);
bg_gradient.addcolorstop(0.0, 'rgba(160, 160, 160, 0.8)');
bg_gradient.addcolorstop(1.0, 'rgba(250, 250, 250, 0.8)');
ctx.beginpath(); // custom shape begin
ctx.fillstyle = bg_gradient;
ctx.moveto(100, 100);
ctx.lineto(700, 100);
ctx.lineto(700, 500);
ctx.lineto(100, 500);
ctx.lineto(100, 100);
ctx.closepath(); // custom shape end
ctx.fill(); // fill custom shape
ctx.linewidth = 2;
ctx.strokestyle = 'rgba(128, 128, 128, 0.5)';
ctx.stroke(); // draw border
// draw the title text
ctx.font = '42px ds-digital';
ctx.textalign = 'center';
ctx.textbaseline = 'top';
ctx.shadowcolor = '#000';
ctx.shadowoffsetx = 2;
ctx.shadowoffsety = 2;
ctx.shadowblur = 2;
ctx.fillstyle = '#fff';
if (idialogpage == 1) {
ctx.filltext('welcome to lesson #3', ctx.canvas.width/2, 150);
ctx.font = '24px ds-digital';
ctx.filltext('after closing dialog you will able', ctx.canvas.width/2, 250);
ctx.filltext('to handle with spaceship with your mouse', ctx.canvas.width/2, 280);
} else if (idialogpage == 2) {
ctx.filltext('second page of dialog', ctx.canvas.width/2, 150);
ctx.font = '24px ds-digital';
ctx.filltext('any another text', ctx.canvas.width/2, 250);
}
}
}
function drawscene() { // main drawscene function
clear(); // clear canvas
// draw background
ibgshiftx -= 10;
if (ibgshiftx <= 0) {
ibgshiftx = 1024;
}
ctx.drawimage(backgroundimage, 0 + ibgshiftx, 0, 1024, 768, 0, 0, 800, 600);
// draw space ship
ctx.drawimage(spaceship.image, 0, 0, spaceship.w, spaceship.h, spaceship.x-128, spaceship.y-128, spaceship.w, spaceship.h);
// draw dialog
drawdialog();
// draw button
ctx.drawimage(button.image, 0, button.imageshift, button.w, button.h, button.x, button.y, button.w, button.h);
// draw button's text
ctx.font = '22px ds-digital';
ctx.fillstyle = '#ffffff';
ctx.filltext('next/hide/show', 400, 465);
ctx.filltext('dialog', 400, 500);
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getelementbyid('scene');
ctx = canvas.getcontext('2d');
var width = canvas.width;
var height = canvas.height;
// load background image
backgroundimage = new image();
backgroundimage.src="images/stars.jpg";
backgroundimage.onload = function() {
}
backgroundimage.onerror = function() {
console.log('error loading the background image.');
}
// initialization of space ship
var ospshipimage = new image();
ospshipimage.src="images/space_ship.png";
ospshipimage.onload = function() {
}
spaceship = new spaceship(400, 300, 256, 256, ospshipimage);
// load the button sprite image
var buttonimage = new image();
buttonimage.src="images/button.png";
buttonimage.onload = function() {
}
button = new button(310, 450, 180, 120, 'normal', buttonimage);
$('#scene').mousedown(function(e) { // binding mousedown event (for dragging)
var mousex = e.layerx || 0;
var mousey = e.layery || 0;
if (!bdrawdialog &&
mousex > spaceship.x-128 && mousex < spaceship.x-128+spaceship.w &&
mousey > spaceship.y-128 && mousey < spaceship.y-128+spaceship.h) {
spaceship.bdrag = true;
spaceship.x = mousex;
spaceship.y = mousey;
}
// button behavior
if (mousex > button.x && mousex < button.x+button.w && mousey > button.y && mousey < button.y+button.h) {
button.state = 'pressed';
button.imageshift = 262;
}
});
$('#scene').mousemove(function(e) { // binding mousemove event
var mousex = e.layerx || 0;
var mousey = e.layery || 0;
if (!bdrawdialog && spaceship.bdrag) {
spaceship.x = mousex;
spaceship.y = mousey;
}
// button behavior
if (button.state != 'pressed') {
button.state = 'normal';
button.imageshift = 0;
if (mousex > button.x && mousex < button.x+button.w && mousey > button.y && mousey < button.y+button.h) {
button.state = 'hover';
button.imageshift = 131;
}
}
});
$('#scene').mouseup(function(e) { // binding mouseup event
spaceship.bdrag = false;
// button behavior
if (button.state == 'pressed') {
if (idialogpage == 0) {
idialogpage++;
bdrawdialog = !bdrawdialog;
} else if (idialogpage == 2) {
idialogpage = 0;
bdrawdialog = !bdrawdialog;
} else {
idialogpage++;
}
}
button.state = 'normal';
button.imageshift = 0;
});
setinterval(drawscene, 30); // loop drawscene
});
here are several explanations about new features. 1. drawing animated space with stars (pretty easy – we will shift image coordinates):
ibgshiftx -= 10;
if (ibgshiftx <= 0) {
ibgshiftx = 1024;
}
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!
HTML
Opinions expressed by DZone contributors are their own.
Trending
-
Integration Testing Tutorial: A Comprehensive Guide With Examples And Best Practices
-
4 Expert Tips for High Availability and Disaster Recovery of Your Cloud Deployment
-
Seven Steps To Deploy Kedro Pipelines on Amazon EMR
-
Knowing and Valuing Apache Kafka’s ISR (In-Sync Replicas)
Comments