거지 키우기 게임 만들기 - HTML

HTML

 

CSS

 

JavaScript

 

먼저 3가지로 나눠서 포스팅 할 예정

 

이후 조금씩 업데이트 하는것마다 올릴 예정입니다

 

 

# 원래 게임 사진

위와같이 원래 있는 게임인데

 

게임방식은

 

1. 자동으로 1초당 돈이 계속 오른다.

2. 수동으로 터치해도 돈이 계속 오른다.

3. 번 돈으로 옵션을 구매해서 더 부자가 되는 시스템

 

# 옵션은 1초당 돈이 점점 많이 오르는 것이나

터치 시 돈이 더 많이 오르는 등 그런것 위주이다.

 

자세히 따라하기보다 그냥 웹에다 비슷하게 작동하는걸 

 

간단히 따라해보고 싶었다.

 

1. 설계

먼저 Power Point 로 간단히 계획을 짜보았다.

 

각 컴포넌트들의 위치를 정리해보았다

[ 컴포넌트 위치 정리 ]

 

위와 같이 만들기 위해 div박스들을 어떻게 배치해야 할지 생각했다

 

다음으로는 저렇게 만들기 위해 

div로 각 가장 큰 구역을 나누기로했다.기준은

 

CSS에서

display : flex

flex-direction : row 적용할 곳 기준으로 생각해봤다

 

# display : flex

   flex-direction : 이것은 해당 div속에 있는 div들을 가로로 배치할건지 세로로 배치할건지를

row, column으로 나눌 수 있다.

만약 나누지 않으면 기본값인 column으로 계속 화면 위에서 아래 방향으로 컴포넌트들이 생길것이다

 

나는 그것을 원치 않기에 구역을 나눈다.

 

[ div 구역 나누기 ]

이렇게하면

각 구역 속에 또

각각 div들을 배치하면서

세밀하게 조절할 수 있기에 큰틀로 생각하고 적용했다.

2. HTML

[구역 나뉜 모습]

왼쪽 div : left-box

오른쪽 div : right-box

간판 : store-sign

리스트 : store-list

 

이렇게 설계대로 구역을 크게 나누었다.

 

왼쪽div, 오른쪽div는

top div를 만들어서 감쌌는데

이유는

왼쪽div 오른쪽 div도 결국엔 row로 설계했기에

flex-direction :row를 적용할 부모가 있어야 했다.

 

 

[ 각 div별 구성 왼쪽 div ]

돈이 오를 공간과

아르바이트, 사용자 정보 = 즉 사람정보로 나누었다.

 

 

[ 오른쪽 div ]

여긴 오직 버튼이다 

이 게임에 중추적인 역할이기에 그냥 크게 만들고 싶었다

 

[간판 div]

간판들도 간단히 배치했고

 

[리스트 div]

각 리스트들도 구역을 나누었다. 같은 CSS를 적용할거라서 이름을 통일했다.

[ HTML 적용 된 모습 ]

 

 

다음편은 CSS..!