HTML5游戏开发系列教程5(译)

原文地址：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