世界上真正有價值的事物，需要熱情和犧牲才能完成。鐵人賽就是耶！

正片開始

今日課題：戰鬥時加上 BGM

這邊的話 html 上要加上 audio 的元素，
像這樣：

<audio src="bgm/battle02.mp3" id="music"></audio>

然後這邊值得注意的一點是，
Autoplay Policy Changes

Note: The Autoplay Policy launched in M66 Stable for audio and video elements and is effectively blocking roughly half of unwanted media autoplays in Chrome.
Chrome's autoplay policies will change in April of 2018 and I'm here to tell you why and how this is going to affect video playback with sound.
Chrome's autoplay policies are simple:

• Muted autoplay is always allowed.
• Autoplay with sound is allowed if:
  * User has interacted with the domain (click, tap, etc.).
  * On desktop, the user's Media Engagement Index threshold has been crossed, meaning the user has previously played video with sound.
  * The user has added the site to their home screen on mobile or installed the PWA on desktop.

也就是說，音樂不能再自動播放，除非是有互動(點擊等)的情況下才能播放聲音。
去年我這邊卡超久，後來才知道原來 chrome 有 Autoplay Policy orz

JavaScript 先宣告音樂物件：

const musicElement = document.getElementById("music");


musicElement.autoplay = true;
musicElement.loop = true;
musicElement.pause();

musicElement.onloadeddata = function() {
    console.log("載入完畢！");
    console.log(musicElement["readyState"]);
    musicElement.play();
    window.addEventListener("keydown", optionSelect);
}

這邊故意示範一次若沒有在互動中試圖要 musicElement.play() 會發生什麼事：

出現錯誤訊息「all.js:22 Uncaught (in promise) DOMException: play() failed because the user didn't interact with the document first. https://goo.gl/xX8pDD」

因此我將 musicElement.play() 移到 optionSelect 函數中：

function optionSelect(event){
    musicElement.play();
    ... 後略 ...
}

然後音樂播放好像沒有辦法在這裡展示XD"
Anyway，最後戰鬥成功，
先將原本戰鬥 BGM 暫停，
延遲 0.5 秒再播放戰鬥勝利的 BGM，
且這邊要記得音樂循環設定要改為 false musicElement.loop = false，
因為只有原本的戰鬥 BGM 需要循環播放，
戰鬥勝利的 BGM 則只需播放一次即可。

function finishWar(){
    musicElement.pause();
    setTimeout(function(){ 
        musicElement.loop = false;
        musicElement.src = "bgm/victory.mp3";
        musicElement.play();
    }, 500);
    ... 後略 ...
}

然後成果的話，
只能請大家自行畫面配 BGM 了XD

戰鬥中：仙劍奇俠傳 - 風起雲湧

戰鬥勝利：仙劍奇俠傳DOS版MIDI音樂 - 得勝令（戰鬥勝利）

本日打完收工！

[後記]

目前遇到一個問題，
就是如果視窗停留在戰鬥勝利畫面，
再按按鍵，戰鬥勝利的 BGM 會再播放一次。
我猜是我前面的監聽事件沒移除乾淨造成的，
所以這邊我有在戰鬥勝利移除所有監聽事件。

function roleActionExecute(){
        ... 前略 ...
        // 如果怪的血量 <= 0，表示怪被消滅了，後續動作不用執行
        if ( roleStatus[2].HealthPoint[0] <=0 ){
            console.log("戰鬥勝利");
            window.removeEventListener("keydown", optionSelect);
            window.removeEventListener("keydown", skillSelect);
            setTimeout(finishWar, 3000); // 延遲3秒才顯示戰鬥成功
        } 
        ... 後略 ...

然後就沒問題了！

明天如果時間允許，來寫個角色全滅的顯示。
然後國慶日快樂！！！！！

還有，這邊小小宣告，
有鑑於最近好幾次因為喝手搖飲導致很難入睡，
從今天開始 30 天不喝手搖飲料挑戰！
加油QAQ