TAIPEI ASSOCIATION OF ADVERTISING AGENCIES台北市廣告代理商業同業公會

國際組織 Girls Who Code 把 MV 變好玩了!邊看影片邊寫 CSS、Python、Javascript

2021-12-08

Girls Who Code 是一個於 2012 年成立的非營利組織,他們的核心宗旨是希望可以鼓勵以及引起更多年輕女性對於程式語言或電腦軟體領域的興趣。最近他們與美國饒舌歌手 Doja Cat 合作,推出了第一個可以透過 coding 互動的音樂 MV

網站首頁可以看到 Doja Cat 以充滿科技未來感的裝扮亮相,且當滑鼠鼠標在螢幕上移動時,圖像會隨之變得像素化並跟著鼠標移動。

按下開始後,會看到三顆不同顏色的星星,每顆星都代表一種不同的程式語言—— 黃色代表 CSS;藍色是 Javascript;而粉紅色則代表 Python。

點擊右側的音樂影片後,與 coding 結合的音樂互動體驗就開始了。影片一開始就和一般的音樂 MV 沒什麼不同,但是其中有幾個段落需要由觀影者做出決定,這其實有一點點像玩家自行選擇的冒險遊戲,只是這次是要以 coding 的形式進行。

畫面底部的時間線總共包含四顆不同顏色的星星,分別代表了不同的程式語言,而當時間進度條來到星星的所在位置時,就會開啟 coding 的互動介面。

當音樂暫停時,就是需要由你來做決定的時刻了!

遊戲操作方法

第一次暫停時,你可以透過 CSS 來更改 Doja Cat 指甲的顏色。你輸入的顏色會立刻改變 Doja Cat 指甲的顏色,而且只要你想的到,不管什麼奇怪的顏色都可以。

經實驗後發現,不只素色,連火焰(flame)、水波紋(water)、豹紋(leopard)或甚至彩色(rainbow)都可以選擇!完全就像是在玩一個用 coding 決定指甲彩繪樣式的少女遊戲。

dojacode

圖片來源:Doja Code 畫面截圖

在另一個場景中,需要透過 Javascript 來進行互動。只要輸入城市名稱就可以改變影片中的時間,也可以更改天氣和天空的顏色。

例如在台灣上午 11:00 左右輸入「台北」(Taipei)後,畫面中就可以看到太陽正好在畫面正中央。但若輸入「紐約」(New York),畫面就會變暗,而且不只看的到滿天星斗,甚至還可以看到一個象徵女性的星座!而黑夜也正和紐約當地時間晚上 10:00 能相對應。

dojacode

圖片來源:Doja Code 畫面截圖

在影片結束後,玩家可以獲得在 coding 後,在每個段落做出選擇的圖片。並且網站也允許玩家將其下載或分享到社交媒體。

Doja Code 並沒有大量的 coding,而且雖然做出的所有決定都無法影響後續畫面,但在嘗試輸入不同的選項並看到個人選擇立即生效還是相當有趣!

對於沒有接觸過程式語言的人來說,指示都相當清楚明確且友善,體驗下來就像在玩一場遊戲,不會讓人有不知所措的感覺,非常適合引起想入門的人的動機和興趣。

這場進入 coding 音樂體驗的傳送門在此,有興趣的大家也去體驗看看吧!


(資料來源:科技報橘

【本訊息文字圖片未經原提供單位許可,不得任意轉載及連結,如有需求,請洽原資料提供單位。】