HTML5 Game Development – Lesson 5
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
<!DOCTYPE html> <html lang="en" > <head> <meta charset="utf-8" /> <title>HTML5 Game Development - Lesson 5 | Script Tutorials</title> <link href="css/main.css" rel="stylesheet" type="text/css" /> <script src="js/jquery-1.5.2.min.js"></script> <script src="js/script.js"></script> </head> <body> <header> <h2>HTML5 Game Development - Lesson 5</h2> <a href="https://www.script-tutorials.com/html5-game-development-lesson-5/" class="stuts">Back to original tutorial on <span>Script Tutorials</span></a> </header> <div class="container"> <div class="bar"> <button id="options">Options</button> </div> <canvas id="scene" width="800" height="600"></canvas> <div id="controls"> <div id="dialogs" class="dialogs"> <div id="dialog1" class="dialog dialogVisible"> <h1>Welcome to lesson #5</h1> <textarea> Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. Please click buttons from 0 to 9 to produce different sounds. </textarea> <button id="but1">Next</button> </div> <div id="dialog2" class="dialog"> <h1>Second page</h1> <textarea> Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. Plus, this is are also a demonstration of DOM-based dialog windows with CSS3 and jQuery. </textarea> <button id="but2">Next</button> </div> <div id="dialog3" class="dialog"> <h1>Third page</h1> <button id="but3">First page</button> <button id="but_close">Close</button> </div> </div> </div> </div> </body> </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
/* page layout styles */ *{ margin:0; padding:0; } body { background-color:#eee; color:#fff; font:14px/1.3 Arial,sans-serif; } header { background-color:#212121; box-shadow: 0 -1px 2px #111111; display:block; height:70px; position:relative; width:100%; z-index:100; } header h2{ font-size:22px; font-weight:normal; left:50%; margin-left:-400px; padding:22px 0; position:absolute; width:540px; } header 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; } header .stuts span { font-size:22px; font-weight:bold; margin-left:5px; } .container { margin: 20px auto; overflow: hidden; position: relative; width: 800px; } /* game lesson styles */ .bar { background-color: #337755; height: 0; opacity: 0.9; overflow: hidden; position: absolute; width: 800px; z-index: 10; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } .bar button { padding:3px; float:right; } .barVisible { height: 30px; } #scene { position:relative; } #controls { height: 600px; opacity: 1; position: absolute; top: 0; width: 800px; z-index: 1; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } .controlsPanel { height:80px; opacity: 0 !important; width:120px; z-index: -1 !important; -moz-transform: scale(0.2); -ms-transform: scale(0.2); -o-transform: scale(0.2); -webkit-transform: scale(0.2); transform: scale(0.2); } #controls .dialogs { height: 400px; margin: 100px auto; overflow: hidden; position: relative; width: 600px; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } #controls .dialog { background-color: #444; border-radius: 25px; display: none; height: 400px; opacity: 0.95; position: absolute; text-align: center; width: 600px; -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } #controls .dialogVisible { display:block; } #controls .dialog > * { margin-bottom:20px; } #controls .dialog h1 { font-size: 36px; padding-top: 50px; position: relative; text-align: center; } #controls .dialog textarea { display: block; height: 150px; margin: 0 auto 20px; width: 400px; } #controls .dialog button { border-radius:20px; border-width:2px; width:100px; height:60px; -moz-transition: 1s; -ms-transition: 1s; -o-transition: 1s; -webkit-transition: 1s; transition: 1s; } #controls .dialog button:hover { border-radius:30px; border-width:4px; width:120px; } /* customized scrollbar */ #controls .dialog textarea::-webkit-scrollbar { width: 12px; } #controls .dialog textarea::-webkit-scrollbar-track { -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); -webkit-border-radius: 10px; border-radius: 10px; } #controls .dialog textarea::-webkit-scrollbar-thumb { -webkit-border-radius: 10px; border-radius: 10px; background: rgba(255,0,0,0.8); -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); } #controls .dialog textarea::-webkit-scrollbar-thumb:window-inactive { background: rgba(255,0,0,0.4); }
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
// inner variables var canvas, ctx; var image; var sounds = []; // sounds var lastColor = 'rgba(255, 128, 0, 0.5)'; // ------------------------------------------------------------- // draw functions : function clear() { // clear canvas function ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // main drawScene function clear(); // clear canvas ctx.drawImage(image, 0, 0); ctx.fillStyle = lastColor; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } // ------------------------------------------------------------- // initialization $(function(){ canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; // load background image image = new Image(); image.src = 'images/synthesizer.png'; image.onload = function() { } image.onerror = function() { console.log('Error loading the background image.'); } // sounds sounds[0] = new Audio('media/button-1.wav'); sounds[0].volume = 0.9; sounds[1] = new Audio('media/button-2.wav'); sounds[1].volume = 0.9; sounds[2] = new Audio('media/button-3.wav'); sounds[2].volume = 0.9; sounds[3] = new Audio('media/button-4.wav'); sounds[3].volume = 0.9; sounds[4] = new Audio('media/button-5.wav'); sounds[4].volume = 0.9; sounds[5] = new Audio('media/button-6.wav'); sounds[5].volume = 0.9; sounds[6] = new Audio('media/button-7.wav'); sounds[6].volume = 0.9; sounds[7] = new Audio('media/button-8.wav'); sounds[7].volume = 0.9; sounds[8] = new Audio('media/button-9.wav'); sounds[8].volume = 0.9; sounds[9] = new Audio('media/button-10.wav'); sounds[9].volume = 0.9; // click alerts $('#but1').click(function () { $('.dialog').removeClass('dialogVisible'); $('#dialog2').addClass('dialogVisible'); }); $('#but2').click(function () { $('.dialog').removeClass('dialogVisible'); $('#dialog3').addClass('dialogVisible'); }); $('#but3').click(function () { $('.dialog').removeClass('dialogVisible'); $('#dialog1').addClass('dialogVisible'); }); $('#but_close').click(function () { $('#controls').addClass('controlsPanel'); $('.bar').addClass('barVisible'); }); $('#options').click(function () { $('#controls').removeClass('controlsPanel'); $('.bar').removeClass('barVisible'); $('.dialog').removeClass('dialogVisible'); $('#dialog1').addClass('dialogVisible'); }); $(window).keydown(function(event){ // keyboard alerts switch (event.keyCode) { case 48: // '0' key sounds[0].currentTime = 0; sounds[0].play(); // play sound #1 lastColor = 'rgba(0, 128, 255, 0.5)'; break; case 49: // '1' key sounds[1].currentTime = 0; sounds[1].play(); // play sound #1 lastColor = 'rgba(128, 128, 0, 0.5)'; break; case 50: // '2' key sounds[2].currentTime = 0; sounds[2].play(); // play sound #1 lastColor = 'rgba(255, 128, 0, 0.5)'; break; case 51: // '3' key sounds[3].currentTime = 0; sounds[3].play(); // play sound #1 lastColor = 'rgba(0, 255, 0, 0.5)'; break; case 52: // '4' key sounds[4].currentTime = 0; sounds[4].play(); // play sound #1 lastColor = 'rgba(128, 255, 0, 0.5)'; break; case 53: // '5' key sounds[5].currentTime = 0; sounds[5].play(); // play sound #1 lastColor = 'rgba(255, 255, 0, 0.5)'; break; case 54: // '6' key sounds[6].currentTime = 0; sounds[6].play(); // play sound #1 lastColor = 'rgba(0, 0, 0, 0.5)'; break; case 55: // '7' key sounds[7].currentTime = 0; sounds[7].play(); // play sound #1 lastColor = 'rgba(0, 128, 0, 0.5)'; break; case 56: // '8' key sounds[8].currentTime = 0; sounds[8].play(); // play sound #1 lastColor = 'rgba(0, 255, 0, 0.5)'; break; case 57: // '9' key sounds[9].currentTime = 0; sounds[9].play(); // play sound #1 lastColor = 'rgba(128, 128, 256, 0.5)'; break; } }); setInterval(drawScene, 200); // loop drawScene });
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!
I am a new on HTML 5 development, just by own interest. These are really good examples, but for CSS3, i think i also need to learn more about them. Also, there is a fact, some functions are only limited supported by browsers. On my way and hope can grow with HTML5. Thanks.
Hi Jakkie,
Why? No, most the functions already is supported by most of modern browsers.
Great lessons! It’s one of the few on the internet so detailed.
C