[原創]html5游戲_五線譜打音符

html5手機游戲—五線譜打音符

1.[用五線譜打唱名]

2.[用唱名打五線譜]

3.[無限練習模式]

用來熟悉五線譜上音符的位置

代碼不難，這回注釋還是有認真寫的[只是廢代碼沒有全部刪除。。。]

效果圖：

---

在線地址:

http://wangxinsheng.herokuapp.com/staffgame

---

代碼：

index.html

 1 <!DOCTYPE html>
 2 <html>
 3     <head>
 4         <meta charset="utf-8">
 5         <meta name="description" content="html5 staff game">
 6         <meta name="keywords" content="staff,html5,canvas,web,game">
 7         <meta name="author" content="WangXinsheng">
 8         <meta name="apple-mobile-web-app-capable" content="yes">
 9         <meta name="apple-mobile-web-app-status-bar-style" content="black">
10         <meta name="viewport" id="viewport" content="width = device-width, initial-scale = 1, minimum-scale = 1, maximum-scale = 1, user-scalable=no">
11         <meta http-equiv="X-UA-Compatible" content="chrome=1">
12         <meta http-equiv="Pragma" content="no-cache">
13         <meta http-equiv="Cache-Control" content="no-cache">
14         <meta equiv="Expires" content="0">
15         <meta http-equiv="content-script-type" content="text/javascript">
16         <link type="image/x-icon" rel="shortcut icon" href="img/staffFavicon.ico" />
17         <title>CopyRight&copy;WangXinsheng</title>
18         <script src="requestNextAnimationFrame.js"></script>
19         <style type="text/css">
20          html {color:#000;background:#fff;margin:0px;}
21          body {-webkit-user-select:none;margin:0px;}
22         #gameWorld{cursor:pointer;}
23         #btn_start{color:red;font-size:40px;font-weight:bold;z-index:999;background:#fff;text-align:center;overflow:hidden;}
24         #btn_start p {vertical-align:middle;cursor:pointer;background:yellow;margin:20px 0px;}
25         #scoreC,#lx{width:100%;color:red;font-size:20px;font-weight:bold;z-index:999;display:none;cursor:pointer;}
26         #btn_start #copy {font-size:15px;vertical-align:middle;cursor:pointer;background:white;color:blue;}
27         </style>
28     </head>
29     <body>
30     <section>
31         <div style='position:absolute;left:0px;top:0px;width:100%;height:100%' id='btn_start'>
32             <p id='s1' onclick='javascript:staffGameGo(0,false);'>五線譜打唱名</p>
33             <p id='s2' onclick='javascript:staffGameGo(1,false);'>唱名打五線譜</p>
34             <p id='s3' onclick='javascript:staffGameGo(0,true);'>無限練習<br />五線譜打唱名</p>
35             <p id='s4' onclick='javascript:staffGameGo(1,true);'>無限練習<br />唱名打五線譜</p>
36             <p id='copy'>powered by 王欣盛<br />2015/01/22+1+1<br />wangxsh42@126.com</p>
37         </div>
38         <div style='position:absolute;left:0px;top:0px;' id='scoreC'>
39         </div>
40         <div style='position:absolute;left:0px;top:0px;' id='lx'>
41         </div>
42         <canvas id="gameWorld" style="position: absolute; left: 0px; top: 0px;">
43             <p>You need a modern browser to view this.</p>
44         </canvas>
45         <canvas id="gameWorldTouch" style="position: absolute; left: 0px; top: 0px;display:none;">
46         </canvas>
47     </section>
48     </body>
49     <script src="staffGame.js"></script>
50 </html>

staffGame.js

  1 ;
  2 var debug = true;
  3 var gameWorld = function (mode,goOn) {
  4     //this.mode = mode;
  5     /*function init params*/
  6     function doVarInit() {
  7         //總線數
  8         allLine = gyj.x + dyj.x + gy.x + dy.x + doo.x;
  9         //總間數
 10         allGap = gyj.j + dyj.j + gy.j + dy.j + doo.j;
 11         if(debug)
 12             console.log("總線數 "+allLine,"總間數 "+allGap);
 13         jxObjLst=[];
 14         djBtnLst=[];
 15         circleDoLst=[];
 16         wxpDoLst=[];
 17     }
 18     /*function on resize the window*/
 19     function doSize() {
 20         if(!picIsLoaded()){setTimeout(doSize,200);}
 21         document.getElementById("gameWorldTouch").style.display="block";
 22         caW = window.innerWidth;
 23         caH = window.innerHeight;
 24         caObj.width = caW;
 25         caObj.height = caH;
 26         caObj.style.width = caW + "px";
 27         caObj.style.height = caH + "px";
 28         caTObj.width = caW;
 29         caTObj.height = caH;
 30         caTObj.style.width = caW + "px";
 31         caTObj.style.height = caH + "px";
 32         bdjPX =Math.floor( caW / 80);
 33         lastFpsUpdateTime = new Date;
 34         lastFpsUpdateTimeBDJ = new Date;
 35         score = 0;
 36         wrong = 0;
 37         /*線寬，間寬計算*/
 38         //1/3為五線譜，或按鈕
 39         buttonH = parseInt(caH / 3);
 40         if(mode==0){
 41             //五線譜 高度
 42             buttonH = parseInt(caH / 3 * 2);
 43             //線寬為間寬的0.5
 44             lineW = parseInt(buttonH / (allGap*2+allLine));
 45             //間寬
 46             gapW = lineW * 2;
 47             /*線等高于間 補丁，線太細就太難點中了*/
 48             lineW = parseInt(buttonH / (allGap+allLine));
 49             gapW = lineW;
 50             //最高音
 51             highest = gyj.x + gyj.j + gy.x + gy.j;
 52             //最低音
 53             low = dyj.x + dyj.j + dy.x + dy.j;
 54 
 55             if(debug)
 56                 console.log("線寬 "+lineW,"間寬 "+gapW);
 57             wxpO = new wxp(caH,caW,buttonH,gyj,dyj,gy,dy,doo,allLine,allGap,lineW,gapW,mode,picsLst);
 58             wxpO.draw(caCt);
 59             //gen("circleDo");
 60 
 61             /*生成間線對象列表*/
 62             if(debug)console.log("線間對象列表---Start");
 63             var nowTop = caH - (lineW * allLine + gapW * allGap) + 0.5;
 64             var high = 0;
 65             // 高音譜上加
 66             var base = gy.x + gy.j;
 67             for(i=gyj.x+gyj.j;i>=1;i--){
 68                 if(i%2==0){
 69                     high = lineW;
 70                 }else{
 71                     high = gapW;
 72                 }
 73                 jxObjLst.push({"v":(base+i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
 74                 if(debug)console.log("gyj: v "+(base+i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
 75                 nowTop += high;
 76             }
 77             // 高音譜
 78             base = 0;
 79             for(i=gy.x+gy.j;i>=1;i--){
 80                 if(i%2==0){
 81                     high = lineW;
 82                 }else{
 83                     high = gapW;
 84                 }
 85                 jxObjLst.push({"v":(base+i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
 86                 if(debug)console.log("gy: v "+(base+i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
 87                 nowTop += high;
 88             }
 89             // doo
 90             jxObjLst.push({"v":0,"top":nowTop,"high":lineW,"type":"Line"});
 91             if(debug)console.log("doo: v "+0,"top "+nowTop,"high "+lineW,"type "+"Line");
 92             nowTop += lineW;
 93             // 低音譜
 94             base = 0;
 95             for(i=1;i<=dy.x+dy.j;i++){
 96                 if(i%2==0){
 97                     high = lineW;
 98                 }else{
 99                     high = gapW;
100                 }
101                 jxObjLst.push({"v":(base-i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
102                 if(debug)console.log("dy: v "+(base-i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
103                 nowTop += high;
104             }
105             // 低音譜下加
106             base = -dy.x-dy.j;
107             for(i=1;i<=dyj.x+dyj.j;i++){
108                 if(i%2==0){
109                     high = lineW;
110                 }else{
111                     high = gapW;
112                 }
113                 jxObjLst.push({"v":(base-i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
114                 if(debug)console.log("dyj: v "+(base-i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
115                 nowTop += high;
116             }
117             if(debug)console.log("線間對象列表---End");
118 
119         }else if(mode==1){
120             /*五線譜*/
121             //五線譜 高度
122             buttonH = parseInt(caH / 3 * 2);
123             //線寬為間寬的0.5
124             lineW = parseInt(buttonH / (allGap*2+allLine));
125             //間寬
126             gapW = lineW * 2;
127             /*線等高于間 補丁，線太細就太難點中了*/
128             lineW = parseInt(buttonH / (allGap+allLine));
129             gapW = lineW;
130             //最高音
131             highest = gyj.x + gyj.j + gy.x + gy.j;
132             //最低音
133             low = dyj.x + dyj.j + dy.x + dy.j;
134             //五線譜最左邊
135             wxpDoLeft = gapW * 6;
136 
137             if(debug)
138                 console.log("線寬 "+lineW,"間寬 "+gapW);
139             wxpO = new wxp(caH,caW,buttonH,gyj,dyj,gy,dy,doo,allLine,allGap,lineW,gapW,mode,picsLst);
140             wxpO.draw(caCt);
141             //gen("circleDo");
142 
143             /*生成間線對象列表*/
144             if(debug)console.log("線間對象列表---Start");
145             var nowTop = 0;
146             var high = 0;
147             // 高音譜上加
148             var base = gy.x + gy.j;
149             for(i=gyj.x+gyj.j;i>=1;i--){
150                 if(i%2==0){
151                     high = lineW;
152                 }else{
153                     high = gapW;
154                 }
155                 jxObjLst.push({"v":(base+i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
156                 if(debug)console.log("gyj: v "+(base+i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
157                 nowTop += high;
158             }
159             // 高音譜
160             base = 0;
161             for(i=gy.x+gy.j;i>=1;i--){
162                 if(i%2==0){
163                     high = lineW;
164                 }else{
165                     high = gapW;
166                 }
167                 jxObjLst.push({"v":(base+i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
168                 if(debug)console.log("gy: v "+(base+i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
169                 nowTop += high;
170             }
171             // doo
172             jxObjLst.push({"v":0,"top":nowTop,"high":lineW,"type":"Line"});
173             if(debug)console.log("doo: v "+0,"top "+nowTop,"high "+lineW,"type "+"Line");
174             nowTop += lineW;
175             // 低音譜
176             base = 0;
177             for(i=1;i<=dy.x+dy.j;i++){
178                 if(i%2==0){
179                     high = lineW;
180                 }else{
181                     high = gapW;
182                 }
183                 jxObjLst.push({"v":(base-i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
184                 if(debug)console.log("dy: v "+(base-i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
185                 nowTop += high;
186             }
187             // 低音譜下加
188             base = -dy.x-dy.j;
189             for(i=1;i<=dyj.x+dyj.j;i++){
190                 if(i%2==0){
191                     high = lineW;
192                 }else{
193                     high = gapW;
194                 }
195                 jxObjLst.push({"v":(base-i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"});
196                 if(debug)console.log("dyj: v "+(base-i),"top "+nowTop,"high "+high,"type "+(i%2==0?"Line":"gap"));
197                 nowTop += high;
198             }
199             if(debug)console.log("線間對象列表---End");
200             /*唱名按鈕*/
201             var rw = Math.floor(caW / 8);
202             var rh = Math.floor((caH - Math.ceil(buttonH)) / 4);
203             var r = rw<rh?rw:rh;
204             if(debug)console.log("唱名打擊按鈕半徑: ",rw,rh,r);
205             for(var i=0;i<7;i++){
206                 var name = ((i==0)?"do":(i==1)?"re":(i==2)?"mi":(i==3)?"fa":(i==4)?"so":(i==5)?"la":(i==6)?"si":"do");
207                 var diff =  Math.floor(caH - Math.ceil(buttonH));
208                 var top = 0;
209                 var left = 0;
210                 if(i<3){
211                     top = Math.ceil(buttonH) + Math.floor(diff / 4);
212                     left = (caW / 3) * (0.5 + i%3);
213                 }else{
214                     top = Math.ceil(buttonH) + Math.floor(diff / 4 * 3);
215                     left = (caW / 4) * (0.5 + (i-3)%4);
216                 }
217                 djBtnLst.push(new djBtn(bgCLst[i],fontCLst[i],name,name,top,r,left));
218                 djBtnLst[i].draw(caCt);
219             }
220         }
221 
222     }
223     function gen(name) {
224         /*product object*/
225         switch(name){
226             case "circleDo":
227                 //音值
228                 var v = parseInt(
229                 Math.random()>0.34
230                 ?Math.random()*(highest)
231                 :-1*low+Math.random()*(low)
232                 );
233                 //唱名
234                 var vT = Math.abs(v % 7);
235                 vT = v<0?7-vT:vT;
236                 //音階
237                 var yj = (v / 7)>0?Math.floor(v / 7):Math.ceil(v / 7);
238                 var name2 = 
239                 v<0?((yj-1)+'').replace('-','↓'):((yj>=1&&v!=6)?"↑":'')
240                 +((yj-((v+7)%7==0?1:0))+'').replace("0",'').replace("-1",'');
241                 var name = ((vT==0)?"do":(vT==1)?"re":(vT==2)?"mi":(vT==3)?"fa":(vT==4)?"so":(vT==5)?"la":(vT==6)?"si":"do") + name2;
242                 r = Math.floor((caH - buttonH)/4);
243                 cy = Math.floor(r + Math.random()*(caH - buttonH - 2*r));
244                 if(debug)console.log("音值 "+v,"唱名 "+name,"音階 "+yj,"唱名值 "+vT);
245                 var cDo =new circleDo(bgCLst[vT],fontCLst[vT],v,name,cy,r,circleDoLst.length>0?circleDoLst[circleDoLst.length-1].left+2.5*circleDoLst[circleDoLst.length-1].r:caW-r);
246                 circleDoLst.push(cDo);
247                 //cDo.draw(caCt);
248                 break;
249             case "wxpDo":
250                 //音值
251                 var v = parseInt(
252                 Math.random()>0.34
253                 ?Math.random()*(highest)
254                 :-1*low+Math.random()*(low)
255                 );
256                 //唱名
257                 var vT = Math.abs(v % 7);
258                 vT = v<0?7-vT:vT;
259                 //音階
260                 var yj = (v / 7)>0?Math.floor(v / 7):Math.ceil(v / 7);
261                 var name2 = 
262                 v<0?((yj-1)+'').replace('-','↓'):((yj>=1&&v!=6)?"↑":'')
263                 +((yj-((v+7)%7==0?1:0))+'').replace("0",'').replace("-1",'');
264                 var name = ((vT==0)?"do":(vT==1)?"re":(vT==2)?"mi":(vT==3)?"fa":(vT==4)?"so":(vT==5)?"la":(vT==6)?"si":"do") + name2;
265                 r = Math.floor(gapW*1);
266                 var cy = 0;
267                 for(var j=0;j<jxObjLst.length;j++){
268                     if(jxObjLst[j].v==v){
269                         cy = jxObjLst[j].top+jxObjLst[j].high*0.5;
270                         break;
271                     }
272                 }
273                 if(debug)console.log("音值 "+v,"唱名 "+name,"音階 "+yj,"唱名值 "+vT);
274                 var cDo =new wxpDo('blue','white',v,name,cy,r,wxpDoLst.length>0?wxpDoLst[wxpDoLst.length-1].left+gapW*4:caW-gapW*2);
275                 wxpDoLst.push(cDo);
276                 cDo.draw(caCt);
277                 //cDo.draw(caCt);
278                 break;
279             default:
280         }
281     }
282     function picIsLoaded() {
283         return toLoadPicCount <= loadPicCount ? true : false;
284     }
285     function loadPics() {
286         /*load pic to objectList*/
287         for (var i = 0; i < pics.length; i++) {
288             var imgTmp = new Image();
289             imgTmp.src = pics[i];
290             imgTmp.onload = loadedImg;
291             picsLst.push(imgTmp);
292         }
293     }
294     function loadedImg() {
295         //console.log(loadPicCount, toLoadPicCount);
296         return ++loadPicCount;
297     }
298     function animate(time) {
299         if (picIsLoaded()) {
300             if(!goOn && (wrong>=maxWrong || score<=-100 || score>15000)){
301                 var s = Math.floor(score);
302                 var name="";
303                 if(s<=-50){
304                     name='音盲';
305                 }else if(s<500){
306                     name='普通人'
307                 }else if(s<5000){
308                     name='識音達人'
309                 }else if(s<10000){
310                     name='識音天才'
311                 }else{
312                     name='絕對音感？'
313                 }
314                 document.getElementById("scoreC").innerHTML = "稱號: "+name +",得分： "+s+" 【游戲結束】";
315                 
316                 document.getElementsByTagName('title')[0].innerHTML = name+",得分【"+Math.floor(score)+"】";
317                 document.getElementById("btn_start").style.display="block";
318                 document.getElementById("gameWorldTouch").style.display="none";
319                 return;
320             }
321             var now = (+new Date);
322             if (mode == 0 && now - lastFpsUpdateTimeBDJ > bdjTime) {
323                 bdjLeft = circleDoLst.length>0?circleDoLst[0].left:r*2;
324                 if(bdjLeft>=r){
325                     lastFpsUpdateTimeBDJ = now;
326                     wxpO.clearCircleDo(caCt);
327                     for(var i=0;i<circleDoLst.length;i++){
328                         circleDoLst[i].left -= bdjPX;
329                         circleDoLst[i].draw(caCt);
330                     }
331                     bdjLeft = circleDoLst.length>0?circleDoLst[0].left:r*2;
332                     if(circleDoLst.length>0 && (circleDoLst[circleDoLst.length-1].left+r)<= caW){
333                         gen("circleDo");
334                     }
335                     /*draw canvas*/
336                     //caCt.save();
337                     //caCt.beginPath();
338                     //caCt.restore();
339                 }else{
340                     if(!goOn)score-=scoreFu;
341                 }
342             }
343             if (mode == 1 && now - lastFpsUpdateTimeBDJ > bdjTime) {
344                 bdjLeft = wxpDoLst.length>0?wxpDoLst[0].left:wxpDoLeft;
345                 if(bdjLeft>=wxpDoLeft){
346                     lastFpsUpdateTimeBDJ = now;
347                     wxpO.clearWXPDo(caCt);
348                     for(var i=0;i<wxpDoLst.length;i++){
349                         wxpDoLst[i].left -= bdjPX;
350                         wxpDoLst[i].draw(caCt);
351                     }
352                     bdjLeft = wxpDoLst.length>0?wxpDoLst[0].left:wxpDoLeft;
353                     if(wxpDoLst.length>0 && wxpDoLst[wxpDoLst.length-1].left<= caW){
354                         gen("wxpDo");
355 if(debug){console.log('a');}
356                     }
357                     /*draw canvas*/
358                     //caCt.save();
359                     //caCt.beginPath();
360                     //caCt.restore();
361                 }else{
362                     if(!goOn)score-=scoreFu;
363                 }
364             }
365             
366             /*score*/
367             if(!goOn){
368                 document.getElementById("scoreC").innerHTML = "得分： "+Math.floor(score)+" 錯誤： "+wrong+" / "+maxWrong;
369             }else{
370                 document.getElementById("lx").innerHTML = "無限練習模式，點擊此處返回菜單";
371                 document.getElementById("lx").addEventListener("click", backMenu, false);
372                 document.getElementById("lx").addEventListener("touchstart", backMenu, false);
373             }
374         }
375         window.requestNextAnimationFrame(animate);
376         /*if (isStop) {
377             isStart = false;
378             btn_start.innerHTML += "<br />游戲結束，馬上重新開始";
379             reStart();
380             return;
381         }
382         if (isStart) {
383             //var pastTime = Math.round(((new Date).getTime() - startTime) / 1E3 * 100) / 100;
384             btn_start.innerHTML = pastTime;
385             btn_start.innerHTML = "分數: " + goodPass + " <br />用時: " + pastTime + " 秒";
386             var now = (+new Date);
387             if (now - lastFpsUpdateTime > 100) {
388                 lastFpsUpdateTime = now;
389                 goOn();
390                 caCt.fillStyle = "#fff";
391                 caCt.fillRect(0, 0, caObj.width, caObj.height);
392                 caCt.fillStyle = "#000";
393                 //caCt.clearRect(0, 0, caObj.width, caObj.height);
394                 drawBird();
395                 drawZALst();
396                 doJudge();
397             }
398         } else {
399             caCt.clearRect(0, 0, caObj.width, caObj.height);
400             drawBird();
401             drawZALst();
402         }*/
403     }
404     function backMenu(){
405         document.getElementById("btn_start").style.display= "block";
406         document.getElementById("gameWorldTouch").style.display="none";
407         return;
408     }
409     function eventBund(){
410         if(!v){
411             //caTObj.addEventListener("mousemove", onMouseMove, false);
412             caTObj.addEventListener("click", onMouseClick, false);
413         }else{
414             caTObj.addEventListener("touchstart", onTouchStart, false);
415             caTObj.addEventListener("touchmove", onTouchMove, false);
416             caTObj.addEventListener("touchend", stopEvent, false);
417             caTObj.addEventListener("touchcancel", stopEvent, false);
418             caTObj.addEventListener("gesturestart", stopEvent, false);
419             caTObj.addEventListener("gesturechange", stopEvent, false);
420             caTObj.addEventListener("gestureend", stopEvent, false);
421         }
422         //document.getElementById("s1").addEventListener("click", onStart, false);
423         //document.getElementById("s2").addEventListener("click", onStart, false);
424     }
425     function onStart(e){
426         document.getElementById("btn_start").style.display="none";
427         if(!goOn){
428             document.getElementById("scoreC").style.display="block";
429         }else{
430             document.getElementById("lx").style.display="block";
431         }
432     }
433     function onMouseMove(e){
434         //mouseTObj.x = e.pageX;
435         //mouseTObj.y = e.pageY;
436     }
437     function onTouchMove(e){
438         e.preventDefault();
439         var touch = e.touches[0];
440         //mouseTObj.x = touch.pageX;
441         //mouseTObj.y = touch.pageY;
442         return false;
443     }
444     function onTouchStart(e){
445         e.preventDefault();
446         var touch = e.touches[0];
447         touched({"x":touch.pageX,"y":touch.pageY});
448         //mouseTObj.x = touch.pageX;
449         //mouseTObj.y = touch.pageY;
450         return false;
451     }
452     function onMouseClick(e){
453         touched({"x":e.pageX,"y":e.pageY});
454     }
455     function touched(pos){
456         if(mode==0){
457             // 五線譜
458             if(debug){console.log("click: ",pos);}
459             /*判斷哪個線間被點中*/
460             //jxObjLst item: {"v":(base+i),"top":nowTop,"high":high,"type":i%2==0?"Line":"gap"}
461             var value = null;
462             for(i=0;i<jxObjLst.length;i++){
463                 //if(debug){console.log("loop: ",jxObjLst[i].top,jxObjLst[i].high);}
464                 if(pos.y>jxObjLst[i].top){
465                     if(pos.y<=jxObjLst[i].top + jxObjLst[i].high){
466                         value = jxObjLst[i];
467                         break;
468                     }
469                 }
470             }
471             if(value==null)return;
472             if(debug){console.log("poisiton,value",pos,value);}
473             /*判斷正確與否，并消除被打擊對象*/
474             if(debug)console.log('被打擊對象列表： ',circleDoLst);
475             /*高亮提示當前所點線間*/
476             if(value!=null){
477                 //唱名
478                 var vT = Math.abs(value.v % 7);
479                 vT = value.v<0?7-vT:vT;
480                 var name = ((vT==0)?"do":(vT==1)?"re":(vT==2)?"mi":(vT==3)?"fa":(vT==4)?"so":(vT==5)?"la":(vT==6)?"si":"do");
481                 // 畫圖
482                 caTCt.clearRect(0,0,caW,caH);
483                 wxpO.drawOne(caTCt,value.top,value.high,alertColor);
484                 wxpO.drawText(caTCt,caW/2,caH/2,caW/5,name,alertColor);
485                 setTimeout(clearTouchCanvas,alertTime);
486             }
487             if(circleDoLst.length>0 && value!=null && circleDoLst[0].value == value.v){
488                 if(debug)console.log("%cclick right!!!","color:green");
489                 if(debug)console.log('被打擊對象列表： ',circleDoLst);
490                 circleDoLst.splice(0,1);
491                 gen("circleDo");
492                 bdjLeft = circleDoLst.length>0?circleDoLst[0].left:2*r;
493                 if(!goOn)score+=scoreOne;
494                 //wxpO.clearCircleDo(caCt);
495                 //gen("circleDo"); // temp
496             }else{
497                 if(debug)console.log("%cclick wrong!!!","color:red");
498                 if(!goOn)wrong++;
499                 if(debug)console.log("error",wrong);
500             }
501         }else if(mode==1){
502             // 五線譜
503             if(debug){console.log("click: ",pos);}
504             /*判斷哪個按鈕點中*/
505             //djBtnLst item: (bgC,fontC,value,name,top,r,left)
506             var value = null;
507             for(i=0;i<djBtnLst.length;i++){
508                 //if(debug){console.log("loop: ",jxObjLst[i].top,jxObjLst[i].high);}
509                 //var distance = Math.abs(((pos.x-djBtnLst[i].left)^2 + (pos.y-djBtnLst[i].top)^2)^0.5);
510                 var calX = pos.x - djBtnLst[i].left;        
511                 var calY = pos.y - djBtnLst[i].top;
512                 var distance = Math.pow((calX *calX + calY * calY), 0.5);
513                 
514                 console.log(distance,djBtnLst[i].r);
515                 if(distance<=djBtnLst[i].r){
516                     value = djBtnLst[i];
517                     break;
518                 }
519             }
520             if(value==null)return;
521             if(debug){console.log("poisiton,value",pos,value);}
522             /*判斷正確與否，并消除被打擊對象*/
523             if(debug)console.log('被打擊對象列表： ',wxpDoLst);
524             /*高亮提示當前點擊的所有線間*/
525             caTCt.clearRect(0,0,caW,caH);
526             if(value!=null){
527                 //線間list
528                 //var indexLst = [];
529                 for(var i = 0;i<jxObjLst.length;i++){
530                     var vT = Math.abs(jxObjLst[i].v % 7);
531                     vT = jxObjLst[i].v<0?7-vT:vT;
532                     var name = ((vT==0)?"do":(vT==1)?"re":(vT==2)?"mi":(vT==3)?"fa":(vT==4)?"so":(vT==5)?"la":(vT==6)?"si":"do");
533                     if(name==value.name){ 
534                         wxpO.drawOne(caTCt,jxObjLst[i].top,jxObjLst[i].high,alertColor);
535                     }
536                     //if(name==value.name){indexLst.push(i);}
537                 }
538                 // 清空畫圖
539                 setTimeout(clearTouchCanvas,alertTime);
540             }
541             if(wxpDoLst.length>0 && value!=null && wxpDoLst[0].name.indexOf(value.name)!=-1){
542                 if(debug)console.log("%cclick right!!!","color:green");
543                 if(debug)console.log('被打擊對象列表： ',circleDoLst);
544                 wxpDoLst.splice(0,1);
545                 gen("wxpDo");
546                 bdjLeft = wxpDoLst.length>0?wxpDoLst[0].left:wxpDoLeft;
547                 if(!goOn)score+=scoreOne;
548                 //wxpO.clearCircleDo(caCt);
549                 //gen("circleDo"); // temp
550             }else{
551                 if(debug)console.log("%cclick wrong!!!","color:red");
552                 if(!goOn)wrong++;
553                 if(debug)console.log("error",wrong);
554             }
555         }
556     }
557     function clearTouchCanvas(){
558         caTCt.clearRect(0,0,caW,caH);
559         if(debug)console.log('clear');
560     }
561     function stopEvent(e) { e.preventDefault(); e.stopPropagation(); }
562     var v = navigator.userAgent.toLowerCase().indexOf("android") != -1 || navigator.userAgent.toLowerCase().indexOf("iphone") != -1 || navigator.userAgent.toLowerCase().indexOf("ipad") != -1,
563     caW = window.innerWidth,
564     caH = window.innerHeight,
565     caObj = document.getElementById("gameWorld"),
566     caCt = caObj.getContext("2d"),
567     caTObj = document.getElementById("gameWorldTouch"),
568     caTCt = caTObj.getContext("2d"),
569     //rabitPicLst = ["img/rabit_left_stop.png", "img/rabit_on_ground_left_jump0.png", "img/rabit_on_ground_left_jump1.png", "img/rabit_right_stop.png", "img/rabit_on_ground_right_jump0.png", "img/rabit_on_ground_right_jump1.png", "img/rabit_on_air_left_stop.png", "img/rabit_on_air_left_down.png", "img/rabit_on_air_right_stop.png", "img/rabit_on_air_right_down.png"],
570     //rabitPicOLst = [],
571     pics = ['img/gyph.png','img/dyph.png'],
572     loadPicCount = 0,
573     toLoadPicCount = 2,
574     /*線與間*/
575     //高音普上加線，3線，2間，上下無間
576     gyj = {x:2,j:2,up:0,down:0},
577     //低音普上加線，2線，1間，上下無間
578     dyj = {x:0,j:0,up:0,down:0},
579     //高音普線，5線，6間，上下有間
580     gy = {x:5,j:5,up:1,down:1},
581     //低音普線，5線，6間，上下有間
582     dy = {x:5,j:5,up:1,down:1},
583     //高音低音間do
584     doo = {x:1,j:1,up:0,down:0},
585     //最高音 五線譜用
586     highest = 0,
587     //最低音 五線譜用
588     low = 0,
589     //被打擊對象列表 五線譜用
590     circleDoLst = [],
591     //被打擊對象列表 唱名用
592     wxpDoLst = [],
593     //總線數
594     allLine = 0,
595     //總間數
596     allGap = 0,
597     //線寬
598     lineW = 0,
599     //間寬
600     gapW = 0,
601     //打擊區總高度
602     buttonH = 0,
603     //五線譜object
604     wxpO = null,
605     //唱名object
606     cmO = null,
607     //模式 0：五線譜打，1：唱名打
608     mode = mode,
609     //間線對象列表
610     jxObjLst = [],
611     //顏色 五線譜用
612     bgCLst = ["green","red","blue","green","pink","orange","yellow","gray"],
613     fontCLst = ["yellow","yellow","white","white","blue","white","black","yellow"],
614     // 被打擊對象平移更新時間
615     bdjTime = 100,
616     // 被打擊對象平移速度
617     bdjPX = 5,
618     // 被打擊對象最左端
619     bdjLeft = 0,
620     // 被打擊對象半徑
621     r = 0,
622     // 唱名打擊用
623     // 唱名button列表
624     djBtnLst = [],
625     // 被打擊對象初期數
626     bdjInitCount = 5,
627     // 提示顏色
628     alertColor = "rgba(102,0,255,0.5)",
629     // 提示時間
630     alertTime = 500,
631     // 五線譜音符最左邊
632     wxpDoLeft = 0,
633     scoreOne=50,
634     scoreFu = 0.1;
635     score=0,
636     wrong=0,
637     maxWrong = 10,
638     picsLst=[],
639     goOn = goOn
640     ;
641 
642     this.init = function () {
643     mode = this.mode;
644     goOn = this.goOn;
645         //*********load images*********
646         loadPics();
647         //*********init params*******
648         doVarInit();
649         //*********init size and vars*******
650         doSize();
651         //*********product bell and rabit*******
652         for(var i = 0;i<bdjInitCount;i++)
653             if(mode==0){
654                 gen("circleDo");
655             }else{
656                 gen("wxpDo");
657             }
658         //*********Event***********
659         eventBund();
660         //*********Gen***********
661         //*********animate***********
662         animate();
663     }
664 }
665 
666 /*
667 * 五線譜 object
668 */
669 function wxp(caH,caW,buttonH,gyj,dyj,gy,dy,doo,allLine,allGap,lineW,gapW,mode,picLst) {
670     this.mode = mode; //0： 打譜，1： 打唱名
671     this.caH = caH; // 畫面高度
672     this.caW = caW; // 畫面寬度
673     this.buttonH=buttonH; // 打擊區高度
674     this.gyj=gyj; // 高音上
675     this.dyj=dyj; // 低音下
676     this.gy=gy; // 高音
677     this.dy=dy; // 低音
678     this.doo=doo; // 中間do
679     this.allLine=allLine; // 總線
680     this.allGap=allGap; // 總間
681     this.lineW=lineW; // 線高
682     this.gapW=gapW; // 間高
683     this.picLst = picLst;
684 }
685 wxp.prototype.clearCircleDo = function (context) {
686     // 打譜用
687     var circleDoH = this.caH - (this.lineW * this.allLine + this.gapW * this.allGap) + 0.5;
688     context.clearRect(0,0,this.caW,circleDoH);
689     /*context.save();
690     context.fillStyle = 'white';
691     context.fillRect(0,0,this.caW,circleDoH);
692     context.restore();*/
693 }
694 wxp.prototype.clearWXPDo = function (context) {
695     // 打唱名用
696     context.clearRect(0,0,this.caW,this.buttonH);
697     this.draw(context);
698     /*context.save();
699     context.fillStyle = 'white';
700     context.fillRect(0,0,this.caW,circleDoH);
701     context.restore();*/
702 }
703 wxp.prototype.drawOne = function (context,top,high,color) {
704     context.save();
705     context.beginPath();
706     context.fillStyle = color;
707     context.fillRect(0,top,this.caW,high);
708     context.closePath();
709     context.restore();
710 }
711 wxp.prototype.drawText = function (context,x,y,size,text,color) {
712     context.save();
713     context.beginPath();
714     context.fillStyle = color;
715     context.font = parseInt(size)+"pt Calibri";
716     context.textBaseline = 'middle';
717     context.textAlign='center';
718     context.fillText(text,x,y);
719     context.closePath();
720     context.restore();
721 }
722 wxp.prototype.draw = function (context) {
723     var gyphT = 0,gyphH = (this.gapW+this.lineW) * 6,gyphW = this.gapW * 3;
724     var dyphT = 0,dyphH = (this.gapW+this.lineW) * 3,dyphW = this.gapW * 3;
725     /*畫線*/
726     var nowTop = 0;
727     if(this.mode==0){
728         nowTop = this.caH - (this.lineW * this.allLine + this.gapW * this.allGap) + 0.5;
729     }
730     context.save();
731     for(var i=1;i<=this.gyj.x;i++){
732         context.beginPath();
733         context.lineWidth = this.lineW/2;
734         context.fillStyle = "gray";
735         context.strokeStyle = "gray";
736         context.moveTo(0,nowTop+this.lineW/2);
737         context.lineTo(this.caW,nowTop+this.lineW/2);
738         context.stroke();
739         context.fill();
740         nowTop += this.lineW + this.gapW;
741     }
742     for(var i=1;i<=this.gy.x;i++){
743         if(i==1)gyphT = nowTop - this.gapW * 2; 
744         context.beginPath();
745         context.lineWidth = this.lineW/2;
746         context.fillStyle = "black";
747         context.strokeStyle = "black";
748         context.moveTo(0,nowTop+this.lineW/2);
749         context.lineTo(this.caW,nowTop+this.lineW/2);
750         context.stroke();
751         context.fill();
752         nowTop += this.lineW + this.gapW;
753     }
754     for(var i=1;i<=this.doo.x;i++){
755         context.beginPath();
756         context.lineWidth = this.lineW/2;
757         context.fillStyle = "red";
758         context.strokeStyle = "red";
759         context.moveTo(0,nowTop+this.lineW/2);
760         context.lineTo(this.caW,nowTop+this.lineW/2);
761         context.stroke();
762         context.fill();
763         nowTop += this.lineW + this.gapW;
764     }
765     for(var i=1;i<=this.dy.x;i++){
766         if(i==1)dyphT = nowTop + this.gapW * 0;
767         context.beginPath();
768         context.lineWidth = this.lineW/2;
769         context.fillStyle = "black";
770         context.strokeStyle = "black";
771         context.moveTo(0,nowTop+this.lineW/2);
772         context.lineTo(this.caW,nowTop+this.lineW/2);
773         context.stroke();
774         context.fill();
775         nowTop += this.lineW + this.gapW;
776     }
777     for(var i=1;i<=this.dyj.x;i++){
778         context.beginPath();
779         context.lineWidth = this.lineW/2;
780         context.fillStyle = "gray";
781         context.strokeStyle = "gray";
782         context.moveTo(0,nowTop+this.lineW/2);
783         context.lineTo(this.caW,nowTop+this.lineW/2);
784         context.stroke();
785         context.fill();
786         nowTop += this.lineW + this.gapW;
787     }
788     context.closePath();
789     context.restore();
790     /*畫譜號*/
791     /*var gImg = new Image();
792     var dImg = new Image();
793     gImg.src = 'img/gyph.png';
794     dImg.src = 'img/dyph.png';
795     gImg.onload = function(){context.drawImage(gImg,10,gyphT,gyphW,gyphH);}
796     dImg.onload = function(){context.drawImage(dImg,10,dyphT,dyphW,dyphH);}*/
797     
798     context.drawImage(this.picLst[0],10,gyphT,gyphW,gyphH);
799     context.drawImage(this.picLst[1],10,dyphT,dyphW,dyphH);
800 }
801 
802 /*
803 * 五線譜用 被打擊對象 object
804 */
805 function circleDo(bgC,fontC,value,name,top,r,left) {
806     this.bgC = bgC; // 背景顏色
807     this.fontC = fontC; // 字體顏色
808     this.value=value; // 音值
809     this.name=name; // 顯示文字
810     this.left=left; // r，left
811     this.top=top; // top
812     this.r=r; // 半徑
813 }
814 circleDo.prototype.draw = function (context) {
815     context.save();
816     context.fillStyle = this.bgC;
817     context.beginPath();
818     context.arc(this.left/* + 75*/,this.top/* +75*/,this.r,0,2*Math.PI);
819     context.closePath();
820     context.fill();
821     
822     context.fillStyle = this.fontC;
823     context.font = parseInt(this.r/2)+"pt Calibri";
824     context.textBaseline = 'middle';
825     context.textAlign='center';
826     context.fillText(this.name, this.left/* + 75*/,this.top/* +75*/);
827     context.restore();
828 }
829 
830 /*
831 * 唱名用 唱名button object
832 */
833 function djBtn(bgC,fontC,value,name,top,r,left) {
834     this.bgC = bgC; // 背景顏色
835     this.fontC = fontC; // 字體顏色
836     this.value=value; // 音值
837     this.name=name; // 顯示文字
838     this.left=left; // r，left
839     this.top=top; // top
840     this.r=r; // 半徑
841 }
842 djBtn.prototype.draw = function (context) {
843     context.save();
844     context.fillStyle = this.bgC;
845     context.beginPath();
846     context.arc(this.left/* + 75*/,this.top/* +75*/,this.r,0,2*Math.PI);
847     context.closePath();
848     context.fill();
849     
850     context.fillStyle = this.fontC;
851     context.font = parseInt(this.r/2)+"pt Calibri";
852     context.textBaseline = 'middle';
853     context.textAlign='center';
854     context.fillText(this.name, this.left/* + 75*/,this.top/* +75*/);
855     context.restore();
856 }
857 /*
858 * 唱名用 被打擊對象 object
859 */
860 function wxpDo(bgC,fontC,value,name,top,r,left) {
861     this.bgC = bgC; // 背景顏色
862     this.fontC = fontC; // 字體顏色
863     this.value=value; // 音值
864     this.name=name; // 顯示文字
865     this.left=left; // left
866     this.top=top; // top
867     this.r=r; // 半徑
868 }
869 wxpDo.prototype.draw = function (context) {
870     context.save();
871     context.strokeStyle = this.bgC;
872     context.lineWidth = this.r*0.5;
873     this.ParamEllipse(context,this.left,this.top,this.r*1.5,this.r);
874     
875     var lineLeft1 = 0;
876     var lineTop1 = 0;
877     var lineLeft2 = 0;
878     var lineTop2 = 0;
879     if(this.value>=6){
880         //第三線以上，下尾巴
881         lineLeft1=lineLeft2=-1*this.r*1.4;
882         lineTop1=0;
883         lineTop2=this.r*5;
884     }else{
885         lineLeft1=lineLeft2=this.r*1.4;
886         lineTop1=0;
887         lineTop2=-1*this.r*5;
888     }
889     context.beginPath();
890     context.moveTo(lineLeft1,lineTop1);
891     context.lineTo(lineLeft2,lineTop2);
892     context.stroke();
893     context.closePath();
894 
895     context.restore();
896 }
897 //---------使用三次貝塞爾曲線模擬橢圓1---------------------
898 //此方法也會產生當lineWidth較寬，橢圓較扁時，
899 //長軸端較尖銳，不平滑的現象
900 wxpDo.prototype.ParamEllipse = function(context, x, y, a, b){
901   //關鍵是bezierCurveTo中兩個控制點的設置
902    //0.5和0.6是兩個關鍵系數（在本函數中為試驗而得）
903    var ox = 0.5 * a,
904        oy = 0.6 * b;
905    //context.save();
906    context.translate(x, y);
907    context.beginPath();
908    //從橢圓縱軸下端開始逆時針方向繪制
909    context.moveTo(0, b); 
910    context.bezierCurveTo(ox, b, a, oy, a, 0);
911    context.bezierCurveTo(a, -oy, ox, -b, 0, -b);
912    context.bezierCurveTo(-ox, -b, -a, -oy, -a, 0);
913    context.bezierCurveTo(-a, oy, -ox, b, 0, b);
914    context.closePath();
915    context.stroke();
916    //context.restore();
917 };
918 /*example of object*/
919 /*
920 * bell object
921 */
922 /*function bell(top, left, width, height, si, maxSI) {
923     this.t = top; // 高度
924 }
925 bell.prototype.disappear = function (speed) {
926     this.a -= speed;
927     return this.a <= 0 ? true : false;
928 }*/
929 
930 /*example of extends*/
931 /*
932 * bird object
933 */
934 /*function bird(top, left, width, height, si, maxSI, direction) {
935     this.t = top; // 高度
936 }
937 bird.prototype = new bell;
938 */
939 
940 var gameWorldObj = null;
941 onload = function () {
942     document.getElementsByTagName('title')[0].innerHTML = "[WXS]五線譜游戲";
943     /*gameWorldObj = new gameWorld(0);
944     gameWorldObj.init();*/
945 }
946 function staffGameGo(mode,goOn){
947     if(gameWorldObj == null)
948         gameWorldObj = new gameWorld(mode,goOn);
949     gameWorldObj.goOn = goOn;
950     gameWorldObj.mode = mode;
951     gameWorldObj.init();    
952     document.getElementById("btn_start").style.display="none";
953     if(!goOn){
954         document.getElementById("scoreC").style.display="block";
955         document.getElementById("lx").style.display="none";}
956     else{
957         document.getElementById("lx").style.display="block";
958         document.getElementById("scoreC").style.display="none";
959     }
960 }