HTML5 tutorial. 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.
Live Demo
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 step 1 (demo) | 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 step 1</ h2 > |
19 |
< a href = "https://www.script-tutorials.com/html5-game-development-lesson-1" 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 |
body { |
07 |
background-color : #bababa ; |
08 |
background-image : -webkit-radial-gradient( 600px 300px , circle , #ffffff , #bababa 60% ); |
09 |
background-image : -moz-radial-gradient( 600px 300px , circle , #ffffff , #bababa 60% ); |
10 |
background-image : -o-radial-gradient( 600px 300px , circle , #ffffff , #bababa 60% ); |
11 |
background-image : radial-gradient( 600px 300px , circle , #ffffff , #bababa 60% ); |
12 |
color : #fff ; |
13 |
font : 14px / 1.3 Arial , sans-serif ; |
14 |
min-height : 1000px ; |
15 |
} |
16 |
.container { |
17 |
width : 100% ; |
18 |
} |
19 |
.container > * { |
20 |
display : block ; |
21 |
margin : 50px auto ; |
22 |
} |
23 |
footer { |
24 |
background-color : #212121 ; |
25 |
bottom : 0 ; |
26 |
box-shadow: 0 -1px 2px #111111 ; |
27 |
display : block ; |
28 |
height : 70px ; |
29 |
left : 0 ; |
30 |
position : fixed ; |
31 |
width : 100% ; |
32 |
z-index : 100 ; |
33 |
} |
34 |
footer h 2 { |
35 |
font-size : 22px ; |
36 |
font-weight : normal ; |
37 |
left : 50% ; |
38 |
margin-left : -400px ; |
39 |
padding : 22px 0 ; |
40 |
position : absolute ; |
41 |
width : 540px ; |
42 |
} |
43 |
footer a.stuts,a.stuts:visited{ |
44 |
border : none ; |
45 |
text-decoration : none ; |
46 |
color : #fcfcfc ; |
47 |
font-size : 14px ; |
48 |
left : 50% ; |
49 |
line-height : 31px ; |
50 |
margin : 23px 0 0 110px ; |
51 |
position : absolute ; |
52 |
top : 0 ; |
53 |
} |
54 |
footer .stuts span { |
55 |
font-size : 22px ; |
56 |
font-weight : bold ; |
57 |
margin-left : 5px ; |
58 |
} |
59 |
h 3 { |
60 |
text-align : center ; |
61 |
} |
62 |
/* tutorial styles */ |
63 |
#scene { |
64 |
background-image : url (../images/ 01 .jpg); |
65 |
position : relative ; |
66 |
} |
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
01 |
var canvas, ctx; |
02 |
var circles = []; |
03 |
var selectedCircle; |
04 |
var hoveredCircle; |
05 |
// ------------------------------------------------------------- |
06 |
// objects : |
07 |
function Circle(x, y, radius){ |
08 |
this .x = x; |
09 |
this .y = y; |
10 |
this .radius = radius; |
11 |
} |
12 |
// ------------------------------------------------------------- |
13 |
// draw functions : |
14 |
function clear() { // clear canvas function |
15 |
ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); |
16 |
} |
17 |
function drawCircle(ctx, x, y, radius) { // draw circle function |
18 |
ctx.fillStyle = 'rgba(255, 35, 55, 1.0)' ; |
19 |
ctx.beginPath(); |
20 |
ctx.arc(x, y, radius, 0, Math.PI*2, true ); |
21 |
ctx.closePath(); |
22 |
ctx.fill(); |
23 |
} |
24 |
function drawScene() { // main drawScene function |
25 |
clear(); // clear canvas |
26 |
ctx.beginPath(); // custom shape begin |
27 |
ctx.fillStyle = 'rgba(255, 110, 110, 0.5)' ; |
28 |
ctx.moveTo(circles[0].x, circles[0].y); |
29 |
for ( var i=0; i<circles.length; i++) { |
30 |
ctx.lineTo(circles[i].x, circles[i].y); |
31 |
} |
32 |
ctx.closePath(); // custom shape end |
33 |
ctx.fill(); // fill custom shape |
34 |
ctx.lineWidth = 5; |
35 |
ctx.strokeStyle = 'rgba(0, 0, 255, 0.5)' ; |
36 |
ctx.stroke(); // draw border |
37 |
for ( var i=0; i<circles.length; i++) { // display all our circles |
38 |
drawCircle(ctx, circles[i].x, circles[i].y, (hoveredCircle == i) ? 25 : 15); |
39 |
} |
40 |
} |
41 |
// ------------------------------------------------------------- |
42 |
// initialization |
43 |
$( function (){ |
44 |
canvas = document.getElementById( 'scene' ); |
45 |
ctx = canvas.getContext( '2d' ); |
46 |
var circleRadius = 15; |
47 |
var width = canvas.width; |
48 |
var height = canvas.height; |
49 |
var circlesCount = 7; // we will draw 7 circles randomly |
50 |
for ( var i=0; i<circlesCount; i++) { |
51 |
var x = Math.random()*width; |
52 |
var y = Math.random()*height; |
53 |
circles.push( new Circle(x,y,circleRadius)); |
54 |
} |
55 |
// binding mousedown event (for dragging) |
56 |
$( '#scene' ).mousedown( function (e) { |
57 |
var canvasPosition = $( this ).offset(); |
58 |
var mouseX = e.layerX || 0; |
59 |
var mouseY = e.layerY || 0; |
60 |
for ( var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not |
61 |
var circleX = circles[i].x; |
62 |
var circleY = circles[i].y; |
63 |
var radius = circles[i].radius; |
64 |
if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) { |
65 |
selectedCircle = i; |
66 |
break ; |
67 |
} |
68 |
} |
69 |
}); |
70 |
$( '#scene' ).mousemove( function (e) { // binding mousemove event for dragging selected circle |
71 |
var mouseX = e.layerX || 0; |
72 |
var mouseY = e.layerY || 0; |
73 |
if (selectedCircle != undefined) { |
74 |
var canvasPosition = $( this ).offset(); |
75 |
var radius = circles[selectedCircle].radius; |
76 |
circles[selectedCircle] = new Circle(mouseX, mouseY,radius); // changing position of selected circle |
77 |
} |
78 |
hoveredCircle = undefined; |
79 |
for ( var i=0; i<circles.length; i++) { // checking through all circles - are mouse down inside circle or not |
80 |
var circleX = circles[i].x; |
81 |
var circleY = circles[i].y; |
82 |
var radius = circles[i].radius; |
83 |
if (Math.pow(mouseX-circleX,2) + Math.pow(mouseY-circleY,2) < Math.pow(radius,2)) { |
84 |
hoveredCircle = i; |
85 |
break ; |
86 |
} |
87 |
} |
88 |
}); |
89 |
$( '#scene' ).mouseup( function (e) { // on mouseup - cleaning selectedCircle |
90 |
selectedCircle = undefined; |
91 |
}); |
92 |
setInterval(drawScene, 30); // loop drawScene |
93 |
}); |
I commented all necessary code, so I hope that you will not get lost here.
Live Demo
[sociallocker]
download in package
[/sociallocker]
Conclusion
Cool, isn’t it? I will be glad to see your thanks and comments. Good luck!