Developing Your First HTML5 Game – Lesson 1

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 300pxcircle#ffffff#bababa 60%);
09     background-image: -moz-radial-gradient(600px 300pxcircle#ffffff#bababa 60%);
10     background-image: -o-radial-gradient(600px 300pxcircle#ffffff#bababa 60%);
11     background-image: radial-gradient(600px 300pxcircle#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 h2{
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 h3 {
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!