Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/soozynn/louder

Vanila JavaScript Audio Jumping Game
https://github.com/soozynn/louder

canvas javascript oop webaudio-api

Last synced: 4 days ago
JSON representation

Vanila JavaScript Audio Jumping Game

Awesome Lists containing this project

README 

        
# πŸ”Š Louder!



[πŸ‘‰ ν”„λ‘œμ νŠΈ μ‹œμ—° μ˜μƒ λ³΄λŸ¬κ°€κΈ°](https://youtu.be/RqTlaotUZX4?t=7777)



## 🎢 What is Louder?



μœ μ €μ˜ λͺ©μ†Œλ¦¬ λ°μ‹œλ²¨μ„ μ΄μš©ν•˜μ—¬ μž₯μ• λ¬Όκ³Ό λͺ¬μŠ€ν„°λ“€μ„ ν”Όν•΄ ν”Œλž«νΌ 사이λ₯Ό 이동, μ ν”„ν•˜μ—¬ κΉƒλ°œμ΄ μžˆλŠ” μ΅œμ’… Finish μ§€μ κΉŒμ§€ μ™„μ£Όν•΄μ•Όν•˜λŠ” μŒμ„±μΈμ‹ 기반의 μ›Ή κ²Œμž„μž…λ‹ˆλ‹€.








## 🎢 Motivation



ν”Œλž˜μ‹œκ²Œμž„μ— λŒ€ν•œ 좔얡이 λ§Žμ•„ 개인 ν”„λ‘œμ νŠΈλ‘œ κ°„λ‹¨ν•œ κ²Œμž„μ„ κ΅¬ν˜„ν•˜κ³  싢은 마음이 μ»ΈμŠ΅λ‹ˆλ‹€. 이전에 λͺ©μ†Œλ¦¬λ₯Ό μ΄μš©ν•œ λ―Έλ‹ˆ κ²Œμž„μ„ 재밌게 μ ‘ν–ˆλ˜ κΈ°μ–΅μ—μ„œ 아이디어λ₯Ό μ–»μ–΄ Web Audio API λ₯Ό μ΄μš©ν•œ μŒμ„±μΈμ‹ κ²Œμž„μ„ κΈ°νšν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.



### - Why chose Vanilla JavaScript?



μ΄ˆκΈ°μ—λŠ” κ°„λ‹¨ν•œ μ•± κ²Œμž„μœΌλ‘œ λ§Œλ“€μ–΄λ³΄κ³ μž React-native의 μ‚¬μš©μ„ κ³ λ €ν–ˆμ—ˆμŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ, React-nativeλ₯Ό μ΄μš©ν•˜μ—¬ κ²Œμž„ 앱을 κ°œλ°œν•œλ‹€λ©΄ nativeμ—μ„œ JS둜 이벀트λ₯Ό μ „μ†‘ν•˜κ³  JSμ—μ„œ native둜 UI μ—…λ°μ΄νŠΈλ₯Ό 전솑해야 ν•˜λŠ” λŒ€κΈ° μ‹œκ°„μœΌλ‘œ 인해 κ²Œμž„μ— λˆˆμ— λ„λŠ” 지연이 λ°œμƒν•  수 μžˆλ‹€λŠ” 것을 μ•Œκ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€.



κ·ΈλŸ¬λ‹€ 이전뢀터 μƒκ°ν•΄μ™”λ˜ ν”„λ ˆμž„μ›Œν¬μ™€ 라이브러리 없이 Vanilla JavaScript λ§Œμ„ μ΄μš©ν•˜μ—¬ κ²Œμž„μ„ κ°œλ°œν•΄λ³΄λ©΄ μ–΄λ–¨κΉŒ? λΌλŠ” 생각을 기점으둜 Vanilla JavaScript 와 canvas λ§Œμ„ μ΄μš©ν•˜μ—¬ ν”„λ‘œμ νŠΈλ₯Ό κ΅¬ν˜„ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 이번 ν”„λ‘œμ νŠΈλ₯Ό 톡해 Vanilla JavaScript의 **OOP, closure, this, ꡬ쑰 섀계**에 λŒ€ν•΄ 많이 κ³ λ―Όν•΄λ³Ό 수 μžˆμ—ˆκ³ , 이전에 μ œλŒ€λ‘œ μ •λ¦¬ν•˜μ§€ λͺ»ν–ˆλ˜ μžλ°”μŠ€ν¬λ¦½νŠΈμ˜ κ°œλ…μ— λŒ€ν•΄μ„œλ„ λ‹€μ‹œ ν•œλ²ˆ 곡뢀할 수 μžˆμ—ˆλ˜ μ‹œκ°„μ΄μ—ˆμŠ΅λ‹ˆλ‹€.








## πŸ•Ή Game Introduction



#### Start Page






> κ²Œμž„μ„ μ‹œμž‘ν•˜κΈ° μ „, How to play button을 톡해 κ²Œμž„ μ‘°μž‘ 방법을 μ•Œ 수 μžˆμŠ΅λ‹ˆλ‹€.



#### How to play






> λͺ©μ†Œλ¦¬μ˜ λ³Όλ₯¨ 크기λ₯Ό 톡해 캐릭터λ₯Ό μ‘°μž‘ν•  수 μžˆμŠ΅λ‹ˆλ‹€.



- `Soft volume`: μž‘μ€ λ°μ‹œλ²¨μ€ 캐릭터λ₯Ό μ•žμœΌλ‘œ 움직일 수 μžˆμŠ΅λ‹ˆλ‹€.

- `Loud volume`: 큰 λ°μ‹œλ²¨μ€ 캐릭터λ₯Ό μ ν”„μ‹œν‚¬ 수 μžˆμŠ΅λ‹ˆλ‹€.

- `Volume up`: λ°μ‹œλ²¨μ΄ 클수둝 μΊλ¦­ν„°λŠ” 더 λ†’κ²Œ 점프할 수 μžˆμŠ΅λ‹ˆλ‹€.



> λͺ¬μŠ€ν„°λŠ” λ°Ÿμ•„ 죽일 수 μžˆμ§€λ§Œ, 머리 외에 λͺΈν†΅μ΄ λ¨Όμ € 닿을 μ‹œ κ²Œμž„μ€ μ’…λ£Œλ©λ‹ˆλ‹€.



#### Level select page






> κ²Œμž„μ˜ λ‚œμ΄λ„λ₯Ό μ„ νƒν•˜μ—¬ 진행할 수 μžˆμŠ΅λ‹ˆλ‹€.



- Level 1 - ice map



  



> 우츑 μƒλ‹¨μ—λŠ” Game의 bgm을 끄고 킬 수 μžˆλŠ” On/Off λ²„νŠΌμ΄ μžˆμŠ΅λ‹ˆλ‹€.



- Level 2 - fire map



  



> κ²Œμž„μ˜ Finish 지점인 κΉƒλ°œμ˜ 남은 μœ„μΉ˜λ₯Ό 쀑앙 상단에 μžˆλŠ” % λ₯Ό 톡해 μ•Œλ € μ€λ‹ˆλ‹€.



- Level 3 - dark map



  



> Level 에 따라 컨셉/μ§€ν˜•/λͺ¬μŠ€ν„° μ’…λ₯˜κ°€ λ‹€λ₯΄λ©°, Level 이 높을 수둝 λͺ¬μŠ€ν„°κ°€ λ§Žμ•„μ§€κ³ , μ§€ν˜•μ΄ μ–΄λ €μ›Œμ§€λŠ” κ΅¬μ‘°μž…λ‹ˆλ‹€.







## 🎢 About the difficulties...



### `Object Orient Programming (OOP)`



이번 ν”„λ‘œμ νŠΈμ—μ„œ 캐릭터와 μ§€ν˜•μ„ 그렀쀄 λ•Œμ— 클래슀 기반의 객체 지ν–₯ μ–Έμ–΄λ₯Ό μ‹œλ„ν•΄λ³΄μ•˜λŠ”λ° canvas와 클래슀 문법에 μ΅μˆ™ν•˜μ§€ μ•Šμ•„ μ΅νžˆλŠ” 데에 λ§Žμ€ μ‹œκ°„μ΄ κ±Έλ Έμ§€λ§Œ, 점차 객체 지ν–₯ 언어에 λŒ€ν•œ μ΄ν•΄μ˜ 폭을 λ„“νž 수 있게 λ˜μ—ˆκ³ , Vanilla JavaScript λ§Œμ„ μ‚¬μš©ν•˜λ©΄μ„œ ν”„λ ˆμž„μ›Œν¬λ‚˜ λΌμ΄λΈŒλŸ¬λ¦¬λ“€μ— λŒ€ν•œ μž₯단점과 νŽΈλ¦¬μ„±μ— λŒ€ν•΄μ„œλ„ λͺΈμ†Œ 느껴볼 수 μžˆλŠ” μ‹œκ°„μ΄μ—ˆμŠ΅λ‹ˆλ‹€.



μ²˜μŒμ—λŠ” κ²Œμž„μ„ κ΅¬ν˜„ν•˜λ©΄μ„œ μ΅μˆ™ν•œ μ ˆμ°¨μ§€ν–₯ ν”„λ‘œκ·Έλž˜λ°κ³Ό ν•¨μˆ˜ν˜• ν”„λ‘œκ·Έλž˜λ°μœΌλ‘œ μ§„ν–‰ν•˜μ˜€μŠ΅λ‹ˆλ‹€. ν•˜μ§€λ§Œ ν•¨μˆ˜μ— λ§Žμ€ λ§€κ°œλ³€μˆ˜λ₯Ό μ „λ‹¬ν•˜κ³  값을 κΈ°μ–΅ν•˜κΈ° μœ„ν•΄ ν΄λ‘œμ €λ₯Ό λ§Œλ“€μ–΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€. κ²Œμž„ κΈ°λŠ₯에 μ˜ν•΄ ν•¨μˆ˜ κ°„ λ§Žμ€ λ§€κ°œλ³€μˆ˜ 전달 및 μ½”λ“œ κ°„ 결합도가 높아지고 λ°©λŒ€ν•΄μ§μœΌλ‘œμ¨ μœ μ§€ 보수 및 디버깅이 μ–΄λ €μ›Œμ Έ 이λ₯Ό 더 κ°œμ„ ν•˜κΈ° μœ„ν•΄ 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ„ λ„μž…ν•˜κ²Œ λ˜μ—ˆμŠ΅λ‹ˆλ‹€. 객체지ν–₯ ν”„λ‘œκ·Έλž˜λ°μ„ 톡해 κ²Œμž„ 였브젝트의 크기 / μœ„μΉ˜ / 이미지 속성을 λΆ€μ—¬ν•˜κ³  각각의 μ˜€λΈŒμ νŠΈλ§ˆλ‹€ μ–΄λ– ν•œ 행동을 λ©”μ„œλ“œλ‘œ μ •μ˜ν•¨μœΌλ‘œμ¨ μž¬μ‚¬μš©μ„± ν–₯상 및 μ½”λ“œλ₯Ό 더 μ§κ΄€μ μœΌλ‘œ 뢄리할 수 μžˆμ—ˆμŠ΅λ‹ˆλ‹€.



μ½”λ“œ μ˜ˆμ‹œ




```

export default class Particle {

	constructor({ position, velocity, radius }) {

		this.position = {

			x: position.x,

			y: position.y,

		};



    	this.velocity = {

    		x: velocity.x,

    		y: velocity.y,

    	};



    	this.radius = radius;

    	this.timeTheLess = 300;

    }



    draw(ctx) {

    	ctx.beginPath();

    	ctx.arc(this.position.x, this.position.y, this.radius, 0, Math.PI * 2, false);

    	ctx.fillStyle = "red";

    	ctx.fill();

    	ctx.closePath();

    }



    update(ctx, gravity, canvas) {

    	this.timeTheLess--;

    	this.draw(ctx);

    	this.position.x += this.velocity.x;

    	this.position.y += this.velocity.y;



    	if (this.position.y + this.radius + this.velocity.y <= canvas.height) {

    		this.velocity.y += gravity * 0.4;

    	}

    }



}

```










### `canvas`



κ²Œμž„ ν”Œλ ˆμ΄ 화면을 보여주기 μœ„ν•΄, Vanila Javascriptλ₯Ό 기반으둜 HTML에 λ‹€μ–‘ν•œ μ• λ‹ˆλ©”μ΄μ…˜μ„ 보여쀄 수 μžˆλŠ” canvasλ₯Ό μ‚¬μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€. μ›ν•˜λŠ” μ„ /λ„ν˜•/이미지λ₯Ό 그리고, μ• λ‹ˆλ©”μ΄μ…˜ 효과λ₯Ό λ„£κΈ° μœ„ν•΄ requestAnimationFrame ν•¨μˆ˜λ₯Ό μž¬κ·€λ‘œ μ‹€ν–‰ν•΄μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.



κ²Œμž„ νŠΉμ„±μƒ λ‹€μ–‘ν•œ 상황(점프 & λ‚™ν•˜ / 좩돌 & 접촉 / 캐릭터 사망 λ“±)μ—μ„œ canvas에 μ–΄λ–»κ²Œ 이미지λ₯Ό 그렀주어야할지 λ§Žμ€ 어렀움이 μžˆμ—ˆμŠ΅λ‹ˆλ‹€. 생동감 μžˆλŠ” κ²Œμž„ 캐릭터 κ΅¬ν˜„μ„ μœ„ν•΄ Sprites imageλ₯Ό μ‚¬μš©ν•˜μ˜€κΈ° λ•Œλ¬Έμ— κΈ°λ³Έ 60fps둜 μ‹€ν–‰λ˜λŠ” requestAnimationFrame ν•¨μˆ˜μ—μ„œ 이미지 ν”„λ ˆμž„μ— 맞게 canvas drawing이 μ‹€ν–‰λ˜λ„λ‘ ν”„λ ˆμž„ μ œμ–΄ 둜직이 ν•„μš”ν–ˆμŠ΅λ‹ˆλ‹€.

지면 접촉 및 μž₯μ• λ¬Ό 좩돌 κ΅¬ν˜„μ„ μœ„ν•΄ 캐릭터 μ’Œν‘œ(x, y)와 지면 및 μž₯μ• λ¬Ό μ’Œν‘œλ₯Ό λ‹€μ–‘ν•œ 경우λ₯Ό κ³ λ €ν•˜μ—¬ λ‘œμ§μ„ λ§Œλ“€μ–΄μ•Ό ν–ˆμŠ΅λ‹ˆλ‹€. 이처럼 canvasλ₯Ό λ‹€λ£¨λŠ”κ²Œ κΉŒλ‹€λ‘­κ³  μ–΄λ €μ› μ§€λ§Œ, κ²Œμž„, μ›Ή λ””μžμΈ 등에 μ“°μ΄λŠ” canvas의 ν™œμš©λ„μ— λŒ€ν•΄ 배울 수 μžˆμ—ˆλ˜ 쒋은 κ²½ν—˜μ΄μ—ˆμŠ΅λ‹ˆλ‹€.








### `Sprites image`



μœ μ €μ—κ²Œ λ³΄μ—¬μ§€λŠ” 즐거움을 κ·ΉλŒ€ν™”ν•˜κ³ , ν˜„μž¬ κ²Œμž„μ΄ 잘 λ™μž‘ν•˜κ³  μžˆλ‹€λŠ” 정보λ₯Ό μ „λ‹¬ν•˜κΈ° μœ„ν•΄ μ›€μ§μ΄λŠ” 캐릭터와 효과λ₯Ό μ£Όμ—ˆμŠ΅λ‹ˆλ‹€. canvas 의 frame κΈ°λŠ₯을 μ΅œλŒ€ν•œ ν™œμš©ν•˜μ—¬ λ‘œλ”© μ‹œκ°„μ„ λ‹¨μΆ•μ‹œμΌ°μŠ΅λ‹ˆλ‹€.








### `Web Audio API`



μŒμ„±μΈμ‹μ„ μœ„ν•΄ Web Api둜 μ œκ³΅λ˜λŠ” Audio Contextλ₯Ό μ‚¬μš©ν•˜μ˜€μŠ΅λ‹ˆλ‹€.

Audio Context의 AnalyserNodeλ₯Ό 톡해 얻을 수 μžˆλŠ” 주파수 데이터가 FFT둜 λ³€ν™˜λ˜μ–΄ μ œκ³΅λ˜λŠ”λ° 이λ₯Ό μ›ν•˜λŠ” ν˜•νƒœλ‘œ κ°€κ³΅ν•˜μ—¬ μ‚¬μš©ν•˜λŠ” 것에 어렀움이 μžˆμ–΄ μ˜€ν”ˆμ†ŒμŠ€λ₯Ό κ°œλŸ‰ν•΄μ„œ λ°μ‹œλ²¨μ˜ 크기에 따라 μΊλ¦­ν„°μ˜ 점프 높이λ₯Ό μ‘°μ ˆν•΄μ£Όμ—ˆμŠ΅λ‹ˆλ‹€.








## 🎢 Schedule



πŸ’» 2022. 02. 21 ~ 2022. 03. 13 (3μ£Ό)



`1μ£Όμ°¨`



- `기획 단계: 2022λ…„ 2μ›” 21일 ~ 2022λ…„ 2μ›” 27일`

  - 아이디어 ꡬ상 및 κ²€ν† 

  - 기술 μŠ€νƒ 검증 및 κ²€ν† 

  - [Mock-up](https://www.notion.so/Mockup-7ed08f7eea9c42029aaedb121663da15) μž‘μ—…

  - Kanban 생성

  - μ‚¬μš©ν•  Game sprites 이미지, bgm 정리



`2 & 3μ£Όμ°¨`



- `개발 단계: 2022λ…„ 2μ›” 28일 ~ 2022λ…„ 3μ›” 13일`

  - κΈ°λŠ₯ κ΅¬ν˜„

  - λ¦¬νŒ©ν† λ§ 및 버그 ν•΄κ²°

  - ν…ŒμŠ€νŠΈ μ½”λ“œ μž‘μ„±

  - λ¦¬λ“œλ―Έ μž‘μ„±

    



## 🎢 TechStack



- Vanilla Javascript

- canvas

- HTML

- CSS

- Eslint

- Prettier

- Jest

  



## 🎢 Impression



κ°œλ°œμ„ μ§„ν–‰ν•˜λ©΄μ„œ 쀑간쀑간 μ •ν™•ν•˜μ§€ λͺ»ν–ˆλ˜ 기술 κ²€μ¦μœΌλ‘œ 인해 λͺ©μ—…κ³Ό κΈ°νšμ„ 많이 λ°”κΏ”μ•Όν–ˆλ˜ 뢀뢄이 μžˆμ—ˆλŠ”λ° 이λ₯Ό 톡해 개발 단계λ₯Ό 거치기 μ „ μ •ν™•ν•œ 기술 검증과 기획의 μ€‘μš”μ„±μ— λŒ€ν•΄ λ‹€μ‹œ ν•œλ²ˆ 인지할 수 μžˆμ—ˆκ³ , ν•œ 개의 ν”„λ‘œμ νŠΈλ₯Ό λ§Œλ“€κΈ° μœ„ν•΄ 기획 /λ””μžμΈ / 개발 λ“± μ–΄λŠ ν•˜λ‚˜ μ€‘μš”ν•˜μ§€ μ•Šμ€ 단계가 μ—†λ‹€λŠ” 것을 λͺΈμ†Œ λŠλ‚„ 수 μžˆλŠ” μ‹œκ°„μ΄μ—ˆμŠ΅λ‹ˆλ‹€.



물리 엔진을 μ‚¬μš©ν•˜μ§€ μ•Šκ³  μžλ°”μŠ€ν¬λ¦½νŠΈμ™€ μΊ”λ²„μŠ€λ§ŒμœΌλ‘œ 캐릭터와 μ§€ν˜•μ˜ μΆ©λŒμ„ κ΅¬ν˜„ν•˜λŠ” 뢀뢄에 μžˆμ–΄μ„œ 어렀움이 λ§Žμ•˜μ§€λ§Œ κ°œλ°œμ„ μ‹œμž‘ν•˜κΈ° 이전뢀터 늘 λ§Œλ“€μ–΄λ³΄κ³  μ‹Άμ—ˆλ˜ κ²Œμž„μ„ 주제둜 μž‘μ—… ν•  수 μžˆμ–΄ 어렀움을 λ’€λ‘œν•˜κ³  재밌게 κ΅¬ν˜„ν•  수 μžˆμ—ˆλ˜ ν”„λ‘œμ νŠΈμ˜€μŠ΅λ‹ˆλ‹€.