好 那今天就會完成這個小專案
可能 CSS 的部份寫的沒有很好 ouo
讀者可以自行修改

還是再放一次成品
回顧一下昨天做了什麼

• 基本架構
• 引入音樂

其實當成功引入音樂
這個東西就完成一半了
因為我當初卡在這邊卡很久
廢話不多說
直接看 code 吧
完成品
給我星星啦！！！

struct Model {
    link: ComponentLink<Self>,
    value: i64,
    sounds: web_sys::HtmlAudioElement,
    src: String,
}

可以看到跟昨天不一樣的是多了一個 src
這個 src 是用來做什麼的呢
答案是：用來改變圖片用的
因為在 View 那邊是能夠直接去控制 這個 html 元件的
好接下來

enum Msg {
    AddOne,
    Change,
    Back,
}

這邊則增加了 Change 跟 Back 兩個選項
而對應了 update 中的

Msg::Change => {
    console::log!("aaa");
    self.src = "./popcat2.png".to_string();
    console::log!("aaa");
    true
}
Msg::Back => {
    self.src = "./popcat1.png".to_string();
    true
}

上面的 console::log! 是拿來測試是否有使用到這個部份
以及是否成功更改路徑
那因為我們有更改東西所以記得回傳 true
那接下來就是最後了 owob

<div class="container">
    <h1>{ "POPCAT" }</h1>
    <p>{ "score:" }{ self.value }</p>
    <img src={ self.src.clone() }
    onmousedown=self.link.callback(|_| Msg::Change)
    onmouseup=self.link.callback(|_| Msg::Back)
    onclick=self.link.callback(|_| Msg::AddOne)
    height="600px"/>
</div>

上面引入 class 也就是他的 CSS
那接下來下面的部份我也查了蠻久 (我沒有寫網頁的 JS 的經驗
onmousedown
onmouseup
從這兩個 Event 中可以發現
當按著的時候 Call function 放開再 Call 另一個 function
就能做到我們要的 按著更變路徑 放開還原路徑 的一個功能
那我在寫這邊的時候還遇到了一個問題
當初我是讓他 Call 在 View 函數中的閉包的
然後他會顯示說無法更動，所以撰寫時要特別注意～
那麼最後 就會是我們要的 POPCAT 了
這只是個使用的例子
也可以自己找一個有興趣的東西做做看喔

那其實在寫這邊的時候查了蠻多的 Github 查有關 HtmlAudioElement 的用法
可能讀者在看時覺得好像很簡單
但是事實上我研究了至少 3 個小時才找到我想要的東西
總之 各位晚安 希望這篇對你有幫助
明天會講另一個 Example 之後帶另一個專案
但是我不打算寫 CSS 了 我 CSS 真的有夠爛 QQ