Мы продолжаем серию статей о создании игр в HTML5 с использованием canvas. Сегодня будет рассмотрен музыкальный пример (программа чем-то будет напоминать синтезатор) с DOM диалогами на основе CSS3. Диалоги были выбраны в основном из-за CSS, так как используя CSS можно с легкостью изменить стили текста и различных элементов, что позволит существенно сократить JS код и увеличить скорость выполнения скрипта.
Здесь Вы можете ознакомиться с предыдущим уроком: Урок 4.
Шаг 1. HTML
index.html
<!DOCTYPE html> <html lang="ru" > <head> <meta charset="utf-8" /> <title>Разработка игр на HTML5 — Урок 5 | officialplat-tt.ru</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 — Урок 5</h2> <a href="http://officialplat-tt.ru/?p=1746" class="stuts">Вернуться на <span>officialplat-tt.ru</span></a> </header> <div class="container"> <div class="bar"> <button id="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>Урок #5</h1> <textarea> Нажмите на кнопки от 0 до 9 для воспроизведения звуков. Нажмите на кнопки от 0 до 9 для воспроизведения звуков. Нажмите на кнопки от 0 до 9 для воспроизведения звуков. Нажмите на кнопки от 0 до 9 для воспроизведения звуков. Нажмите на кнопки от 0 до 9 для воспроизведения звуков. </textarea> <button id="but1">Далее</button> </div> <div id="dialog2" class="dialog"> <h1>Вторая страница</h1> <textarea> Кроме того, это демонстрация DOM на основе диалогового окна с CSS3 и JQuery. Кроме того, это демонстрация DOM на основе диалогового окна с CSS3 и JQuery. Кроме того, это демонстрация DOM на основе диалогового окна с CSS3 и JQuery. Кроме того, это демонстрация DOM на основе диалогового окна с CSS3 и JQuery. Кроме того, это демонстрация DOM на основе диалогового окна с CSS3 и JQuery. </textarea> <button id="but2">Далее</button> </div> <div id="dialog3" class="dialog"> <h1>Третяя страница</h1> <button id="but3">На первую</button> <button id="but_close">Закрыть</button> </div> </div> </div> </div> </body> </html>
Над Canvas расположена дополнительная панель управления (там, мы можем добавить несколько кнопок). Сейчас там будет одна кнопка, которая будет открывать диалоговое окно. Ниже Canvas — выводятся диалоговые сообщения.
Шаг 2. CSS
Используемые CSS стили.
/* стили страницы */ *{ 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; } /* стили урока */ .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; } /* 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); }
В конце файла можно найти стили с помощью которых мы переопределили скролбары в текстовых полях с помощью CSS3. К сожалению, пока результат можно увидеть только в Google Chrome.
Шаг 3. JS
js/jquery-1.5.2.min.js
Мы используем jQuery в этом уроке. Файл можно найти в исходниках. Следующий файл самый важный (здесь расположен весь html5 функционал):
js/script.js
// внутренние переменные var canvas, ctx; var image; var sounds = []; // звуки var lastColor = 'rgba(255, 128, 0, 0.5)'; // ------------------------------------------------------------- // функции отрисовки : function clear() { // функция очистки canvas ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } function drawScene() { // главная функция отрисовки сцены clear(); // clear canvas ctx.drawImage(image, 0, 0); ctx.fillStyle = lastColor; ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); } // ------------------------------------------------------------- // инициализация $(function(){ canvas = document.getElementById('scene'); ctx = canvas.getContext('2d'); var width = canvas.width; var height = canvas.height; // загрузка фонового изображения image = new Image(); image.src = 'images/synthesizer.png'; image.onload = function() { } image.onerror = function() { console.log('Ошибка загрузки фонового изображения!'); } // Звуки 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; // обработчики кликов $('#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){ // обработчик нажатия кнопок клавиатуры switch (event.keyCode) { case 48: // '0' sounds[0].currentTime = 0; sounds[0].play(); // воспроизведение звука #1 lastColor = 'rgba(0, 128, 255, 0.5)'; break; case 49: // '1' sounds[1].currentTime = 0; sounds[1].play(); // воспроизведение звука #1 lastColor = 'rgba(128, 128, 0, 0.5)'; break; case 50: // '2' sounds[2].currentTime = 0; sounds[2].play(); // воспроизведение звука #1 lastColor = 'rgba(255, 128, 0, 0.5)'; break; case 51: // '3' sounds[3].currentTime = 0; sounds[3].play(); // воспроизведение звука #1 lastColor = 'rgba(0, 255, 0, 0.5)'; break; case 52: // '4' sounds[4].currentTime = 0; sounds[4].play(); // воспроизведение звука #1 lastColor = 'rgba(128, 255, 0, 0.5)'; break; case 53: // '5' sounds[5].currentTime = 0; sounds[5].play(); // воспроизведение звука #1 lastColor = 'rgba(255, 255, 0, 0.5)'; break; case 54: // '6' sounds[6].currentTime = 0; sounds[6].play(); // воспроизведение звука #1 lastColor = 'rgba(0, 0, 0, 0.5)'; break; case 55: // '7' sounds[7].currentTime = 0; sounds[7].play(); // воспроизведение звука #1 lastColor = 'rgba(0, 128, 0, 0.5)'; break; case 56: // '8' sounds[8].currentTime = 0; sounds[8].play(); // воспроизведение звука #1 lastColor = 'rgba(0, 255, 0, 0.5)'; break; case 57: // '9' sounds[9].currentTime = 0; sounds[9].play(); // воспроизведение звука #1 lastColor = 'rgba(128, 128, 256, 0.5)'; break; } }); setInterval(drawScene, 200); // зацикленная отрисовка сцены });
Чтобы код был более понятным, я добавил к нему комментарии.
Сегодня мы повторили как использовать звуки в HTML5 и узнали как создавать диалоговые окна с помощью CSS3. Я буду рад оставите комментарии и поделитесь ссылкой с друзьями. Удачи!
Получайте новые статьи блога прямо себе на почту