#블랙핑크 #로제 #brunomars #APT #아파트 #아파트게임 #HTML #CSS #JavaScript #Firebase #ASMR #Programming #Coding #프로그래밍 #코딩

안녕하세요, 키보디st입니다!

오늘은 HTML, CSS, JavaScript, Firebase를 활용해 블랙핑크 로제의 APT 게임을 웹 상에서 구현해볼 거예요.

질문이 있다면 언제든지 댓글로 남겨주세요!
원하는 프로젝트 주제도 환영합니다

Code, Calm, Create

GitHub | https://github.com/KEYBOARDYst/
Gmail | keyboardy1st@gmail.com
Play | https://keyboardyst.github.io/APTGame/



00:00 블랙핑크 로제의 APT를 HTML 게임으로?
00:16 오늘의 목표
00:54 Prettier로 코딩 환경 세팅하기
01:10 HTML과 CSS로 APT 게임 화면 만들기
02:07 Google Fonts 적용
02:52 Typography 요소 HTML 작성 및 CSS 디자인
04:55 Ready Game 요소 HTML 작성 및 CSS 디자인
07:46 Rank Board 요소 HTML 작성 및 CSS 디자인
08:41 Score Box 요소 HTML 작성 및 CSS 디자인
09:31 Countdown 요소 HTML 작성 및 CSS 디자인
11:50 Controls 요소 HTML 작성 및 CSS 디자인
12:40 Game Over 요소 HTML 작성 및 CSS 디자인
16:10 favicon 설정
16:25 JavaScript 생성 및 변수 선언
17:40 JavaScript 게임 시작 이벤트 제작
22:16 JavaScript 게임 플레이 이벤트 및 애니매이션 제작
36:33 Firebase로 점수 기록
37:10 JavaScript 점수 관리 및 랭킹 기록
41:25 반응형 모바일 CSS 디자인 적용