게임 오버 팝업 띄우기 더 이상 블럭을 넣을 수 없을 때 나오는 팝업은 화면 전체를 가려야하기 때문에 root가 아닌 동등한 레벨의 새로운 노드로 넣어줘야 할 필요가 있었다. 이를 구현하기 위해 리액트의 Portals를 사용하기로 하였다. 팝업창 만들기 GameoverModel.js import { useContext } from 'react' import ReactDOM from 'react-dom' import GameModeContext from './context/GameMode' import GameScoreContext from './context/GameScore' import './GameoverModal.css' const GameoverModal = () => { const gameMode = useContext(GameModeContext) const gameScore = useContext(GameScoreContext) const link = document. More

게임 오버 판별 블록을 게임판에 하나 둘 때마다, 남은 칸에 넣을 수 있는 블럭이 1개 이상 있는지 판별하여, 불가능한 경우 게임 오버로 판정해야한다. 그러려면 3개의 블럭 형태를 모두 게임판과 비교하여 확인해야하는데, 기존의 블럭 형태로는 어려워 생성 로직에 약간 수정이 필요했다. 블럭 생성 함수 수정 BlockUtil.js const blockShape = [ [[1]], [[0,1],[1,1]], [[1,1],[1,1]], [[1,0,0],[1,1,1]], [[0,1,0],[1,1,1]], [[1],[1]], [[0,0,1],[1,1,1]], [[1,1,1]], [[0,0,1],[0,0,1],[1,1,1]], [[1,1,1],[0,0,1],[0,0,1]], [[1,1,1],[1,1,1],[1,1,1]], ] ... const rotateShape = (shape, rotate) => { let rotated = [] const row = shape[0]. More

점수 기능 구현 게임판의 칸이 세로 또는 가로로 한 줄이 전부 채워지면 해당 줄을 지우고 점수를 올려야한다. 점수 관리 GameData.js import React, { useState, createContext } from "react"; const GameDataContext = createContext({ state: { gamemode : 7, score : 0 }, actions : { setGamemode: () => {}, setScore: () => {}, } }) const GameDataProvider = ({ children }) => { const [gamemode, setGamemode] = useState(7) const [score, setScore] = useState(0) const context = { state : { gamemode, score }, actions : { setGamemode, setScore } } return ( <GameDataContext. More

게임판 상호작용 블럭을 드래그&드롭 할 때, 게임판 위에 위치하는지와 어느 칸에 삽입하는지를 알기 위해 게임판의 좌표를 가져와야할 필요가 있다. 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