게임판 상호작용 블럭을 드래그&드롭 할 때, 게임판 위에 위치하는지와 어느 칸에 삽입하는지를 알기 위해 게임판의 좌표를 가져와야할 필요가 있다. ObjectList.js ... useEffect(() => { const container = document.getElementById("top-gameboard-container") const boundary = container.getBoundingClientRect() return ( console.log(boundary) // 확인용 ) } ) ... useEffect를 사용하여 DOM이 렌더링되고 난 이후 게임판의 좌표를 getBoundingCilentRect() 통해서 가져오고자 했다. 결과는 에러였는데, 서로 다른 컴포넌트에서 렌더링되어 useEffect로 접근이 불가능한 듯하다. 이를 해결하기 위해서 context를 통한 전역변수로 사용하고자 했는데, 게임판의 좌표 외에 각 격자마다의 좌표, 삽입할 경우의 style 또는 state 변경 등을 생각하면 모두 context로 전달하기에는 너무 복잡해질 것 같았다. More

블럭 오브젝트 만들기 줄곧 빈 칸으로 있던 ObjectList.js를 먼저 채워주기로 했다. 하나의 파일 안에 코드를 몰아넣으면 복잡해질 것 같아 생성하는 함수는 따로 작성하여 import 해주기로 했다. ObjectUtil.js const blockShape = [ [[1]], [[0,1],[1,1]], [[1,1],[1,1]], [[1,0,0],[1,1,1]], [[0,1,0],[1,1,1]], [[0,0,1],[1,1,1]], [[0,0,1],[0,0,1],[1,1,1]], [[1,1,1],[1,1,1],[1,1,1]], ] // 블럭 모양 설정 const blockColor = [ 'black', 'gray', 'blue', 'red', 'purple', 'yellowgreen' ] // 블럭 색깔 설정 const rotate = [ 0, 90, 180, 270 ] // 블럭 회전 const randomNumber = () => { return ({ shape: Math. More

Context API 도입 (1)에서 만들었던 화면에서는 게임 모드를 선택해도 게임판의 격자가 바뀌지 않았다. Gamemode.js의 state가 Gameboard.js로 전달되지 않아서인데, state를 공통 상위 컴포넌트로 올려도 되지만 이후 게임판의 좌표를 통해서 드래그&드롭되는 위치를 확인할 계획이기 때문에 컴포넌트 간 여러 변수를 공유할 계획으로 전역변수를 위한 Context API를 사용해 보기로 했다. context/GameData.js const GameDataContext = createContext({ state: { gamemode : 7, }, actions : { setGamemode: () => {}, } }) const GameDataProvider = ({ children }) => { const [gamemode, setGamemode] = useState(7) const context = { state : { gamemode }, actions : { setGamemode } } return ( <GameDataContext. More

시작 지난 번 작혼 확장프로그램을 리액트로 만들어 본 이후, 리액트와 자바스크립트에 좀 더 익숙해지고자 새로 시도해 볼 토이프로젝트를 고심하던 중 모바일 게임을 보고 구현해보고자 한다. 구상 게임 모드 버튼을 통해 게임판 크기 변경 가능 랜덤으로 생성되는 3가지의 블록을 드래그&드롭을 통해 배치 가로 또는 세로 한 줄이 다 차면 삭제 배치된 블럭 수, 삭제된 라인 또는 블럭 수 등으로 점수 표시 화면 구현 우선 간단하게 화면을 구성해보았다. 하나하나 기능을 구현해 갈 예정이다. More