11/28進度
網頁檔加上black_key.png,white_key.png之預期結果
網頁預覽網址(基本上只要是Github大多適用這手法)
嗯,前陣子說要做簡略版音樂遊戲,那件事情其實我還沒忘
雖然我還是沒辦法掌握.wav檔格式
而musicXML格式勉強能掌握,但我覺得不是長久之計
(感覺上沒未來)
所以
我試了一下Anvil Studio可以輸出能用的.wav檔案
打算用那音效做出簡略的音樂遊戲來示範給大家看
不然最近每天一直學習(其實投入學習的時間還是很少,時常分心),但毫無產出
也是有些空虛的感覺
而且我跟圖書館界的五本《邊城浪子》也要盡快看一看、還給圖書館
(下次借書大概要往化學方面去借,可能要先用館藏系統查下杜威十進分類法編號)
古龍小說文字量較少,閱讀較快
但我目前也才把第二本玉香堂讀到190頁
再次說明我寫音樂遊戲的策略
圖形碰撞的只是外表上的假象
主要根據音符的速度(會記錄在文件檔,估計需要用jQuery.js,除非我能手動重現jQuery功能)
也就是說時間差在多少之內是perfect
時間差在多少之內但又在perfect外是good
時間差在good之外不過沒在一定時間之外是bad
然後不允許亂敲打鍵盤直到矇對為止
其實聽到這樣大概就可以寫程式了
那這篇大概就這樣!!
等真的有進度時大概會更新這篇
我目前預計只用88鍵其中的24鍵來示範
(雖然不清楚Github能放多少檔案,但是還是節省些用,反正示範目的能達成即可
那一般的音樂主旋律在完全2度音程之內是能表示的吧?
啊,不過如果要同時考慮高音譜與低音譜,可能要48個音效檔
MIDI的音效聽起來會沒那麼平滑啦!!
或者說是本來就是用音效檔來做的)
想法是:沒背景音樂,有按鍵才有音效,感覺相當於練譜
但我剛才突然想到
若是考慮高音譜低音譜約完全四度音程48個音效檔
那按鍵位置安排還是個問題呢!!
可能要有切模式按鍵(但這又不合鋼琴、電子琴習慣)
一橫排大約是12個鍵
完全3度音程是較為合適的
那可能會做完全三度音程吧
哎呀,不太對勁啊
有些音樂遊戲中常見的
長按的連續、連綿發音可能會有些麻煩(或者是就是因為這樣才是簡略版音樂遊戲)
那最短的音是要挑幾分音符呢?
------------11/28更新-------------------------
通常碰到難的事情
有兩個方法
一個是多次反覆觀看瀏覽
另一個是一次只看一小段
但這兩個都需要付出些耐心
那什麼事情才能讓我們自願付出耐心
那很可能就是吸引我們或我們覺得是對的、我們覺得並無不可的事情
這在古代叫做「師出有名」、「不出無名之師」
也可以說是做一件事情要有充分的理由
今天早上我睡得特別晚
其實宣告製作簡單的音樂遊戲雛型對我而言隱約是很有壓力的
雖然不知怎麼的
我還是在下午14:00時開始著手
而在下午15:35左右開始做今日的善後工作
我覺得這次我的程式碼有改進的地方
但若僅以做音樂遊戲雛型來說
目前這樣算尚可接受了!!
(感覺重複程式碼過多,應該有更好的處理方式)
我把我這次的網頁檔或說程式碼分三步驟
第一步驟是以前寫過的仿闇箏小遊戲,也就是vitality_example2.html
這是我主要抄襲的程式檔
再來是
simple_music_game_prototype_step_1.html
(只顯示一組白鍵與黑鍵)
與
simple_music_game_prototype_step_2.html
(一度完全音程,也就是12個音全部擺上去)
在用Javascript畫圖時
有件麻煩的事情是,程式執行的順序可能會亂掉
而若程式執行的順序亂掉
我們的圖可能就在還沒載入的時候被畫出來
那結果通常是空白的!!
因此需要做些特殊處理
怎麼處理呢?
先介紹下Javascript採用ECMAscript6新版語法寫物件的方式
function white_key(id,img,left,top,zIndex,width,height)
{
this.id=id;
this.image = new Image();
this.image.src=img;
var self=this;
this.image.onload = function(){self.draw_flag=true;}
this.left= left;
this.top= top;
this.zIndex = zIndex;
this.width=width;
this.height=height;
this.draw_flag = false;
}
物件的藍圖(有些忘記,這叫建構嗎?)大致上就這麼寫
this.image.onload = function(){self.draw_flag=true;}
代表說若圖片載入後,我把draw_flag旗幟設為已載入
等真的要用到時,再這麼寫
var key_1 = new white_key("第1個","white_key.png",0,0,3,35,117);
其中3是深度(depth或說Z軸),但我程式中其實沒有用到
而35跟117,是圖檔的長度與寬度
var elements = []; //elements是個陣列
elements.push(key_1); //把key_1放入elements陣列
那畫圖(螢幕重繪事件)大致上是這麼寫的
var timer = setInterval(re_draw,50);
function re_draw()
{
ctx.fillStyle="#FFFFFF"; //把背景設為白色
ctx.fillRect(0, 0,canvas_element.width , canvas_element.height);
elements.forEach(function(element) { //遍例每個在elements陣列裡的物件
if(element.draw_flag) //若圖片已載入,也就是draw_flag=true,就把它畫出來
{
ctx.drawImage(element.image,element.left, element.top);
}
});
}
那11/28就先停在這邊
創作內容
11/27起,簡略版音樂遊戲計劃(進度蝸速進展中,11/28先排出鋼琴圖)
單機版網頁遊戲系列相關 (20)
