[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
2020. 9. 6.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 4️⃣ - 테마 설정하기
테마를 만들어보자! 제가 만드는 2048 게임의 2번째 차별점입니다, 기존의 2048 게임은 항상 똑같은 색깔이라 그런지 계속하다보면 밋밋한 기분이 들죠. 그래서 뭔가 버튼 클릭에 따라서 맵도 바뀌고 테마도 이쁘게 바뀌었으면 하는 생각을 해봤습니다. 그런데 정작 제 자신이 디자인알못이라 테마에 들어갈 색을 이쁘게 고르지는 못한다는 허점이 있네요 ㅎㅎㅎㅎ 😂 타일별로 색 설정하기 완성 모습을 보시면 타일별로 색깔이 다 다릅니다. 그렇다고 해서 숫자 셀 하나하나를 컴퍼넌트로 설정하면 불편하겠죠? 저희는 Styled-component 를 이용해서 구현합시다! 레벨 별 색 설정 먼저 단계별 무슨 색상을 할 것인지 설정해줍시다. 직접 고르는거보다 요즘은 색 고르는데에 도움을 주는 파레트 사이트가 좋은게 많으니 참..
2020. 9. 2.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 3️⃣ - 알고리즘 구현
2048 알고리즘 2048 알고리즘을 구현해볼 차례입니다! 아마 구현하는 방법은 사람이 생각하는거에 따라 엄청 다양하고 여러가지일 것 같습니다! 저는 이분의 유튜브에서 왼쪽으로 이동하고 터지는 부분을 참고해서 좀 더 추가하거나 변형해서 만들었습니다. www.youtube.com/watch?v=aDn2g8XfSMc 게임 작동 방식 알고리즘 작동 방식은 다음과 같이 이루어집니다. 우선 방향키를 누르게되면 누른 방향으로 0을 제외한 숫자들이 이동하게 되고, 변화가 있다면 랜덤한 위치에 가장 작은 숫자가 생성됩니다. 그리고 이동한 경우에 같은 숫자 2개가 만나면? 터집니다 ! ✨ 터지게되면 점수를 획득하고, 두 숫자가 합쳐진 새로운 숫자가 만나죠. 이를 상 하 좌 우 로 똑같이 구현하면 됩니다. 우선 만들어야 ..
2020. 8. 31.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 2️⃣ - 화면 레이아웃 잡기
화면 구성 우선, 게임을 구현하기 앞서, 2048 게임 화면엘 들어갈 요소들 레이아웃들을 정해줍시다. 저는 Ant Design 의 그리드 시스템과 Styled Component를 이용하여 스타일링을 했습니다! 이 부분에 대해서는 따로 설명하지 않을테니 잘 모르시는 분들은 스타일 컴퍼넌트 공식문서 나 제 Antd 포스팅 을 보시고 오는걸 권장합니다! 최종 화면은 다음과 같을 것이고, 저는 스타일링에는 재주가 없다보니, 스타일은 본인 취향에 맞게 꾸미시는거를 추천드립니다 ㅎㅎㅎ😜 시작합니다! 레이아웃 나누기 Ant Design 에서는 기본적으로 Row 와 Col 을 지원해서 Grid 시스템을 쉽게 쓸수 있게 해줍니다. 저는 다음과 같이 레이아웃을 나눠보았습니다. 게임에 관한 요소들이 들어있는 Game2048..
2020. 8. 29.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding
2048 게임 한 때 친구들 폰에 하나씩은 꼭 깔려있던 게임인 2048 입니다. 컴퓨터 버전도 있더군요! 참 특별할 거 없는데 뭔가 모르게 재밌습니다 ㅎㅎ 게임 하나를 만들어보고 싶어서 고민하다가 직접 만드는건 재미가 너무없을 것 같아서 (창의력 부족 😥) 2048 클론 코딩을 도전했습니다! https://play2048.co/ 2048 Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive! play2048.co 차별화 클론 코딩의 장점은 내가 원하는 부분을 바꿀 수 있다는 점입니다. 그래서 어떤 점을 특별하게 하면 좋을까 생각을 해봤습니다! 여러가지 테마 선택 기능 2048 게임이 단순한 게임이다보니까 질..
2020. 8. 17.
[React🌀] React로 2048 게임 만들기 ! 🎮 / 5️⃣ - 키 입력받기
키 입력💥 이제 키를 입력받아서 구현해뒀던 함수들을 쓸 수 있게 만들어봅시다. 방향키를 누르면 그에 따라 게임판이 바뀌고, 아래 사진처럼 게임판 양쪽에 있는 전광판에 무슨 키를 눌렀는지도 나오게 해볼거에요! Arrow 스타일링 const ArrowContainer = styled.div` display: inline-block; position: absolute; top: 50%; right: 30px; background: #ea5455; width: 50px; height: 50px; text-align: center; border-radius: 5px 5px 5px 5px; -moz-border-radius: 5px 5px 5px 5px; -webkit-border-radius: 5px 5px 5p..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 4️⃣ - 테마 설정하기
테마를 만들어보자! 제가 만드는 2048 게임의 2번째 차별점입니다, 기존의 2048 게임은 항상 똑같은 색깔이라 그런지 계속하다보면 밋밋한 기분이 들죠. 그래서 뭔가 버튼 클릭에 따라서 맵도 바뀌고 테마도 이쁘게 바뀌었으면 하는 생각을 해봤습니다. 그런데 정작 제 자신이 디자인알못이라 테마에 들어갈 색을 이쁘게 고르지는 못한다는 허점이 있네요 ㅎㅎㅎㅎ 😂 타일별로 색 설정하기 완성 모습을 보시면 타일별로 색깔이 다 다릅니다. 그렇다고 해서 숫자 셀 하나하나를 컴퍼넌트로 설정하면 불편하겠죠? 저희는 Styled-component 를 이용해서 구현합시다! 레벨 별 색 설정 먼저 단계별 무슨 색상을 할 것인지 설정해줍시다. 직접 고르는거보다 요즘은 색 고르는데에 도움을 주는 파레트 사이트가 좋은게 많으니 참..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 3️⃣ - 알고리즘 구현
2048 알고리즘 2048 알고리즘을 구현해볼 차례입니다! 아마 구현하는 방법은 사람이 생각하는거에 따라 엄청 다양하고 여러가지일 것 같습니다! 저는 이분의 유튜브에서 왼쪽으로 이동하고 터지는 부분을 참고해서 좀 더 추가하거나 변형해서 만들었습니다. www.youtube.com/watch?v=aDn2g8XfSMc 게임 작동 방식 알고리즘 작동 방식은 다음과 같이 이루어집니다. 우선 방향키를 누르게되면 누른 방향으로 0을 제외한 숫자들이 이동하게 되고, 변화가 있다면 랜덤한 위치에 가장 작은 숫자가 생성됩니다. 그리고 이동한 경우에 같은 숫자 2개가 만나면? 터집니다 ! ✨ 터지게되면 점수를 획득하고, 두 숫자가 합쳐진 새로운 숫자가 만나죠. 이를 상 하 좌 우 로 똑같이 구현하면 됩니다. 우선 만들어야 ..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 2️⃣ - 화면 레이아웃 잡기
화면 구성 우선, 게임을 구현하기 앞서, 2048 게임 화면엘 들어갈 요소들 레이아웃들을 정해줍시다. 저는 Ant Design 의 그리드 시스템과 Styled Component를 이용하여 스타일링을 했습니다! 이 부분에 대해서는 따로 설명하지 않을테니 잘 모르시는 분들은 스타일 컴퍼넌트 공식문서 나 제 Antd 포스팅 을 보시고 오는걸 권장합니다! 최종 화면은 다음과 같을 것이고, 저는 스타일링에는 재주가 없다보니, 스타일은 본인 취향에 맞게 꾸미시는거를 추천드립니다 ㅎㅎㅎ😜 시작합니다! 레이아웃 나누기 Ant Design 에서는 기본적으로 Row 와 Col 을 지원해서 Grid 시스템을 쉽게 쓸수 있게 해줍니다. 저는 다음과 같이 레이아웃을 나눠보았습니다. 게임에 관한 요소들이 들어있는 Game2048..
[React🌀] React로 2048 게임 만들기 ! 🎮 / 1️⃣ - 기본 세팅 및 소개 / Clone Coding
2048 게임 한 때 친구들 폰에 하나씩은 꼭 깔려있던 게임인 2048 입니다. 컴퓨터 버전도 있더군요! 참 특별할 거 없는데 뭔가 모르게 재밌습니다 ㅎㅎ 게임 하나를 만들어보고 싶어서 고민하다가 직접 만드는건 재미가 너무없을 것 같아서 (창의력 부족 😥) 2048 클론 코딩을 도전했습니다! https://play2048.co/ 2048 Join the numbers and get to the 2048 tile! Careful: this game is extremely addictive! play2048.co 차별화 클론 코딩의 장점은 내가 원하는 부분을 바꿀 수 있다는 점입니다. 그래서 어떤 점을 특별하게 하면 좋을까 생각을 해봤습니다! 여러가지 테마 선택 기능 2048 게임이 단순한 게임이다보니까 질..