Script Tutorials

HTML5 Game Development – Lesson 5

—

by

admin
in

Finally I decided to prepare next Game-development article. We continue a series of articles on game development in HTML5 using canvas. Today I prepared musical example (it will something like program – synthesizer) with alternative DOM-based dialogs on CSS3. Why I added separated dialogs – easy, mostly because CSS have much more possibilities to play with text and styles of standard elements, then it can make result JS code smaller, and can increase result speed of example. So, you can apply nice custom styles for these dialogs with full power of CSS3 (as example – I customized scrollbar with css3).

Here you can read our previous lesson: Developing Your First HTML5 Game – Lesson 4.

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 is source code of our fifth lesson

index.html

01 <!DOCTYPE html>
02 <html lang="en" >
03     <head>
04         <meta charset="utf-8" />
05         <title>HTML5 Game Development - Lesson 5 | Script Tutorials</title>
06         <link href="css/main.css" rel="stylesheet" type="text/css" />
07         <script src="js/jquery-1.5.2.min.js"></script>
08         <script src="js/script.js"></script>
09     </head>
10     <body>
11         <header>
12             <h2>HTML5 Game Development - Lesson 5</h2>
13             <a href="https://www.script-tutorials.com/html5-game-development-lesson-5/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a>
14         </header>
15         <div class="container">
16             <div class="bar">
17                 <button id="options">Options</button>
18             </div>
19             <canvas id="scene" width="800" height="600"></canvas>
20             <div id="controls">
21                 <div id="dialogs" class="dialogs">
22                     <div id="dialog1" class="dialog dialogVisible">
23                         <h1>Welcome to lesson #5</h1>
24                         <textarea>
25 Please click buttons from 0 to 9 to produce different sounds.
26 Please click buttons from 0 to 9 to produce different sounds.
27 Please click buttons from 0 to 9 to produce different sounds.
28 Please click buttons from 0 to 9 to produce different sounds.
29 Please click buttons from 0 to 9 to produce different sounds.
30 Please click buttons from 0 to 9 to produce different sounds.
31 Please click buttons from 0 to 9 to produce different sounds.
32 Please click buttons from 0 to 9 to produce different sounds.
33                         </textarea>
34                         <button id="but1">Next</button>
35                     </div>
36                     <div id="dialog2" class="dialog">
37                         <h1>Second page</h1>
38                         <textarea>
39 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
40 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
41 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
42 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
43 Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery.
44                         </textarea>
45                         <button id="but2">Next</button>
46                     </div>
47                     <div id="dialog3" class="dialog">
48                         <h1>Third page</h1>
49                         <button id="but3">First page</button>
50                         <button id="but_close">Close</button>
51                     </div>
52                 </div>
53             </div>
54         </div>
55     </body>
56 </html>

Above our Canvas object I added extra controls bar (where we can add some action buttons). For now – it will contain single button to display dialog box. Below canvas – here is set of dialog messages.

Step 2. CSS

Here are used CSS styles.

css/main.css

