文科少女學程式

前陣子為了證明自己一點都不廢，所以自己向自己下了一個戰帖。
既然模擬桌面的挑戰已經告一段落了，就來整理一下這一個禮拜多的實作心得吧！
在開始前，搶先來看一下完成品長怎樣^^

我是Github page傳送門
我是Github傳送門

為什麼想做模擬桌面？
前陣子看到很多關於模擬桌面的作品，最令我印象深刻的就是板塊設計所製作的 【卡關・闖關：GAMA25 線上展】
另外，也有看到AC助教用React做出的超擬真Windows XP桌面
自己覺得真的超級無敵酷，所以就默默自己對自己下戰帖，給自己的這個自己也不知道是否會成功的挑戰。
在決定做這個挑戰的時候，剛好又是蔡依林演唱會的那幾週，因為自己搶不到高雄的票，無法去看高雄場的演唱會，
太過哀傷下，就決定用蔡依林主題做一個自以為很酷炫的電腦桌面，
又因為自己最近突然開始想到要玩DOS版金庸群俠傳，所以是做復古版本的桌面。

製作前的準備

1. 大概寫下這次開發過程中，我可能會需要作出哪些功能，大概的呈現方式、色調。
2. 也寫下自己希望自己能完成的挑戰內容有哪些。
3. 大概規劃一個進度時程。

本次挑戰的兩大目標
1. 手刻音樂播放器
以前從來沒有做過音樂播放器，雖然大概知道用audio標籤即可，但是因為想要製作成自己想要的樣式，
所以必須自己實作出音樂進度條的功能。
實際實作的概念：
－進度條：是以音樂播放進度(%)，下去計算進度條要動到哪裡(ex: 音樂播放了10% X 進度條總長度 = 現在應該顯示的進度)
－拖曳進度：監聽滑鼠點擊到放開的事件，並計算從點下去到放開後，滑鼠游標位置被移動了多少，
進一步與原本已播放進度下去加總計算現在應該播放哪一段音樂，並且顯示進度條的變化。
－循環播放功能：利用audio的ended事件，搭配一個循環播放用的陣列，呈現能不斷循環播放的功能。
2. 實作視窗拖曳功能
在查詢資料前，其實自己對於實作這個功能並沒有什麼想法，也沒有概念，所以其實一開始很擔心自己做不出來。
實際實作的概念：
- 拖曳功能：跟音樂播放視窗的進度條有點類似，個別找出滑鼠點擊及放開後的位置，去計算移動距離，
讓視窗能依照滑鼠的移動而被拖曳。
- 目前點擊的視窗顯示在最上層：這部分主要是用z-index控制，搭配滑鼠點擊事件。

進行途中遇到的問題
在切版的過程中，其實沒有遇到太大的難題，但是在實作功能的過程中，就沒有這麼順利了QQ
卡比較久的問題，主要都跟音樂播放器有關，因為對audio標籤還不夠熟悉，所以看似順利，卻又卡在一些很奇怪的問題上。
1. 音樂無法正常播放(錯誤訊息：DOMException: The play() request was interrupted by a new load request.)
=>查了資料後，發現audio在呼叫play()時，會返回promise，最後改用Promise的寫法，終於排除這個問題。 
2. 佈署後呈github page後，無法讀取到音樂(錯誤訊息：audio net::ERR_CERT_COMMON_NAME_INVALID)
=>最後發現問題出在我上傳的音檔是放在開頭為http的網站上，改上傳到https的網站問題就排除了。

最後我想說
雖然說這個成品沒有前輩大神們那麼厲害和華麗，
但不管成品完美不完美，也算是突破自我了。
其實剛開始一直覺得自己根本拿石頭砸自己的腳，自己應該會因為做不出來而半途而廢，
但沒想到把挑戰拆成一個個小小的項目後，好像也沒有想像中那麼難，
再加上自己就是不服輸，還是成功戰勝自己了～～～
從這次的挑戰中，自己也透過接觸沒接觸過的東西，學習到了新東西，感覺很充實，也很有成就感！
真的沒想到自己可以廢到翻轉XD

下次要做什麼我就廢挑戰，目前還在思考中...
但我還是會繼續這個挑戰～～

這次的我就廢挑戰紀錄就到這了，大家掰餔^^