HTML5 Zone is brought to you in partnership with:

I was born in 1981 in one little city. Since I was 10y/o I programmed in different languages. My first languages were basic, then C++/MFC, after .Net (C#, VB.Net, J#, ASP.Net), XSL+XML processing). In the last 5 years I worked with web languages (HTML, CSS, PHP, SQL, XML, XSL, JavaScript). After university I worked in several different companies, eventually becoming a blogger. This is my hobby too. Andrey is a DZone MVB and is not an employee of DZone and has posted 109 posts at DZone. You can read more from them at their website. View Full User Profile

HTML5 Game Development - Lesson 5

12.21.2011
| 2019 views |
  • submit to reddit
We continue a series of articles on game development in HTML5 using canvas. Today I prepared musical example (it will be something like a synthesizer) with alternative DOM-based dialogs in CSS3. Why did I add separated dialogs? – Easy: mostly because CSS boasts so much more ability to play with text and styles of standard elements. Plus it can make resulting JS code smaller, and can increase speed as well. Besides, you can apply nice custom styles to these dialogs using the full power of CSS3 (for example, I customized the scrollbar with CSS3).

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

Here are our demo and downloadable packages:

Live Demo

download in package

Ok, download the example files and let's 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="http://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 a single button to display a dialog box. Below the canvas – here is a set of dialog messages.

Step 2. CSS

Here are the 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);
}

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

Step 3. JS

js/jquery-1.5.2.min.js

We use jQuery for our lesson (available in package). Next file is the most important (this makes 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 I thought necessary. Hope that all the code is pretty understandable.

Live Demo

download in package

Conclusion

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

 

Source: http://www.script-tutorials.com/html5-game-development-lesson-5/

 

Published at DZone with permission of Andrey Prikaznov, author and DZone MVB.

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Comments

Lucie Hauri replied on Sun, 2012/03/25 - 5:38am

it is a good lesson and I am your follower. I will read all the lessons timeline profile covers

Comment viewing options

Select your preferred way to display the comments and click "Save settings" to activate your changes.