001 /* page layout styles */
002 *{
003     margin:0;
004     padding:0;
005 }
006 body {
007     background-color:#eee;
008     color:#fff;
009     font:14px/1.3 Arial,sans-serif;
010 }
011 header {
012     background-color:#212121;
013     box-shadow: 0 -1px 2px #111111;
014     display:block;
015     height:70px;
016     position:relative;
017     width:100%;
018     z-index:100;
019 }
020 header h2{
021     font-size:22px;
022     font-weight:normal;
023     left:50%;
024     margin-left:-400px;
025     padding:22px 0;
026     position:absolute;
027     width:540px;
028 }
029 header a.stuts,a.stuts:visited{
030     border:none;
031     text-decoration:none;
032     color:#fcfcfc;
033     font-size:14px;
034     left:50%;
035     line-height:31px;
036     margin:23px 0 0 110px;
037     position:absolute;
038     top:0;
039 }
040 header .stuts span {
041     font-size:22px;
042     font-weight:bold;
043     margin-left:5px;
044 }
045 .container {
046     margin: 20px auto;
047     overflow: hidden;
048     position: relative;
049     width: 800px;
050 }
051 /* game lesson styles */
052 .bar {
053     background-color: #337755;
054     height: 0;
055     opacity: 0.9;
056     overflow: hidden;
057     position: absolute;
058     width: 800px;
059     z-index: 10;
060     -moz-transition: 1s;
061     -ms-transition: 1s;
062     -o-transition: 1s;
063     -webkit-transition: 1s;
064     transition: 1s;
065 }
066 .bar button {
067     padding:3px;
068     float:right;
069 }
070 .barVisible {
071     height: 30px;
072 }
073 #scene {
074     position:relative;
075 }
076 #controls {
077     height: 600px;
078     opacity: 1;
079     position: absolute;
080     top: 0;
081     width: 800px;
082     z-index: 1;
083     -moz-transition: 1s;
084     -ms-transition: 1s;
085     -o-transition: 1s;
086     -webkit-transition: 1s;
087     transition: 1s;
088 }
089 .controlsPanel {
090     height:80px;
091     opacity: 0 !important;
092     width:120px;
093     z-index: -1 !important;
094     -moz-transform: scale(0.2);
095     -ms-transform: scale(0.2);
096     -o-transform: scale(0.2);
097     -webkit-transform: scale(0.2);
098     transform: scale(0.2);
099 }
100 #controls .dialogs {
101     height: 400px;
102     margin: 100px auto;
103     overflow: hidden;
104     position: relative;
105     width: 600px;
106     -moz-transition: 1s;
107     -ms-transition: 1s;
108     -o-transition: 1s;
109     -webkit-transition: 1s;
110     transition: 1s;
111 }
112 #controls .dialog {
113     background-color: #444;
114     border-radius: 25px;
115     display: none;
116     height: 400px;
117     opacity: 0.95;
118     position: absolute;
119     text-align: center;
120     width: 600px;
121     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
122     -moz-transition: 1s;
123     -ms-transition: 1s;
124     -o-transition: 1s;
125     -webkit-transition: 1s;
126     transition: 1s;
127 }
128 #controls .dialogVisible {
129     display:block;
130 }
131 #controls .dialog > * {
132     margin-bottom:20px;
133 }
134 #controls .dialog h1 {
135     font-size: 36px;
136     padding-top: 50px;
137     position: relative;
138     text-align: center;
139 }
140 #controls .dialog textarea {
141     display: block;
142     height: 150px;
143     margin: 0 auto 20px;
144     width: 400px;
145 }
146 #controls .dialog button {
147     border-radius:20px;
148     border-width:2px;
149     width:100px;
150     height:60px;
151     -moz-transition: 1s;
152     -ms-transition: 1s;
153     -o-transition: 1s;
154     -webkit-transition: 1s;
155     transition: 1s;
156 }
157 #controls .dialog button:hover {
158     border-radius:30px;
159     border-width:4px;
160     width:120px;
161 }
162 /* customized scrollbar */
163 #controls .dialog textarea::-webkit-scrollbar {
164     width: 12px;
165 }
166 #controls .dialog textarea::-webkit-scrollbar-track {
167     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3);
168     -webkit-border-radius: 10px;
169     border-radius: 10px;
170 }
171 #controls .dialog textarea::-webkit-scrollbar-thumb {
172     -webkit-border-radius: 10px;
173     border-radius: 10px;
174     background: rgba(255,0,0,0.8);
175     -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5);
176 }
177 #controls .dialog textarea::-webkit-scrollbar-thumb:window-inactive {
178     background: rgba(255,0,0,0.4);
179 }

In bottom of these styles you can see how I customized scrollbar styles (of textarea) with CSS3. Right now it will work only for Chrome browser.

Step 3. JS

js/jquery-1.5.2.min.js

We use jQuery for our lesson. Available in package. Next file most important (here are all our html5 functional):

js/script.js

