[project] Rainy-player 기획안

Rainy-player 

 

- 예상 제작기간 : 5일

(2022-02-21 ~ 02-25)

 

- 1인 프로젝트

 

• HTML
• CSS 
• JavaScript
• (추후 React로 변경)
• Design (Figma)

 

- skill

 

 javaScript (Event Listener)

Audio Object

CSS Animation

SVG (path 이용 animation)

MediaQuery

Figma (icon 제작, 디자인  draft)

 

 

 

👍 목표

- figma 사용법 익히고, svg 파일 다뤄보기.
- css 애니메이션 기법 활용
- audio 플레이어 디자인 (button과 onclick)

 

구상한 디자인 draft

< 전체적인 기능 >

 

- 비소리 음원 loop로 계속 재생.

- player에는 재생 시간 계산해서 나오게 함. (Date 객체로 계산)

- 시간이 지날수록 나무가 성장할 수 있게. (pause 누르면 다시 돌아옴)

- 야간모드 flip해서 색상 변경하기

- css 애니메이션 적극 활용

 

 

 

 

🔻 세부 기능 설명 

 

 

 

기능 1 / audio player

 

- 비소리 음원

- mp3(audio/mpeg)와 wav(audio/wav) 두가지 source 지원

- 재생아이콘 클릭시 play()

- 일시정지아이콘 클릭시 pause()

 

🔎 자바스크립트 이벤트리스너

🔎 Audio 객체 (new Audio로 할지?)

 

 

 

 

기능 2 / 야간모드 flip

 

🔎 자바스크립트 이벤트리스너

🔎 css 변경 (background-image 변경)

 

 

 

 

 

기능 3 / 나무 키우기 or 꽃 키우기

🔎 자바스크립트 이벤트리스너

🔎  css 변경 (background-image 변경)

 

 

 

 

 

+) 그 외 설정

 

- 나무 성장 단계는 총 3단계로 하고

 

- 시간 interval은

 

player 부분에 minutes가 10이 되면 2단계 나무로,

30이 되면 3단계 나무로 성장하게.

 

tree / flower