###### tags: `學期 2-1`

# 2-1 Side Project 挑戰

# 【選修】下課十分鐘的 POPCAT！來做個小遊戲吧！

> **學習目標**
> - 綜合運用學期 2-1 的技術
> - 了解目前的學習進度可以做到的成果，自行發想其他 Side Project
> - 體會自己創造、寫程式的樂趣所在

<!-- ⚠️【注意】此實作為延伸練習，建議同學先將 **S5 驗收與展望的技術驗收題組、學習能力驗收題組** 都完成後，在第四週後半或第五週再進行練習。 -->

恭喜你完成了 2-1 的課程，我們從 Javascript function 一路到 DOM 打造動態的網頁，這一切都在僅僅四週的時間內發生了！感受到自己大幅的成長與進步了嗎？

學會如何製作基本的動態網頁就能做很多有趣的東西，鼓勵你可以發想自己的 Side Project 讓自己有更多機會練習。

在進入期末技術驗收前，讓我們休息片刻，發揮創意做一個迷你的 Side Project 來玩吧！
<small>※ 注意！雖然標題是寫「十分鐘」但只是文案效果，非此單元的學習時間呦！ (๑´ㅂ`๑) </small>

## POPCAT
這是在 2021 年瞬間竄紅的迷因貓貓點擊大賽 [POPCAT](https://popcat.click/)，讓各國網友紛紛相起為國爭光。簡單的遊戲介面及玩法，加上怪得可愛的貓咪造型和療癒的波波聲，讓大人小孩都為之瘋狂。

<img style="width:50%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21991/F1_side_project_POPCAT_3.png">

我們的目標是做到**復刻基本功能（即數字統計、嘴巴張闔）**，你將運用到 DOM 事件驅動程式設計，通過點擊事件讓 Oatmeal（是的，這隻迷因貓的名字叫 Oatmeal）的嘴巴開闔、累加點擊數字。

而學習上有餘裕的同學可以研究如何優化或是接受額外挑戰，如果目前無法做到優化也沒有關係，先專注在課程內的學習，之後再回來挑戰都是可以的呦！

### 復刻基本功能
- 完成一個有標題、數字、圖片的 POPCAT 畫面
- 標題：POPCAT
- 數字：初始值為 0
- 圖片：初始圖片為 Oatmeal 闔嘴的圖片
- 沒有行動時，呈現 Oatmeal 闔嘴的照片
- 點擊 Oatmeal 時，數字會累加
- 點擊 Oatmeal 時，圖片會變換

（💡小提示：你能從 POPCAT 網站中觀察出該用什麼滑鼠事件來驅動圖片變換嗎？）

### 額外挑戰
#### 加上聲音
- 當放開滑鼠左鍵，Oatmeal 會發出「波」的聲音

#### 讓頁面更有創意
- 變更背景圖片或是變更排版
- 換掉 Oatmeal，更換主角

（💡小提示：只要是兩張連貫的圖片都能夠做到相同效果喔！例如：🙈 🙉）

### 相關資源
- 圖片：Oatmeal 闔嘴
[https://popcat.click/img/p.1e9d00be.png](https://popcat.click/img/p.1e9d00be.png)
- 圖片：Oatmeal 張嘴
[https://popcat.click/img/op.353767c3.png](https://popcat.click/img/op.353767c3.png)
- 音訊：「波」的聲音檔
[https://www.myinstants.com/media/sounds/pop-cat-original-meme_3ObdYkj.mp3](https://www.myinstants.com/media/sounds/pop-cat-original-meme_3ObdYkj.mp3)

**將你的成果、截圖和心得放在下方留言區和同學們交流吧！也可以將作品分享給家人朋友一起同樂呦！**
獲得了貓貓的療癒能量之後，讓我們繼續朝 S5 驗收與展望 邁進吧！加油！

<small>教練覺得太可愛了，忍不住自己也做了一個！跟大家分享宇宙貓貓！
<img style="width:30%;" src="https://assets-lighthouse.alphacamp.co/uploads/image/file/21990/F1_side_project_POPCAT_1.gif"> </small>

---

# 邀請你分享下課十分鐘的 POPCAT 心得

Hi {{user_nickname}}，

很高興在[【選修】下課十分鐘的 POPCAT！來做個小遊戲吧！](https://lighthouse.alphacamp.co/courses/98/units/28379#share_subjects) 中看見你趣味的作品！

教練非常驚豔同學們的作品，尤其是 {{user_nickname}} 發揮創意置入有趣背景、字體及版面的設計，這正是開啟 Side Project 的第一步！利用所學，做出一個可以觀賞、使用、解決問題、遊玩的程式，是不是沒有想像中的困難呢！？

#### 分享你的挑戰心得

AC 學習教練團隊在看過所有作品後，認為 {{user_nickname}} 這次製作的作品很用心，想要**邀請 {{user_nickname}} 將這次 POPCAT 的製作心得分享給更多人知道**，讓同學們可以相互激勵成長外，更是記錄下你的成長的好機會。

邀請你在 Discord 的這則貼文底下分享你的製作過程、想法、與家人朋友分享時收到的回饋分享！
提供給你幾個分享角度參考：
- 為什麼會想要做這次 POPCAT？過程如何？
- 做完之後有跟親朋好友分享嗎？他們的反應是什麼？
- 有觀摩其他人的作品嗎？有發現什麼同與不同？
- 有下一次 side project 的點子或對 side project 的新想法？

期待看見你的分享，為你喝采！🎉

<div style="width:100%"><img style="max-width:1000px; width:100%;" src="https://assets-lighthouse.s3.amazonaws.com/uploads/image/file/4416/banner_2.001.jpeg"></div>

---

【2-1 同學的 POPCAT Side Project】

波波波！大家看過來！
這次八月班的同學們在學期中進行了 POPCAT 製作挑戰，不少同學發揮他們的創意做出了非常可愛的 POPCAT 作品。

透過 2-1 學習到的 DOM，同學就能夠復刻出這樣有趣又療癒的小遊戲，作為踏出 Side Project 的第一步，讓我更加期待接下來同學們的成長了！:meow_wow:
請大家為 2-1 的同學們 (tag 人) 喝采！
2-1 的同學們也不要吝嗇，分享你們這次製作的心得吧！

〖等等，你說你也想要挑戰嗎？〗
相信 Discord 上面是高手雲集，助教、同學們肯定有不少才華可以用在 POPCAT 上，對戰狀態、