顯示具有 06161153_沈宛棋 標籤的文章。 顯示所有文章
顯示具有 06161153_沈宛棋 標籤的文章。 顯示所有文章

2021年12月27日 星期一

兔寶寶的筆記 - 音樂節奏遊戲 : 初始畫面、計分、結束畫面

音樂節奏遊戲 : 初始畫面、計分、結束畫面

1-1 初始畫面

>> 利用start 判斷是否開始遊戲
>> 初始畫面start = 0
>> 利用時間判斷遊戲結束,計算停留在初始畫面的時間" delayT ".


>> 載入初始圖和顯示的遊戲名稱
>> 告訴玩家按下 " enter " 開始遊戲 


>> 開始遊戲扣掉 delayT ,才不會影響遊戲時間判定。

1-2 鍵盤 Enter
>> 增加鍵盤 enter ,按下後start改為1,並且播放遊戲音樂。

2-1 計分數


>> 分數記錄 : 當鍵盤按下=方塊掉在正確區域時會加分。


>> 同時分數顯示在遊戲中的右上角。


2-2 結束畫面
>> 分數顯示在遊戲結束畫面上。
>> 時間到了會跳到結束畫面。




Github傳送門:

2021年12月20日 星期一

兔寶寶的筆記 - 音樂節奏遊戲 : 偵測鍵盤

音樂節奏遊戲 : 偵測鍵盤

1-1 鍵盤 : 上、下、左、右


Step1: 找出鍵盤的用法

>> 發現 up, down, left, right 要用 keyCode表示

Step2:  試著寫看看 ~~~
>> 按下 "上下左右 鍵" ,會畫出對應的方塊。


1-2 利用 "布林值" 判斷是否要畫出方塊

>> 分別四個鍵都要。

>> 按下鍵盤時,布林值接是 1 ,代表要畫出方塊。

>> 離開鍵盤時,布林值改回 0,代表方塊不見。


>> 在 draw() 裡面準備好,當布林值為 1 時,要畫出白色方塊。
>> 方塊的大小稍微 " 大一點 " 並調整 x , y 置中。



>> 當按下 "上下左右鍵" ,會在對應的位置出現白色方塊,放開後不見。

2-1 判斷是否在按下鍵盤的範圍 ( x , y 距離) 中按下正確的鍵

>> 先讓掉出視窗的方塊消失,不然無法用 y 的距離判斷。

>>  當方塊 y 值落在箭頭的區塊 :

>> 判斷落在 a , b , c , d 哪一區,和它對應的鍵盤是否也擊中。


2-2 按下正確的鍵 > 顯示框框

>> 用Good的布林值來判斷是否在對的區域鍵盤也剛好按下。


>> 在draw() 中,畫出Good布林值為 1 的方塊大小 (要比原本的大才看得出差異),顯示完改回 0。


>> 鍵盤按下顯示的顏色改黑色


>> 當按下鍵盤在對的區域擊中方塊時,會出現框框,表示有按對。

Github程式碼:

2021年12月13日 星期一

兔寶寶的筆記 - 音樂節奏遊戲 : 陣列、自訂拍點

音樂節奏遊戲 : 陣列、自訂拍點

1-1 自訂拍點

背景圖片來源:

step1:把隨機出現的方塊改成陣列(a,b,c,d)音譜,是1代表出現。

>> 4個一維陣列表示。


step2: 新增加 beatX, beatY 畫方塊的座標。

>> beatN 從0開始。

>> 設時間 t ,每60/1秒,如果音譜有1畫出第beatN個方塊,每次beatN加1。 

1-2 方塊往下掉

>> 利用 for 迴圈讓 i 從第 0 個到第 beatN 個方塊,畫出並加速度往下(beatY)。

>> 執行後遇到小問題 : 方塊沒有跟著音譜出現,發現第一個方塊要在 c 位置出現,卻從第二個 b 位置出現第一個。

2-1 修改時間

>> 修改時間 frameCount % 60 == 1,讓第一個出現。
>> 往下掉的速度加快一點。

>> 執行後。

2-2 改善時間準確問題

>> t 從 0 開始才不會漏掉1秒前的方塊,增加prevT 表示與前一個時間間隔786s (依照人的反應時間設定) , delayT 表示讀檔延遲的時間。

>> 讓讀檔案的時間不影響方塊掉下的時間,要減掉delayT。
>> 判斷現在時間 ( 減掉delayT後 )  > 前一時間,每次 t 加 1,prevT 也加 1。

3-1 音樂時間結尾要到結束畫面

>> 先在 setup () 中載入結束背景圖。

>> 假設結束時間是15 s,當 t >=15 時,顯示結束畫面,在時間內繼續執行方塊。
>>陣列超過15 s,最後面都要是 0,方塊才會跑完。


>> 執行後結果,不會因為陣列結束而卡住。


Github程式碼:


2021年12月6日 星期一

兔寶寶的筆記 - 音樂節奏遊戲 : 方塊掉下來

 

音樂節奏遊戲

1-1 產生方塊
上次做到背景畫面跟音樂,
今天要讓方塊能夠產生並掉下來

1-2 畫第一個方塊往下掉
加入第一個方塊,往下掉。



1-3 同時掉下4個方塊

for迴圈掉下4個方塊,取random的y從不同高度往下掉。



我的GitHub程式碼連結 :

2021年11月29日 星期一

兔寶寶的筆記 - 音樂節奏遊戲 : 規劃

 

音樂節奏遊戲 : 規劃

1-1 音樂節奏遊戲 : 世界計劃 畫面呈現示意圖

想要做出可以透過上、下、左、右鍵操控音樂節奏,
風格有點類似世界計畫這款遊戲。

1-2 音樂、背景圖片

無版權音樂來源 :

圖片來源:

下載好拉進資料夾,記得檔名要正確 ~
一開始就會有 BG & BGM

2-1 加入滑鼠、畫格子線


開始畫格子,用之前教過的 line();畫線,
利用滑鼠座標找到線應該畫的位置。

白色圓圈是滑鼠 ~ ~

2-2 加入"上下左右"箭頭圖片
圖片先準備好在資料夾,
小畫家自己畫,再用PPT去背景功能,
可以蒐集到白色箭頭。

增加 imgleft, imgup, imgright, imgdown,
準備載入圖片。
分別載入4張圖片。
顯示圖片的 來源、x,y位置、x,y大小 設定好。


呈現的畫面大致上長這樣 ~
下週繼續增加會掉下來的鋼琴鍵。
(白色圓圈是滑鼠)

我的GitHub程式碼連結 :