HTML5 Canvas - 불꽃놀이 project
시작 유튜브 Interactive Developer님의 HTML5 Canvas Tutorial 영상을 보고 관심을 가지게 되어서, 간단히 캔버스를 클릭하면 불꽃이 터지는 효과를 만들어보기로 했다. 강의에서 클래스로 기능을 구현하시는 걸 따라하며 겸사겸사 연습하기로. 구현 가장 처음으로 기본세팅. index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=0"> <title></title> <link rel="stylesheet" href="style.css"> </head> <body> <script type="module" src="app.js"></script> </body> </html> style.css * { outline: 0; margin: 0; padding: 0; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; background-color: #ffffff; } canvas { width: 100%; height: 100%; } app. More

React로 블럭 채우기 퍼즐 만들기(7) - 게임 오버 팝업 project
게임 오버 팝업 띄우기 더 이상 블럭을 넣을 수 없을 때 나오는 팝업은 화면 전체를 가려야하기 때문에 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

React로 블럭 채우기 퍼즐 만들기(6) - 게임 오버 project
게임 오버 판별 블록을 게임판에 하나 둘 때마다, 남은 칸에 넣을 수 있는 블럭이 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

React로 블럭 채우기 퍼즐 만들기(5) - 점수 올리기 project
점수 기능 구현 게임판의 칸이 세로 또는 가로로 한 줄이 전부 채워지면 해당 줄을 지우고 점수를 올려야한다. 점수 관리 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

React로 블럭 채우기 퍼즐 만들기(4) - 블럭 넣기 구현 project
게임판 상호작용 블럭을 드래그&드롭 할 때, 게임판 위에 위치하는지와 어느 칸에 삽입하는지를 알기 위해 게임판의 좌표를 가져와야할 필요가 있다. 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

React로 블럭 채우기 퍼즐 만들기(3) - 블럭 만들기 project
블럭 오브젝트 만들기 줄곧 빈 칸으로 있던 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

React로 블럭 채우기 퍼즐 만들기(2) - Context API project
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
Page 1 / 2
Top