Skip to content
mgahn0706 edited this page Jun 6, 2026 · 3 revisions

μΊ£νƒ€μ›Œ 였λ₯΄κΈ°

μΊ£νƒ€μ›Œ 였λ₯΄κΈ°λŠ” 짧은 λ§ˆμ΄ν¬λ‘œκ²Œμž„μ„ 리듬에 맞좰 μ—°μ†μœΌλ‘œ ν΄λ¦¬μ–΄ν•˜λ©° 더 높은 측을 λ…Έλ¦¬λŠ” μ›Ή κ²Œμž„μž…λ‹ˆλ‹€.

ν”Œλ ˆμ΄μ–΄λŠ” λ§€ λΌμš΄λ“œλ§ˆλ‹€ ν•œ 쀄 λ―Έμ…˜κ³Ό μ‘°μž‘ μ•ˆλ‚΄λ₯Ό 보고, μ œν•œλœ λ°•μž μ•ˆμ— μ¦‰μ‹œ λ°˜μ‘ν•΄μ•Ό ν•©λ‹ˆλ‹€. 일반 λΌμš΄λ“œλŠ” 짧게 μ§„ν–‰λ˜κ³ , 일정 λΌμš΄λ“œλ§ˆλ‹€ 더 κΈ΄ 보슀 κ²Œμž„μ΄ λ“±μž₯ν•©λ‹ˆλ‹€.

핡심 κ²½ν—˜

  • 짧은 μ‹œκ°„ μ•ˆμ— κ·œμΉ™μ„ νŒŒμ•…ν•˜κ³  λ°”λ‘œ ν–‰λ™ν•˜λŠ” ν”Œλ ˆμ΄
  • λΌμš΄λ“œλ§ˆλ‹€ λ°”λ€ŒλŠ” μž…λ ₯ 방식과 λ―Έμ…˜
  • BGMκ³Ό λ°•μžμ— 맞좰 μ΄μ–΄μ§€λŠ” κ²Œμž„ 흐름
  • λͺ©μˆ¨, 1-UP, 보슀 λΌμš΄λ“œ, 속도 λ³€ν™”κ°€ λ§Œλ“œλŠ” κΈ΄μž₯감
  • λ‹€μ–‘ν•œ κ²Œμž„ νŒ¨λŸ¬λ””λ₯Ό ν•œ ν™”λ©΄ μ•ˆμ—μ„œ λΉ λ₯΄κ²Œ μ „ν™˜ν•˜λŠ” ꡬ성

ν˜„μž¬ ν™”λ©΄ 흐름

λ‘œλ”©
  ↓
ν™ˆ ν™”λ©΄
  ↓
κ²Œμž„ 방법 / κ²Œμž„ μ‹œμž‘
  ↓
λΌμš΄λ“œ μ•ˆλ‚΄
  ↓
λ§ˆμ΄ν¬λ‘œκ²Œμž„ ν”Œλ ˆμ΄
  ↓
성곡 / μ‹€νŒ¨ νŒμ •
  ↓
λͺ©μˆ¨ λ³€ν™” λ˜λŠ” 1-UP
  ↓
λ‹€μŒ λΌμš΄λ“œ
  ↓
κ²Œμž„ μ˜€λ²„

μ£Όμš” μ‹œμŠ€ν…œ

λ§ˆμ΄ν¬λ‘œκ²Œμž„ λ ˆμ§€μŠ€νŠΈλ¦¬

data/microgames.tsμ—μ„œ λͺ¨λ“  λ§ˆμ΄ν¬λ‘œκ²Œμž„μ˜ ID, 제λͺ©, λ―Έμ…˜ 문ꡬ, μ‘°μž‘λ²•, λ°•μž, 보슀 μ—¬λΆ€λ₯Ό κ΄€λ¦¬ν•©λ‹ˆλ‹€.

일반 λ§ˆμ΄ν¬λ‘œκ²Œμž„κ³Ό 보슀 λ§ˆμ΄ν¬λ‘œκ²Œμž„μ€ 같은 ꡬ쑰λ₯Ό μ‚¬μš©ν•˜μ§€λ§Œ, 보슀 κ²Œμž„μ€ 더 κΈ΄ λ°•μžμ™€ 별도 BGM을 μ‚¬μš©ν•©λ‹ˆλ‹€.

μž…λ ₯ 방식

ν˜„μž¬ μ§€μ›ν•˜λŠ” μž…λ ₯ 방식은 λ‹€μŒκ³Ό κ°™μŠ΅λ‹ˆλ‹€.

  • λ°©ν–₯ν‚€
  • Space
  • λ°©ν–₯ν‚€ + Space
  • μˆ«μžν‚€
  • ν•œκΈ€ νƒ€μž
  • 마우슀 클릭
  • 마우슀 λ“œλž˜κ·Έ
  • 마우슀 ν™€λ“œ

마우슀 μž…λ ₯은 클릭, λ“œλž˜κ·Έ, ν™€λ“œλ‘œ 뢄리해 각 κ²Œμž„μ˜ μ‘°μž‘ μ˜λ„κ°€ λͺ…ν™•ν•˜κ²Œ λ“œλŸ¬λ‚˜λ„λ‘ ν–ˆμŠ΅λ‹ˆλ‹€.

λ°•μž 기반 μ§„ν–‰

각 κ²Œμž„μ€ beatCountλ₯Ό κΈ°μ€€μœΌλ‘œ μ§„ν–‰λ©λ‹ˆλ‹€. BGM이 이미 ν•΄λ‹Ή 길이에 맞좰 μ œμž‘λœ 경우 μžμ—° μ†λ„λ‘œ μž¬μƒν•˜κ³ , κ²Œμž„ νƒ€μ΄λ¨ΈλŠ” 곡톡 리듬 duration을 κΈ°μ€€μœΌλ‘œ κ³„μ‚°ν•©λ‹ˆλ‹€.

에셋 ν”„λ¦¬λ‘œλ”©

이미지와 μ‚¬μš΄λ“œλŠ” κ²Œμž„ μ‹œμž‘ 전에 미리 λ‘œλ“œν•©λ‹ˆλ‹€. λ‘œλ”© 화면은 μ‹€μ œ μ§„ν–‰λ₯ κ³Ό ν˜„μž¬ λ‘œλ“œ 쀑인 에셋을 보여주며, μ‹€νŒ¨ν•œ 에셋 경둜λ₯Ό ν‘œμ‹œν•΄ 배포 ν™˜κ²½ 문제λ₯Ό 좔적할 수 있게 ν–ˆμŠ΅λ‹ˆλ‹€.

랜덀 선택

일반 λΌμš΄λ“œμ™€ 보슀 λΌμš΄λ“œλŠ” 별도 ν’€μ—μ„œ μ„ νƒλ©λ‹ˆλ‹€. μ΅œκ·Όμ— λ‚˜μ˜¨ κ²Œμž„μ΄ λ°”λ‘œ λ°˜λ³΅λ˜μ§€ μ•Šλ„λ‘ 후보λ₯Ό μ‘°μ •ν•΄ 체감 λ°˜λ³΅μ„ μ€„μž…λ‹ˆλ‹€.

기술 μŠ€νƒ

  • Next.js
  • React
  • TypeScript
  • Tailwind CSS
  • Canvas API
  • Web Audio / HTMLAudioElement

κ΄€λ ¨ λ¬Έμ„œ

Clone this wiki locally