본문 바로가기

Projects64

[Socket Omok] 9. 게임 승리 조건 만들기 게임 승리 조건 만들기 게임 승리 조건도 별거 없다. 그냥 알고리즘만 짜면 되기 때문에 별로 어렵지 않다. 우선 코드부터 보자. function checkOmokCompleted(coord, takes) { //(0, 1), (1, 1), (1, 0), (1, -1) const offset = [ { x: 1, y: 0 }, //가로 { x: 1, y: 1 }, //대각선1 { x: 0, y: 1 }, //세로 { x: -1, y: 1 }, //대각선2 ]; return offset.some((dir) => { let streak = 1; const type = (takes.length - 1) % 2; //정방향 for ( let x = coord.x + dir.x, y = coord.y + dir.y.. 2022. 6. 13.

[Socket Omok] 8. 마지막 착수 위치 보여주기 마지막 착수 위치 보여주기 이제 거의 다 왔다. 게임 승리 조건만 구현하고 CSS를 통해 클라이언트 화면만 꾸며주면 끝난다. 그 전에 편의성 기능인 마지막 착수 위치 표시 기능부터 만들고 가자. 착수 기록의 마지막 위치에 이전에 만들었던 hint 속성의 돌만 추가하면 되기에 별로 어렵지 않다. const OmokBoard = ({ takes }) => { ... return ( ... {takes.length > 0 ? ( ) : null} ... ); }; 2022. 6. 13.

[Socket Omok] 7. 플레이어 턴 진행 플레이어 턴 진행 이제 플레이어가 팀도 선택할 수 있고, 착수도 할 수 있으니 언제 착수시킬건지만 정하면 된다. 클라이언트에서 착수 신호를 보내도, 응답을 받기 전까지는 착수한 돌을 화면에 표시하지 않도록 해야된다. 또한 착수가 잘못되었으면 착수 메시지를 무시하고, 다시 해당 플레이어에게 턴을 넘겨줘야 한다. 플레이어가 착수하면 서버에 "player_selected" 신호를 주고, 만약 정상적인 착수라면 해당 방에 참가한 모든 플레이어들에게 "player_selected" 신호를 돌려주어 오목판을 업데이트 하도록 했다. socket.on("player_selected", (coord) => { const name = getJoinedRoomName(socket); const room = getPublic.. 2022. 6. 13.

[Socket Omok] 6. 착수 위치 미리보기 및 선택하기 착수 위치 미리보기 미리보기가 없어서 '여기쯤 클릭하면 되겠지' 하고 착수했는데 엉뚱한곳에 착수되면 엄청 억울할것이다. 적어도 '내가 지금 클릭하면 여기에 놔지겠구나' 정도는 알려줄 수 있어야 한다. 우선 바둑판의 크기와 같은 div를 바둑판의 위에 이벤트 감지용으로 만들었다. 원래는 바둑판 자체에서 이벤트를 수신했는데, 바둑알을 놓으면 바둑알이 이벤트 수신을 방해해서 새 컴포넌트를 만들었다. 우선 바둑알 컴포넌트의 prop을 수정했다. 기존에는 white인지 아닌지만 true : false로 받았는데, 배열로 들어갈 속성들을 받아서 class를 추가해주는 방식으로 변경했다. const stone = ({ type, x, y }) => { let material = ""; type.forEach((m) .. 2022. 6. 13.

[It's My Waye] 16. 프로젝트 종료 및 회고 Intro https://github.com/DevJaewoo/its-my-waye GitHub - DevJaewoo/its-my-waye Contribute to DevJaewoo/its-my-waye development by creating an account on GitHub. github.com 드디어 장장 5달에 걸친 프로젝트가 끝이 났다. 결과물을 보면 일주일 만에 만들어도 이상할 게 없는 규모인데, 안드로이드를 완전 처음 해보는 것이기도 하고, 무엇보다 혼자 프로젝트를 진행하다 보니 미루고 미뤄도 남들에게 전혀 피해가 가지 않기 때문에 마음 놓고 놀았던 게 컸다. 그래도 '하던 건 마저 마무리해야지'라는 마음가짐으로 5월 중순부터 다시 시작해 거의 2주 만에 완성시켰다. 마지막 2주 동안은.. 2022. 6. 8.

[Socket Omok] 5. 바둑판, 바둑알 표시하기 바둑판 크기 계산하기 이제 가장 중요한 기능인 바둑판과 바둑알 표시 기능을 추가해야 한다. 개인적으로 이번 프로젝트에서 바둑알 착수 이벤트 감지에 이어 가장 어려운 부분이 아닐까 싶다. 우선 인터넷에서 바둑판 사진 하나를 다운로드해왔다. 그 후 픽셀 수를 통해 오프셋과 칸의 너비가 이미지의 몇% 정도 되는지 측정했다. 측정 결과 Offset은 3.62%, Width는 5.14%가 나왔다. 이 값을 통해 이제 바둑알의 위치를 정해줘야 한다. 바둑알 컴포넌트 const BOARD_OFFSET = 3.62; //% const BOARD_SPACE = 5.14; //% const stone = ({ white, x, y }) => { //console.log(`${white} (${x},${y})`); retu.. 2022. 6. 6.

[Socket Omok] 4. 플레이어 참가 기능 개발 Intro 기존에는 방을 만든 사람이 흑돌, 2번째로 들어온 사람이 백돌로 플레이하도록 하려 했지만, 플레이어가 흑돌 / 백돌 중 어떤 돌로 플레이 할지 선택할 수 있는 기능이 필요할것 같았다. 그래서 만약 흑돌 / 백돌에 플레이어가 참가중이지 않다면 '참가' 버튼을 표시하고, 플레이어가 참가중이라면 해당 플레이어의 ID를 표시하는 기능을 추가했다. GamePanel 컴포넌트 const GamePanel = ({ roomname, blackPlayer, whitePlayer }) => { const Player = ({ name, onClick }) => { return ( {name !== "" ? {name} : 참가} ); }; const blackPlayerCallback = () => { soc.. 2022. 6. 6.

[Socket Omok] 3. 대기실 기능 개발 Intro 개발 환경을 구축하고 사용자가 처음 접속하면 보여질 방과 관련된 기능들을 개발했다. 사용자가 방을 생성하고, 다른 사용자가 생성된 방에 참가하면 오목 경기를 시작시킬 것이다. 그 후에 들어오는 사용자들은 관전자로 놔둘 생각이다. React를 처음 써봐서 기능을 개발하며 많이 헤맸지만, 생각보다 간단하고 강력한 기능을 제공해줘서 금방 이정도까지 만들 수 있었던것 같다. 방 생성 input에 방 이름을 입력하고 Enter를 치거나 '방 만들기' 버튼을 클릭하면 해당 이름으로 방이 생성된다. 아래의 경우 방이 생성되지 않도록 설정했다. 같은 이름의 방이 이미 존재하는 경우 사용자가 이미 다른 방에 참가중인 경우 방 이름에 아무것도 입력하지 않았을 경우 코드는 아래와 같다. 이벤트 발생 시 roomn.. 2022. 6. 5.

[Socket Omok] 2. 개발환경 구성하기 Intro 이번 시간엔 아래의 개발환경을 구축해보도록 하겠다. Back-end: NodeJS + Express Front-end: React DevTool: Visual Code, Git 프로그램 설치 각 프로그램은 아래의 링크를 통해 설치하면 된다. Visual Code https://code.visualstudio.com/download NodeJS https://nodejs.org/ko/ Git CLI: https://git-scm.com/downloads GUI: https://desktop.github.com/ .gitignore https://www.toptal.com/developers/gitignore/api/visualstudiocode,node,react,git 환경설정 NodeJS를 .. 2022. 6. 2.

이전 1 2 3 4 5 6 7 8 다음

티스토리툴바