Written by 
HTML5 Game Development – Lesson 1
Starting today we begin a series of articles on game development in HTML5. In our first article we will cover the basics – working with the canvas, creating simple objects, fill, and some linked event handlers by mouse. Also, pay attention at this stage, we will study this basis, not immediately work in 3D with WebGL. But we will get back to WebGL in the future.
In each next article we will make something new. The first time we create an object with seven vertices, in these vertices we will draw circles, we will able to move these vertices with dragging circles. Also we fill our result object with semi-transparent color. I think that this is enough for beginning.
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 step 1 (demo) | 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 step 1</h2>
<a href="http://www.script-tutorials.com/html5-game-development-lesson-1" 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;
}
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;
}
/* tutorial styles */
#scene {
background-image:url(../images/01.jpg);
position:relative;
}
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, just because contain all our work with graphic:
js/script.js
var canvas, ctx;
var circles = [];
var selectedCircle;
var hoveredCircle;
// -------------------------------------------------------------
// objects :
function Circle(x, y, radius){
this.x = x;
this.y = y;
this.radius = radius;
}
// -------------------------------------------------------------
// draw functions :
function clear() { // clear canvas function
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
}
function drawCircle(ctx, x, y, radius) { // draw circle function
ctx.fillStyle = 'rgba(255, 35, 55, 1.0)';
ctx.beginPath();
ctx.arc(x, y, radius, 0, Math.PI*2, true);
ctx.closePath();
ctx.fill();
}
function drawScene() { // main drawScene function
clear(); // clear canvas
ctx.beginPath(); // custom shape begin
ctx.fillStyle = 'rgba(255, 110, 110, 0.5)';
ctx.moveTo(circles[0].x, circles[0].y);
for (var i=0; i<circles.length; i++) {
ctx.lineTo(circles[i].x, circles[i].y);
}
ctx.closePath(); // custom shape end
ctx.fill(); // fill custom shape
ctx.lineWidth = 5;
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)';
ctx.stroke(); // draw border
for (var i=0; i<circles.length; i++) { // display all our circles
drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15);
}
}
// -------------------------------------------------------------
// initialization
$(function(){
canvas = document.getElementById('scene');
ctx = canvas.getContext('2d');
var circleRadius = 15;
var width = canvas.width;
var height = canvas.height;
var circlesCount = 7; // we will draw 7 circles randomly
for (var i=0; i<circlesCount; i++) {
var x = Math.random()*width;
var y = Math.random()*height;
circles.push(new Circle(x,y,circleRadius));
}
// binding mousedown event (for dragging)
$('#scene').mousedown(function(e) {
var canvasPosition = $(this).offset();
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not
var circleX = circles[i].x;
var circleY = circles[i].y;
var radius = circles[i].radius;
if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
selectedCircle = i;
break;
}
}
});
$('#scene').mousemove(function(e) { // binding mousemove event for dragging selected circle
var mouseX = e.layerX || 0;
var mouseY = e.layerY || 0;
if (selectedCircle != undefined) {
var canvasPosition = $(this).offset();
var radius = circles[selectedCircle].radius;
circles[selectedCircle] = new Circle(mouseX, mouseY,radius); // changing position of selected circle
}
hoveredCircle = undefined;
for (var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not
var circleX = circles[i].x;
var circleY = circles[i].y;
var radius = circles[i].radius;
if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) {
hoveredCircle = i;
break;
}
}
});
$('#scene').mouseup(function(e) { // on mouseup - cleaning selectedCircle
selectedCircle = undefined;
});
setInterval(drawScene, 30); // loop drawScene
});
I commented all necessary code, so I hope that you will not get lost here.
Live Demo
download in package
Separate big thanks to Packt Publishing website which present me very useful book on developing games for the Web. Thanks to this book saw the light in this article. I’ve been wanting to start a similar series of articles for our site. And in the end – this book has become stimulus for me. I would be glad if it will be useful for you as well.
Conclusion
Cool, isn`t it? I will be glad to see your thanks and comments. Good luck!
| I am web developer with huge experience (in web languages and even in system languages). Also I am the founder of current website (and several another). I like to write blogs about web development/design. Feel free to Follow us on Twitter: tweetmeme_screen_name='AramisGC'; | If you Enjoyed our article don't forget to Share the love with your friends. |
I’ve written an article about optimising the performance of html5 games, maybe you’ll find some of the tips helpful.
Thanks!
Thanks for you comment, bookmarked
thanxs for this tutorial, but should me learn javascript first ,for using it with html5, or it’s not nessesary learn JS and learn html5 enough?
thanks for the all the efforts …it’s very helpful
2mohamed
But you can`t learn HTML5 without knowledges of JS, Just because HTML5 is JS (generally)
All I got when clicking the live demo was a blank screen. I’m using IE 7 on an xp box.
Hello Mike,
I can advise you to try this demo at more modern browser, like IE9, FF, Chrome, Safary
it’s very useful.
your website is very nice. i have learnt new things for your site.
thanks