001 // inner variables
002 var canvas, ctx;
003 var image;
004 var sounds = []; // sounds
005 var lastColor = 'rgba(255, 128, 0, 0.5)';
006 // -------------------------------------------------------------
007 // draw functions :
008 function clear() { // clear canvas function
009     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
010 }
011 function drawScene() { // main drawScene function
012     clear(); // clear canvas
013     ctx.drawImage(image, 0, 0);
014     ctx.fillStyle = lastColor;
015     ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height);
016 }
017 // -------------------------------------------------------------
018 // initialization
019 $(function(){
020     canvas = document.getElementById('scene');
021     ctx = canvas.getContext('2d');
022     var width = canvas.width;
023     var height = canvas.height;
024     // load background image
025     image = new Image();
026     image.src = 'images/synthesizer.png';
027     image.onload = function() {
028     }
029     image.onerror = function() {
030         console.log('Error loading the background image.');
031     }
032     // sounds
033     sounds[0] = new Audio('media/button-1.wav');
034     sounds[0].volume = 0.9;
035     sounds[1] = new Audio('media/button-2.wav');
036     sounds[1].volume = 0.9;
037     sounds[2] = new Audio('media/button-3.wav');
038     sounds[2].volume = 0.9;
039     sounds[3] = new Audio('media/button-4.wav');
040     sounds[3].volume = 0.9;
041     sounds[4] = new Audio('media/button-5.wav');
042     sounds[4].volume = 0.9;
043     sounds[5] = new Audio('media/button-6.wav');
044     sounds[5].volume = 0.9;
045     sounds[6] = new Audio('media/button-7.wav');
046     sounds[6].volume = 0.9;
047     sounds[7] = new Audio('media/button-8.wav');
048     sounds[7].volume = 0.9;
049     sounds[8] = new Audio('media/button-9.wav');
050     sounds[8].volume = 0.9;
051     sounds[9] = new Audio('media/button-10.wav');
052     sounds[9].volume = 0.9;
053     // click alerts
054     $('#but1').click(function () {
055       $('.dialog').removeClass('dialogVisible');
056       $('#dialog2').addClass('dialogVisible');
057     });
058     $('#but2').click(function () {
059       $('.dialog').removeClass('dialogVisible');
060       $('#dialog3').addClass('dialogVisible');
061     });
062     $('#but3').click(function () {
063       $('.dialog').removeClass('dialogVisible');
064       $('#dialog1').addClass('dialogVisible');
065     });
066     $('#but_close').click(function () {
067       $('#controls').addClass('controlsPanel');
068       $('.bar').addClass('barVisible');
069     });
070     $('#options').click(function () {
071       $('#controls').removeClass('controlsPanel');
072       $('.bar').removeClass('barVisible');
073       $('.dialog').removeClass('dialogVisible');
074       $('#dialog1').addClass('dialogVisible');
075     });
076     $(window).keydown(function(event){ // keyboard alerts
077         switch (event.keyCode) {
078             case 48: // '0' key
079                 sounds[0].currentTime = 0;
080                 sounds[0].play(); // play sound #1
081                 lastColor = 'rgba(0, 128, 255, 0.5)';
082                 break;
083             case 49: // '1' key
084                 sounds[1].currentTime = 0;
085                 sounds[1].play(); // play sound #1
086                 lastColor = 'rgba(128, 128, 0, 0.5)';
087                 break;
088             case 50: // '2' key
089                 sounds[2].currentTime = 0;
090                 sounds[2].play(); // play sound #1
091                 lastColor = 'rgba(255, 128, 0, 0.5)';
092                 break;
093             case 51: // '3' key
094                 sounds[3].currentTime = 0;
095                 sounds[3].play(); // play sound #1
096                 lastColor = 'rgba(0, 255, 0, 0.5)';
097                 break;
098             case 52: // '4' key
099                 sounds[4].currentTime = 0;
100                 sounds[4].play(); // play sound #1
101                 lastColor = 'rgba(128, 255, 0, 0.5)';
102                 break;
103             case 53: // '5' key
104                 sounds[5].currentTime = 0;
105                 sounds[5].play(); // play sound #1
106                 lastColor = 'rgba(255, 255, 0, 0.5)';
107                 break;
108             case 54: // '6' key
109                 sounds[6].currentTime = 0;
110                 sounds[6].play(); // play sound #1
111                 lastColor = 'rgba(0, 0, 0, 0.5)';
112                 break;
113             case 55: // '7' key
114                 sounds[7].currentTime = 0;
115                 sounds[7].play(); // play sound #1
116                 lastColor = 'rgba(0, 128, 0, 0.5)';
117                 break;
118             case 56: // '8' key
119                 sounds[8].currentTime = 0;
120                 sounds[8].play(); // play sound #1
121                 lastColor = 'rgba(0, 255, 0, 0.5)';
122                 break;
123             case 57: // '9' key
124                 sounds[9].currentTime = 0;
125                 sounds[9].play(); // play sound #1
126                 lastColor = 'rgba(128, 128, 256, 0.5)';
127                 break;
128         }
129     });
130     setInterval(drawScene, 200); // loop drawScene
131 });

I added my comments anywhere, hope that all code is pretty understandable.

Live Demo
download in package

Conclusion

Today, we repeated the knowledge on the use of sound in html5, and learn how to make alternative DOM-based dialogues with CSS3. I will be glad to see your thanks and comments. Good luck!