home about projects profile
互動與遊戲 2026 互動與遊戲 系統與網站開發
cirtcl
// SYS 官方專案 現場展覽

cirtcl

一個節奏遊戲by owl。

by owl

// project_overview

隨著時間流逝,擊潰黑色粒子! https://cutestowl.github.io/cirtcl/

// tech_stack
HTML CSS JS
// keywords
# interactive # rhythmgame
幫這個專案投票!
// project_details

故事

你出生在一個幸福的家庭。
你依稀記得,在你小時候,世界十分和平,沒有什麼領導人、法律、警察,沒有權力,沒有金錢。大家都不約而同有著默契,共同經營這個世界。
你時常和你的朋友們一起在學校的後山上迎著微風奔跑,或在小河裡嬉戲,大家臉上都掛著笑容。無憂無慮的生活一天又一天。


你睜開眼睛,發現你正躺在一張白色的床上,你坐起來四處張望,你在一個約有百平方米的半圓形白色房間內,從你的床往前看似乎是一扇白色的門,在你右邊有一張桌子,桌上有一些散亂的文件,桌子後是一張椅子,沒有擺放整齊,約和桌子夾了三十度角。在你的印象中,人們絕對是不會讓文件呈現散亂的情況,更不會在離開座位時不將椅子擺放整齊。這讓你感到非常奇怪,甚至起了雞皮疙瘩。你在不多想的情況下,你幫忙整理。此時有人推開門走了進來,你注意到房間好像灰暗了一些。「你醒了?」那個人說他叫做Alex,並接著和你解釋了發生什麼事。

「幾天前,落下的雨似乎夾帶著一些黑色粒子,而接觸到這些粒子的人們,開始變的奇怪,有些人到市場裡把東西都搶走了,有些人敘述者與現實不同的話語,有些人爭執著要當管理世界的人,甚至有些人拿起廚房裡的刀攻擊其他人。現在外面的世界非常混亂。於是我們將部分安全的人集中到這裡,思考對策,而你⋯⋯」話說到這裡,突然大門又打開了,一位女性拉著你的手走出了房間。出了房間,眼前是一道長廊。奇怪的是,除了你的房間以外,沒有其他房間,左右各只有一片白牆,直到走到盡頭,下了樓梯,而Alex還在樓梯上向前滑了一跤,你不知道他為什麼要做出這個行為。

下了樓梯後那位女性和Alex一左一右的引領你進到了右手邊左側的第一間房間,這間房間與之前有些不同,整體是黑色的,你感覺到有些噁心不適。那位女性轉頭對你說:「請坐,把手放在這裡。」眼前是一組小板凳和不怎麼大的桌子,桌子的另一邊坐著兩位男性,一位看起來像醫師,但不同的是,他身上穿著並非白袍而是黑袍;而當你看向另一位時,感覺眼睛十分刺痛,不適感也加重了,你下意識的撇開視線,聽從指示坐下並把手臂放到了桌上的一個軟墊上,那位醫師拿起針筒,朝你的手臂用力的插了進去,你顫抖了一下,還未感覺疼痛,眼前就一片漆黑⋯⋯。


「聽得到我說話嗎?」你耳邊傳來剛剛那位女性的聲音。「我是Cathy,我很抱歉未能提前告知這次的行動。由於你身上有與眾不同的能力,目前推測可能也跟那場雨有關係。總而言之,我們現在需要你透過演奏樂曲並在過程中連結其他病患的意識並消除已經滲透的黑色粒子,幫助他們變回正常人的模樣,我們會在過程中蒐集你執行任務的資料,確保任務順利。現在你可以開始了,本次行動代號:cirtɔl。」


關於創作

這是我的第二個網頁,前一次是在建北電資寒訓成發。所以我其實不太擅長寫網頁,這次也是同時在學習,這甚至是我的第一個相對大的專案,因此希望大家可以給予我一些建議,從各個方面,非常感謝。

創作動機

其中很大的一部分與Estella有關,當我看到其創作者發表在Youtube上的影片,就奠定了我這次的社展主題。

音樂

音樂遊戲最重要的似乎就是音樂了,我使用了Web Audio API以準確的播放音樂,但是這部分因為時間的緣故,只請AI幫我生成最簡單的功能,應該會在之後再學習並改進。而在音樂挑選方面,因為就我個人的理解,AI提供的資料與我再做的資料查詢,音樂的版權十分複雜,要拿到可供使用的可能最簡單的方式是聯絡作曲家。但我後來決定使用古典樂,可以免除音樂本身的版權問題,時候找到Wikimedia Commons上的曲目演奏檔案,就可以根據創用CC合法的拿取音樂(以上僅為我個人的經驗,若有誤敬請指教)。

譜面

我想要做一個比較特別的譜面表現形式,現在的譜面表現方式原意是想要提高譜面難度上限的讀譜難度,此處類似於ADOFAI,以及能夠增加譜面的花樣,類似於phigros(但目前不確定社展前能不能達成,目前只有支援相對普通的譜面),另外按鍵的部分稍微參考了Rizline

判定

判定的部分也是參考許多遊戲,再加上我自己的點點意見,最後的判定範圍如下:gold perfect:30ms,perfect:75ms,good:150ms

AI的參與

主要只有我查語法的時候會用到,還有查一些我不理解的知識,我覺得大概7%~15%。

其他

目前滿多code都只是能跑而已,整體的設計上缺漏不少,之後會再補。

反饋

有什麼想法、建議、指正、反饋可以填寫回饋表單,非常感謝。

未來展望

  • 歌曲、譜面增加
  • 美化
  • 劇情
  • 音樂邏輯
  • code整理

致謝

非常感謝過程中幫助我的人,這裡就不一一列舉了,但許多AI無法解決的問題,經過大家的幫助,總算能解決!


cirtcl

由圓形(cir)與可愛貓頭鷹合成。貓頭鷹最可愛了

// Comments

載入留言…
// similar_projects

2.5D

// NO_SUBTITLE

JavaScriptHTML5 CanvasSupabase+1
互動與遊戲