原文地址：http://www.script-tutorials.com/html5-game-development-lesson-5/
最终我决定准备下一篇游戏开发系列的文章，我们将继续使用canvas来进行HTML5游戏开发系列的文章。今天我准备音乐的例子(有点儿像音乐合成器)，它用到了使用CSS3来制作的基于DOM的对话框。为什么我使用独立的对话框--简单，最主要是因为CSS有很多处理标准元素的文本和样式的方法，且它可以使JS的代码简单，同时能提升例子程序的速度。所以你可以对这些对话框应用特定的样式，例如我利用CSS3定制了一个滚动条。
前一篇的的介绍在HTML5游戏开发系列教程4(译)。
第一步：HTML
下面是我们第5课的源代码
index.html
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="utf-8" /> 5 <title>HTML5 Game Development - Lesson 5 | Script Tutorials</title> 6 <link href="css/main.css" rel="stylesheet" type="text/css" /> 7 <script src="js/jquery-2.0.0.min.js"></script> 8 <script src="js/script.js"></script> 9 </head> 10 <body> 11 <header> 12 <h2>HTML5 Game Development - Lesson 5</h2> 13 <a href="http://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>
上面代码中，我们的Canvas里，我添加了控制条(该控制条可以放一些操作按钮)，目前它包含一个按钮，用来显示对话框的。在Canvas下面是一系列的对话框信息。
第二步 CSS
下面是CSS的层叠样式
1 /* page layout styles */ 2 *{ 3 margin:0; 4 padding:0; 5 } 6 body { 7 background-color:#eee; 8 color:#fff; 9 font:14px/1.3 Arial,sans-serif; 10 } 11 header { 12 background-color:#212121; 13 box-shadow: 0 -1px 2px #111111; 14 display:block; 15 height:70px; 16 position:relative; 17 width:100%; 18 z-index:100; 19 } 20 header h2{ 21 font-size:22px; 22 font-weight:normal; 23 left:50%; 24 margin-left:-400px; 25 padding:22px 0; 26 position:absolute; 27 width:540px; 28 } 29 header a.stuts,a.stuts:visited{ 30 border:none; 31 text-decoration:none; 32 color:#fcfcfc; 33 font-size:14px; 34 left:50%; 35 line-height:31px; 36 margin:23px 0 0 110px; 37 position:absolute; 38 top:0; 39 } 40 header .stuts span { 41 font-size:22px; 42 font-weight:bold; 43 margin-left:5px; 44 } 45 .container { 46 margin: 20px auto; 47 overflow: hidden; 48 position: relative; 49 width: 800px; 50 } 51 52 /* game lesson styles */ 53 .bar { 54 background-color: #337755; 55 height: 0; 56 opacity: 0.9; 57 overflow: hidden; 58 position: absolute; 59 width: 800px; 60 z-index: 10; 61 62 -moz-transition: 1s; 63 -ms-transition: 1s; 64 -o-transition: 1s; 65 -webkit-transition: 1s; 66 transition: 1s; 67 } 68 .bar button { 69 padding:3px; 70 float:right; 71 } 72 .barVisible { 73 height: 30px; 74 } 75 #scene { 76 position:relative; 77 } 78 #controls { 79 height: 600px; 80 opacity: 1; 81 position: absolute; 82 top: 0; 83 width: 800px; 84 z-index: 1; 85 86 -moz-transition: 1s; 87 -ms-transition: 1s; 88 -o-transition: 1s; 89 -webkit-transition: 1s; 90 transition: 1s; 91 } 92 .controlsPanel { 93 height:80px; 94 opacity: 0 !important; 95 width:120px; 96 z-index: -1 !important; 97 98 -moz-transform: scale(0.2); 99 -ms-transform: scale(0.2); 100 -o-transform: scale(0.2); 101 -webkit-transform: scale(0.2); 102 transform: scale(0.2); 103 } 104 #controls .dialogs { 105 height: 400px; 106 margin: 100px auto; 107 overflow: hidden; 108 position: relative; 109 width: 600px; 110 111 -moz-transition: 1s; 112 -ms-transition: 1s; 113 -o-transition: 1s; 114 -webkit-transition: 1s; 115 transition: 1s; 116 } 117 #controls .dialog { 118 background-color: #444; 119 border-radius: 25px; 120 display: none; 121 height: 400px; 122 opacity: 0.95; 123 position: absolute; 124 text-align: center; 125 width: 600px; 126 127 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 128 129 -moz-transition: 1s; 130 -ms-transition: 1s; 131 -o-transition: 1s; 132 -webkit-transition: 1s; 133 transition: 1s; 134 } 135 #controls .dialogVisible { 136 display:block; 137 } 138 #controls .dialog > * { 139 margin-bottom:20px; 140 } 141 #controls .dialog h1 { 142 font-size: 36px; 143 padding-top: 50px; 144 position: relative; 145 text-align: center; 146 } 147 #controls .dialog textarea { 148 display: block; 149 height: 150px; 150 margin: 0 auto 20px; 151 width: 400px; 152 } 153 #controls .dialog button { 154 border-radius:20px; 155 border-width:2px; 156 width:100px; 157 height:60px; 158 159 -moz-transition: 1s; 160 -ms-transition: 1s; 161 -o-transition: 1s; 162 -webkit-transition: 1s; 163 transition: 1s; 164 } 165 #controls .dialog button:hover { 166 border-radius:30px; 167 border-width:4px; 168 width:120px; 169 } 170 171 /* customized scrollbar */ 172 #controls .dialog textarea::-webkit-scrollbar { 173 width: 12px; 174 } 175 #controls .dialog textarea::-webkit-scrollbar-track { 176 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.3); 177 -webkit-border-radius: 10px; 178 border-radius: 10px; 179 } 180 #controls .dialog textarea::-webkit-scrollbar-thumb { 181 -webkit-border-radius: 10px; 182 border-radius: 10px; 183 background: rgba(255,0,0,0.8); 184 -webkit-box-shadow: inset 0 0 6px rgba(0,0,0,0.5); 185 } 186 #controls .dialog textarea::-webkit-scrollbar-thumb:window-inactive { 187 background: rgba(255,0,0,0.4); 188 }
在上面代码的最后部分，你可以看见我是如何用CSS3来定制文本区的滚动条样式，目前这个功能只能在Chrome浏览器上工作(firefox也可以了)
第三步：JS
js/script.js
1 //内部变量 2 var canvas, ctx; 3 var image; 4 var sounds = []; 5 var lastColor = 'rgba(255, 128, 0, 0.5)'; 6 7 //清楚画布 8 function clear() { 9 ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); 10 } 11 12 // 13 function drawScene() { 14 clear(); 15 ctx.drawImage(image, 0, 0); 16 17 ctx.fillStyle = lastColor; 18 ctx.fillRect(0, 0, ctx.canvas.width, ctx.canvas.height); 19 } 20 21 //初始化 22 $(function() { 23 canvas = document.getElementById('scene'); 24 ctx = canvas.getContext('2d'); 25 26 var width = canvas.width; 27 var height = canvas.height; 28 29 //加载背景图片 30 image = new Image(); 31 image.src = 'images/synthesizer.png'; 32 image.onload = function() {} 33 image.onerror = function() { 34 console.log('Error loading the background image.'); 35 } 36 37 //每个按键的声音 38 sounds[0] = new Audio('media/button-1.wav'); 39 sounds[0].volume = 0.9; 40 sounds[1] = new Audio('media/button-2.wav'); 41 sounds[1].volume = 0.9; 42 sounds[2] = new Audio('media/button-3.wav'); 43 sounds[2].volume = 0.9; 44 sounds[3] = new Audio('media/button-4.wav'); 45 sounds[3].volume = 0.9; 46 sounds[4] = new Audio('media/button-5.wav'); 47 sounds[4].volume = 0.9; 48 sounds[5] = new Audio('media/button-6.wav'); 49 sounds[5].volume = 0.9; 50 sounds[6] = new Audio('media/button-7.wav'); 51 sounds[6].volume = 0.9; 52 sounds[7] = new Audio('media/button-8.wav'); 53 sounds[7].volume = 0.9; 54 sounds[8] = new Audio('media/button-9.wav'); 55 sounds[8].volume = 0.9; 56 sounds[9] = new Audio('media/button-10.wav'); 57 sounds[9].volume = 0.9; 58 59 //对话框按钮上的点击事件 60 $('#but1').click(function() { 61 $('.dialog').removeClass('dialogVisible'); 62 $('#dialog2').addClass('dialogVisible'); 63 }); 64 $('#but2').click(function() { 65 $('.dialog').removeClass('dialogVisible'); 66 $('#dialog3').addClass('dialogVisible'); 67 }); 68 $('#but3').click(function() { 69 $('.dialog').removeClass('dialogVisible'); 70 $('#dialog1').addClass('dialogVisible'); 71 }); 72 $('#but_close').click(function() { 73 $('#controls').addClass('controlsPanel'); 74 $('.bar').addClass('barVisible'); 75 }); 76 $('#options').click(function() { 77 $('#controls').removeClass('controlsPanel'); 78 $('.bar').removeClass('barVisible'); 79 $('.dialog').removeClass('dialogVisible'); 80 $('#dialog1').addClass('dialogVisible'); 81 }); 82 83 //键盘事件 84 $(window).keydown(function(event) { 85 switch (event.keyCode) { 86 case 48: // ‘0’ key 87 sounds[0].currentTime = 0; 88 sounds[0].play(); 89 lastColor = 'rgba(0, 128, 255, 0.5)'; 90 break; 91 case 49: // ‘1’ key 92 sounds[1].currentTime = 0; 93 sounds[1].play(); 94 lastColor = 'rgba(128, 128, 0, 0.5)'; 95 break; 96 case 50: // '2' key 97 sounds[2].currentTime = 0; 98 sounds[2].play(); 99 lastColor = 'rgba(255, 128, 0, 0.5)'; 100 break; 101 case 51: 102 sounds[3].currentTime = 0; 103 sounds[3].play(); 104 lastColor = 'rgba(0, 255, 0, 0.5)'; 105 break; 106 case 52: 107 sounds[4].currentTime = 0; 108 sounds[4].play(); 109 lastColor = 'rgba(128, 255, 0, 0.5)'; 110 break; 111 case 53: 112 sounds[5].currentTime = 0; 113 sounds[5].play(); 114 lastColor = 'rgba(255, 255, 0, 0.5)'; 115 break; 116 case 54: 117 sounds[6].currentTime = 0; 118 sounds[6].play(); 119 lastColor = 'rgba(0, 0, 0, 0.5)'; 120 break; 121 case 55: 122 sounds[7].currentTime = 0; 123 sounds[7].play(); 124 lastColor = 'rgba(0, 128, 0, 0.5)'; 125 break; 126 case 56: 127 sounds[8].currentTime = 0; 128 sounds[8].play(); 129 lastColor = 'rgba(0, 255, 0, 0.5)'; 130 break; 131 case 57: 132 sounds[9].currentTime = 0; 133 sounds[9].play(); 134 lastColor = 'rgba(128, 128, 255, 0.5)'; 135 break; 136 137 } 138 }); 139 setInterval(drawScene, 200); //循环重绘 140 });
结论：
今天，我们复习了在html5中使用声音，并且学习了如何使用CSS3来制作基于DOM的对话框。我将非常高兴看到你们的谢意和评论。好运！
源代码下载地址：http://www.script-tutorials.com/demos/205/source.zip