[React🌀] React로 2048 게임 만들기 ! 🎮 / 2️⃣ - 화면 레이아웃 잡기
화면 구성
우선, 게임을 구현하기 앞서, 2048 게임 화면엘 들어갈 요소들 레이아웃들을 정해줍시다. 저는 Ant Design 의 그리드 시스템과 Styled Component를 이용하여 스타일링을 했습니다! 이 부분에 대해서는 따로 설명하지 않을테니 잘 모르시는 분들은 스타일 컴퍼넌트 공식문서 나 제 Antd 포스팅 을 보시고 오는걸 권장합니다!
최종 화면은 다음과 같을 것이고, 저는 스타일링에는 재주가 없다보니, 스타일은 본인 취향에 맞게 꾸미시는거를 추천드립니다 ㅎㅎㅎ😜
시작합니다!
레이아웃 나누기
Ant Design 에서는 기본적으로 Row 와 Col 을 지원해서 Grid 시스템을 쉽게 쓸수 있게 해줍니다. 저는 다음과 같이 레이아웃을 나눠보았습니다. 게임에 관한 요소들이 들어있는 Game2048Board 라는 자식 컴퍼넌트로 따로 빼주고, 나머지는 Col 과 Div 를 이용해서 나눴습니다.
Styled-Component로 스타일링 하기
스타일링이 된 요소들을 만들어 주었습니다. 알아보기 쉽게 이름을 용도에 맞게 지어주세요!
다음과 같은 요소들이 사용됩니다! 이 것 외에 것들은 간단하게 내부 style 태그를 이용했습니다.
const VersionButton = styled(Button)`
display: block;
width: 50%;
margin: 10px auto;
`
const ModeContainer = styled.div`
width: 60%;
background-color: #383b3a;
-webkit-box-shadow: 9px 11px 12px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 9px 11px 12px 2px rgba(0, 0, 0, 0.75);
box-shadow: 9px 11px 12px 2px rgba(0, 0, 0, 0.75);
padding: 20px;
margin: 20px auto;
`
const MainContainer = styled(Row)`
color: #f5f6fa;
min-height: 100vh;
background-color: ${GAME_BG_COLOR};
`
const H2 = styled.h2`
font-size: 2vw;
max-width: 75vw;
color: ${(props) => props.color || "inherit"};
font-family: "Red Hat Display", "Noto Sans KR", sans-serif;
`
미리 styled-component 모듈을 import 하셔야 하고, Button , Row , Col 과 같은 요소들 또한 antd 를 통해 import 하셨어야 합니다!
컴퍼넌트 부분
const game2048: NextPage<{ serverData: Data2048 }> = ({ serverData }) => {
const [version, setVersion] = useState(4)
const onClickButton = (ver: number) => {
setVersion(ver)
}
}저희는 버전에 따라 2048 게임을 변화시켜줘야합니다! useState 를 이용해서 자식 컴퍼넌트인 Board를 담당하는 Game2048Board 에 version 변수를 전달해줘야합니다. 그리고 Button 을 클릭하면 trigger 될 onClickButton 함수를 작성해줍니다. 큰 내용은 없고 version을 변화시켜주는 함수입니다!
( serverData 에 관련된 것은 일단 넘어가세요! 최고점수 를 서버에다 저장해서 가져올 때 이용할 것입니다.)
return (
<MainContainer>
<Col xs={24} md={6} style={{ textAlign: "center" }}></Col>
/* 게임 네비게이션 바가 들어갈 공간 (저는 게임 여러개를 구현해둬서 만들었습니다) */
// 그냥 아무것도 안넣으셔도 됨
<Col xs={24} md={12}>
/* 가운데 부분 , 게임 보드와 설명, footer 등 들어갈 공간 */
<br></br>
// Game2048Board 컴퍼넌트는 추후 작성할 예정이니 일단 비워주셔도 됩니다!
<Game2048Board serverData={serverData} version={version}></Game2048Board>
<Row align='middle' justify='center' style={{ textAlign: "center" }}>
<p>조작법 : ➡ / ⬅ / ⬆ / ⬇</p>
<p>우측 상단메뉴를 통해 여러 모드와 테마로 즐길 수 있습니다! (웹 전용)</p>
</Row>
<footer>게임 내용 출처 : "https://play2048.co/"</footer>
</Col>
<Col xs={24} md={6} style={{ textAlign: "center" }}>
/* 게임 모드 선택 바를 넣을 공간 */
</Col>
</MainContainer>
)
가운데에 메인 파트부터 작성해보았습니다.
필요에 맞게 설명이나 내용을 작성해주시고, Game2048Board 컴퍼넌트는 아직 안만들었으니 그냥 놔두세요!
모드 선택 부분
<Col xs={24} md={6} style={{ textAlign: "center" }}>
/* 게임 모드 선택 바를 넣을 공간 */
<ModeContainer>
<H2>SELECT MODE</H2>
{new Array(4).fill(null).map((v, i) => (
<Popconfirm
placement='leftTop'
title={EXIT_TEXT}
onConfirm={() => {
message.info("Mode changed.")
onClickButton(i + 2)
}}
okText='Yes'
cancelText='No'
key={`Popconfirm__${i}`}
>
<VersionButton>{`${i + 2} ❌ ${i + 2}`}</VersionButton>
</Popconfirm>
))}
</ModeContainer>
</Col>
굳이 2*2 버튼 3*3 버튼 4*4 버튼 5*5 버튼 다 만드는 거는 비효율적입니다.
4개짜리 배열을 선언해서 한번에 구현해줍니다!
최종 코드
import React, { useState } from "react"
import { Row, Col, Button, Popconfirm, message } from "antd"
import Game2048Board from "../../components/games/Game2048Board"
import styled from "styled-components"
import { GAME_BG_COLOR, H2, H3_KR } from "../../styles/styled"
import GameNavigation from "../../components/GameNavigation"
import { NextPage, NextPageContext } from "next"
import db from "../../db/game2048"
const EXIT_TEXT = "진행중인 게임이 종료 됩니다."
const VersionButton = styled(Button)`
display: block;
width: 50%;
margin: 10px auto;
`
const ModeContainer = styled.div`
width: 60%;
background-color: #383b3a;
-webkit-box-shadow: 9px 11px 12px 2px rgba(0, 0, 0, 0.75);
-moz-box-shadow: 9px 11px 12px 2px rgba(0, 0, 0, 0.75);
box-shadow: 9px 11px 12px 2px rgba(0, 0, 0, 0.75);
padding: 20px;
margin: 20px auto;
`
const MainContainer = styled(Row)`
color: #f5f6fa;
min-height: 100vh;
background-color: ${GAME_BG_COLOR};
`
export interface Data2048 {
best: {
ver2: number
ver3: number
ver4: number
ver5: number
}
}
const game2048: NextPage<{ serverData: Data2048 }> = ({ serverData }) => {
const [version, setVersion] = useState(4)
const onClickButton = (ver: number) => {
setVersion(ver)
}
return (
<MainContainer>
<Col xs={24} md={6} style={{ textAlign: "center" }}></Col>
<GameNavigation></GameNavigation>
<Col xs={24} md={12}>
<br></br>
<Game2048Board serverData={serverData} version={version}></Game2048Board>
<Row align='middle' justify='center' style={{ textAlign: "center" }}>
<p>조작법 : ➡ / ⬅ / ⬆ / ⬇</p>
<p>우측 상단메뉴를 통해 여러 모드와 테마로 즐길 수 있습니다! (웹 전용)</p>
</Row>
<footer>게임 내용 출처 : "https://play2048.co/"</footer>
</Col>
<Col xs={24} md={6} style={{ textAlign: "center" }}>
<ModeContainer>
<H2>SELECT MODE</H2>
{new Array(4).fill(null).map((v, i) => (
<Popconfirm
placement='leftTop'
title={EXIT_TEXT}
onConfirm={() => {
message.info("Mode changed.")
onClickButton(i + 2)
}}
okText='Yes'
cancelText='No'
key={`Popconfirm__${i}`}
>
<VersionButton>{`${i + 2} ❌ ${i + 2}`}</VersionButton>
</Popconfirm>
))}
</ModeContainer>
</Col>
</MainContainer>
)
}game2048.tsx 파일명으로 했습니다. 다음 포스팅은 게임의 핵심인 Game2048Board 부분으로 이어집니다!
| 리액트로 2048 게임 만들기🎮 |
2020/08/17 - [웹 개발/React] - [React🌀] React로 2048 게임 만들기 ! / 1️⃣ - 기본 세팅 및 소개 / Clone Coding